Scalare responsivă a imaginii pentru the_post_thumbnail()

Question

Scalare responsivă a imaginii pentru the_post_thumbnail()

7 mar. 2014, 17:59:57

Vizualizări: 13.8K

Voturi: 0

În fișierul meu functions.php, am:

// Activează suportul pentru imagini de prezentare în postări
add_theme_support( 'post-thumbnails' );
// Adaugă o dimensiune personalizată pentru imaginea caracteristică
add_image_size( 'kev-feature', 650, 342, true );

Într-un fișier de șablon, am:

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

Am un design responsiv și doresc ca imaginea, care ar trebui să aibă dimensiunea maximă de 650x342, să se micșoreze pe măsură ce browserul se strânge. În prezent, acest lucru nu se întâmplă. Am observat că tag-ul img generat are înălțimea și lățimea hardcodate, așa că presupun că de aceea nu se scalează.

Ce fac greșit aici?

RailsTweeter

263

post thumbnails responsive

Toate răspunsurile la întrebare

Comentarii

Presupun că ai vrut să scrii echo $img_url[0] ?

birgire

3 iul. 2014 21:37:44

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

Aceasta este mai degrabă o problemă de CSS decât o problemă cu WordPress. Dimensiunile specificate în tagul HTML img au o specificitate de 0, așadar orice reguli CSS le vor suprascrie. Această soluție ar trebui să funcționeze:

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

Ca referință, poți utiliza funcția wp_get_attachment_image_src pentru a obține atributul URL pentru imaginea reprezentativă și pentru a construi manual tagul img fără atributele de înălțime și lățime:

<?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