Thanks Jabob and sorry for the late answer. It took me time to understand just a bit and test things. I lack wordpress and php knowledge.
This short article helped me as well as I use ACF (advanced custom fields) :
https://awesomeacf.com/responsive-images-wordpress-acf/
I could completly manage the srcset and sizes of the main image of my articles (single.php).
But not the thumbnails of each articles in my blog page (taxonomy.php)
I did something close to what you wrote in your 2nd and 3rd code and it worked. The alt attribute only doesn't work unfortunatly for no reason I understand.
Here is what I did :
in function.php :
function responsive_feature_image($image_id,$image_size,$max_width){
function remove_max_srcset_image_width( $max_width ) {
$max_width = 1350;
return $max_width;
}
add_filter( 'max_srcset_image_width', 'remove_max_srcset_image_width' );
// check the image ID is not blank
if($image_id != '') {
// set the default src image size
$image_src = wp_get_attachment_image_url( $image_id, $image_size );
// set the srcset with various image sizes
$image_srcset = wp_get_attachment_image_srcset( $image_id, $image_size );
// generate the markup for the responsive image
echo 'src="'.$image_src.'" srcset="'.$image_srcset.'" sizes="(max-width: 449px) 120vw, (max-width: 767px) 576px, (max-width: 1365px) calc( 100vw - 60px - 55% ), '.$max_width.'"';
}
}
In single.php :
<?php $img = get_field('image_principale'); ?>
<div class="feature-image">
<?php if( $img ): ?>
<img <?php responsive_feature_image($img,'featured-blog','719px'); ?> alt="<?php echo $img['alt']; ?>" />
<?php else: ?>
<img src="<?php echo get_template_directory_uri() ?>/dist/images/article/feature-image-default.jpg" alt="Illustration de l'article">
<?php endif; ?>
</div>
Unfortunatly I couldn't find out how to achieve the same for the thumbnails images of my blog page in the file taxonomy.php. The thumbnails are sorted by categories by a filter menu. It explains that the code is much much more complicated. Just in case you can help me some more.
Here is how the thumbnails are called in taxonomy.php :
<?php $displayCurrentCat = get_field('display_articles-in-page_by_category', $term); ?>
<?php if(!$displayCurrentCat && $children): ?>
<nav class="filter_by_category">
<ul>
<?php if( $children ): ?>
<li>Filtrer les articles </li>
<li data-filter="all" class="actif">
<a href="#">Toutes les catégories</a>
</li>
<?php foreach( $children as $child ): ?>
<?php $child_term = get_term($child) ?>
<li data-filter="<?php echo $child_term->term_id; ?>" >
<a href="#"><?php echo $child_term->name; ?></a>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</nav>
<?php endif; ?>
<div class="all_the_articles tdm__posts <?php if(!$displayCurrentCat){ echo'filtr-container'; } ?>">
<?php if($displayCurrentCat): ?>
<div class="tdm__grid tdm__grid--5">
<?php render_term_thumbnails($term); ?>
</div>
<?php else: ?>
<?php if( $children ): ?>
<?php foreach( $children as $child ): ?>
<?php $child_term = get_term($child) ?>
<div class="filtr-item" data-category="<?php echo $child_term->term_id; ?>" data-sort="value">
<div class="nom_categorie tdm__posts__cat" >
<h2><?php echo $child_term->name; ?></h2>
</div>
<div class="tdm__grid tdm__grid--5">
<?php render_term_thumbnails($child); ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
Here is what's in function.php :
function render_content_thumbnail($id){
$img = get_the_img(get_field("thumbnail", $id), "thumbnail-blog");
if(!$img){
$img = '<img src="'.get_template_directory_uri() . '/dist/images/default_thumb.png" class="attachment-thumbnail-blog size-thumbnail-blog" alt="default '.get_the_title($id).'">';
}
$title = get_field('titre_court', $id) ? get_field('titre_court', $id) : get_the_title($id);
echo '
<article class="reveal tdm__post tdm__post--'.$id.' '.get_field('couleur', $id).'">
<a class="tdm__post__link" href="'.get_permalink($id).'">
<span class="tdm__post__thumbnail">'.$img.'</span>
<span class="tdm__post__title">'.$title.'</span>
</a>
</article>';
}
function render_term_thumbnails($term){
$t = get_term($term);
$args = array(
'post_type' => 'article',
'orderby' => 'menu_order',
'order' => 'ASC',
'tax_query' => array(
array(
'taxonomy' => 'categorie',
'field' => 'slug',
'terms' => $t->slug
),
),
);
$tdmQuery = new WP_Query( $args );
while ( $tdmQuery->have_posts() ) : $tdmQuery->the_post();
render_content_thumbnail( get_the_id() );
endwhile;
wp_reset_postdata();
}
function render_term_menu($term){
$t = get_term($term);
$args = array(
'post_type' => 'article',
'orderby' => 'menu_order',
'order' => 'ASC',
'tax_query' => array(
array(
'taxonomy' => 'categorie',
'field' => 'slug',
'terms' => $t->slug
),
),
);
$tdmQuery = new WP_Query( $args );
while ( $tdmQuery->have_posts() ) : $tdmQuery->the_post();
render_content_menu( get_the_id() );
endwhile;
wp_reset_postdata();
}
function get_the_img($att_id, $size, $diapo = false){
if( $att_id ){
$imgSrc = wp_get_attachment_image_src($att_id, $size);
$srcset = wp_get_attachment_image_srcset($att_id, $size);
$sizes = wp_get_attachment_image_sizes($att_id, $size);
if(function_exists( 'get_rocket_option' ) && get_rocket_option( 'lazyload' ) && !is_user_logged_in() ){
$i = '<img width="'.$imgSrc[1].'" class="-is-lazy" height="'.$imgSrc[2].'" data-lazy-src="'.$imgSrc[0].'" alt="'.$imgSrc[3].'" data-lazy-srcset="'.$srcset.'" sizes="'.$sizes.'">';
}else {
$i = '<img width="'.$imgSrc[1].'" height="'.$imgSrc[2].'" src="'.$imgSrc[0].'" alt="'.$imgSrc[3].'" srcset="'.$srcset.'" sizes="'.$sizes.'">';
}
$legend = wp_get_attachment_caption($att_id);
$credit = get_field('credit', $att_id);
$i = $diapo ? sprintf( '<div class="effet_photo">%1$s</div>', $i ) : $i;
$i = $legend || $diapo || $credit ? sprintf( '%1$s<p class="description_photo">%2$s<span>%3$s</span></p>', $i, $legend, $credit ) : $i;
return $i;
}
}
