Escalado responsive de imágenes con the_post_thumbnail() en WordPress

Question

Escalado responsive de imágenes con the_post_thumbnail() en WordPress

7 mar 2014, 17:59:57

Vistas: 13.8K

Votos: 0

En mi archivo functions.php, tengo:

add_theme_support( 'post-thumbnails' );
add_image_size( 'kev-feature', 650, 342, true );

En un archivo de plantilla, tengo:

<div class="article-feature-image"><?php the_post_thumbnail('kev-feature'); ?></div>

Tengo un diseño responsive, y quiero que la imagen que debería tener un máximo de 650x342 se reduzca cuando el navegador se haga más pequeño. Actualmente no lo está haciendo. He notado que la etiqueta img HTML que se genera tiene el alto y ancho codificados, así que supongo que por eso no se escala.

¿Qué estoy haciendo mal aquí?

RailsTweeter

263

miniaturas de publicación responsive

Todas las respuestas a la pregunta

Comentarios

Supongo que quisiste escribir echo $img_url[0] ?

birgire

3 jul 2014 21:37:44

elleeott 315 · Answer 1 · 2014-03-07T18:12:52Z

Esto es más un problema de CSS que un problema con WordPress. Las dimensiones especificadas en la etiqueta HTML img tienen una especificidad de 0, por lo que cualquier regla CSS las anulará. Esto debería funcionar:

.article-feature-image img {
    width:100%;
    max-width:650px;
    height:auto;
}

Como referencia, podrías usar la función wp_get_attachment_image_src para obtener el atributo URL de la imagen destacada y construir manualmente tu etiqueta img sin los atributos de altura y ancho:

<?php $img_url = wp_get_attachment_image_src(get_post_thumbnail_id(),'kev-feature'); ?>
<img src="<?php echo $img_url[0];?>"/>

elleeott

315

7 mar 2014 18:12:52