¿La solución óptima? Imagen Destacada responsive/Responsive Thumbnail Image

bioniczoid
(@bioniczoid)

hace 7 años, 9 meses

Hola a todos.
Tengo una duda existencial sobre el correcto uso de la Imagen Destacada en un sitio Responsive.

Ej. Tengo un blog y quiero que en el index, los posts tengan una miniatura (250×140), mientras que en el single.php (en el mismo post) esa misma foto esté a tamaño completo (640×350). ¿Cuál es la mejor forma de hacer? La forma ‘artesanal’ sería usar siempre la foto grande y simplemente escalarla en el index. La desventaja va a ser el peso de la foto.

¿Qué otra solución se les ocurre? Hace poco actualicé WP, trabajé mucho tiempo con una versión de 2012 (sí, aunque no lo crean). Así que no sé si han agregado otras formas HTML como srcset, que me puedan ayudar en esto.

Gracias de antemano!

Viendo 6 respuestas - de la 1 a la 6 (de un total de 6)

Moderador almendron
(@almendron)

hace 7 años, 9 meses

Yo uso la imagen destacada en el index mediante https://developer.wordpress.org/reference/functions/the_post_thumbnail/ y el tamaño de la imagen es el que tú indiques, es decir, que no al escalas sino que la pones a un tamaño más pequeño.

Iniciador del debate bioniczoid
(@bioniczoid)

hace 7 años, 9 meses

Así la uso yo también pero no me sirve para un sitio responsive :S
Moderador almendron
(@almendron)

hace 7 años, 9 meses
Sí que sirve. Todo dependerá de cómo configures el contenedor de la imagen destacada.
Mi sitio es responsive y utilizo ese método.
- Esta respuesta fue modificada hace 7 años, 9 meses por almendron.
pablolopezmestre
(@pablolopezmestre)

hace 7 años, 9 meses

En imagen destacada carga siempre el tamaño más grande que vayas a utilizar, en tu caso 640×350, en tu single.php la recuperarás con the_post_thumbnail( ‘full’ );

Además en tu function puedes crear un thumbnail al tamaño que tu quieras, por ejemplo 250×140 (te recomendaría que fuera proporcional al más grande para que no te corte parte de la imagen) con la función add_image_size https://developer.wordpress.org/reference/functions/add_image_size/

Y en el listado la invocas con the_post_thumbnail( ‘el-nombre-que-hayas-puesto’ );

Iniciador del debate bioniczoid
(@bioniczoid)

hace 7 años, 9 meses

Está perfecto, pero mi sitio va a tener un nuevo diseño y las fotos van a ser más grande que 640px, por lo que van a tener un peso considerablemente mayor. Y yo no quiero que la gente que use un dispositivo móvil cargue esa foto tan grande.

Entiendo que con add_image_size pueda poder un thumbnail como yo quiera, pero ¿Puedo hacer que cargue ese nuevo tamaño cuando el usuario esté navegando con una pantalla de X tamaño? Ese es el problema.

Que cuando esté en un teléfono cargue la el the_post_thumbnail( ‘small’ ), cuando esté en un tablet cargue el ‘medium’ y en desktop la versión ‘full’. ¿Es posible?

Alfonso Catrón
(@alfonso100)

hace 7 años, 9 meses

En las versiones de WordPress posteriores a la 4.4, incluyeron en el core una funcionalidad de imágenes responsivas. Esta funcionalidad le pone a todas las imágenes el atributo srcset, que lleva todos los tamaños disponibles de imágenes, asi los browsers modernos pueden elegir el tamaño que mas les conviene.
https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

hay que hacer algunos ajustes las plantillas del theme y en el archivo functions, pero creo que es el enfoque más adecuado para trabajar con imágenes responsivas.

Ahi enlazan un artículo de AListApart que trata el tema de srcset e imagenes responsivas que vale la pena leer.

http://alistapart.com/article/responsive-images-in-practice