Elegir imágenes para distintas pantallas y redes sociales

Una ilustración panorámica puede contener todo lo necesario y aun así funcionar mal en una tarjeta. En este ejemplo de Northstar Studio, el cuaderno del taller está cerca del borde derecho de la mesa. El original tiene suficiente detalle, pero el recorte centrado corta el motivo principal. En un teléfono, mostrar toda la mesa deja el cuaderno demasiado pequeño.

Son problemas de edición distintos. Un archivo más pequeño facilita la entrega de la imagen. Un punto focal orienta el recorte. Una imagen móvil independiente permite elegir una composición más cercana para una pantalla estrecha.

Para este ejemplo, elige dos imágenes de Media Library: Workshop table landscape y Workshop notebook detail. La imagen horizontal es la ilustración original de 2400×1200. El detalle vertical es otra imagen del mismo cuaderno, de 900×1200, preparada para la vista móvil.

Mantenga clara esa distinción. WebBlocks CMS genera variantes más pequeñas y recortadas a partir de imágenes públicas JPEG, PNG y WebP compatibles. Esos archivos generados no se convierten en entradas Media Library adicionales. El detalle del retrato aparece aquí porque es un segundo original elegido por el editor.

Abra la imagen horizontal en Medios y mire Image Variants. En este ejemplo, los recortes centrados de Miniatura y Tarjeta cortan parte del cuaderno. Las vistas previas del contenido conservan las proporciones amplias de la ilustración; no lo convierten en una visión más cercana del tema.

Subir una imagen de mayor resolución no resolvería este problema de encuadre. El motivo está en la parte equivocada del recorte. Estas son vistas previas de variantes del sistema: ver una variante Card no significa que el bloque Card la seleccione automáticamente. La versión actual reserva las variantes card y hero, sin ofrecer campos específicos de Media Library para esos usos de los bloques.

En el formulario de edición del medio, selecciona el cuaderno con Focal Point y guarda el cambio. El punto pertenece al registro del medio; revisa sus otros usos antes de moverlo. Orienta los recortes generados de esa imagen, pero no es un ajuste independiente para cada ubicación.

Usa Regenerate variants para reconstruir y revisar las vistas previas. Ahora los recortes Thumbnail y Card conservan el cuaderno. El archivo original permanece intacto. Las variantes Contain mantienen la proporción original, por lo que mover el punto no acerca el bloque Image normal al cuaderno.

Los tamaños de las variantes están definidos por el CMS. Esta pantalla permite a un editor inspeccionarlos y regenerarlos; no ofrece dimensiones personalizadas para cada proyecto. Revise también la vista previa social: las imágenes sociales de páginas o sitios utilizan el recorte social para los metadatos de Open Graph y Twitter.

El bloque Imagen de la página utiliza Workshop table landscape como recurso multimedia predeterminado y Workshop notebook detail como Mobile Image. La segunda selección es una elección editorial, independiente de las variantes generadas.

Hasta 768 píxeles de ancho inclusive, el renderizador selecciona la imagen móvil. Las pantallas más anchas usan la predeterminada. Si la selección móvil falta, es privada o se ha eliminado, se utiliza la imagen predeterminada. El bloque Image también ofrece imágenes candidatas responsivas, pero elegir un archivo más pequeño es distinto de seleccionar esta composición alternativa.

La vista previa de escritorio muestra toda la mesa. La vista móvil da protagonismo al cuaderno sin obligar al visitante a buscarlo dentro de una escena mucho más amplia.

Ambas imágenes utilizan el mismo bloque de texto alternativo y título. En este ejemplo, “Un cuaderno de taller ilustrado con un círculo de terracota y un triángulo verde” describe el tema en ambas vistas. El texto alternativo y los subtítulos se pueden traducir por idioma, pero las selecciones predeterminadas y móviles permanecen compartidas en todos los idiomas. Elija composiciones relacionadas que aún coincidan con esas descripciones.

Quedan dos comprobaciones más. El Gallery Viewer del bloque Image sigue abriendo la imagen predeterminada a resolución completa. Además, Mobile Image no determina la imagen social de la página: selecciona y revisa por separado la imagen de página o de sitio que se usa al compartir. La variante Social del CMS muestra su recorte generado; al compartir el enlace, conviene comprobar también la tarjeta final del servicio externo.

Para conocer el comportamiento subyacente, consulte Medios Image Variants. Agregar una imagen recorre los campos de bloques. Cuando las imágenes formen parte de una actualización de la página en vivo, utilice flujo de trabajo de revisión de páginas publicadas.

Los comentarios se revisan antes de publicarse.