NB: Make sure you do a back up of your theme, files and database before attempting the tutorials

Using Custom Sizes on Images with ACF Images
Hard

---- Last modified : Nov 18 2021

Estimated reading time : 1 minute, 13 seconds - 77 words

This tutorial will show you how to create a function that will allow you to display images with custom dimensions with add_image_size.

Most importantly, we need to confirm that add_image_size is available in our functions as demonstrated below.

add_action( 'after_setup_theme', 'siteweb_theme_setup' );
function siteweb_theme_setup() {
	add_image_size( 'similaires', 460, 340, true );
}

Ensuite nous allons afficher notre sub field repeater ACF. Dans notre exemple de travail, il y a un sub field image ou on va lui donner l’argument de notre taille d’image personnalisé.

<?php 
/// On appelle et on conditionne le field parent reapeater qui contient les sub field 
if(get_field('produits-similaire')) : while(the_repeater_field('produits-similaire')) : 
// On appelle le sub field image et on lui donne une url qui contient l'argument d'afficher notre taille personnalisée.
$image = get_sub_field('image-produits-similaires'); 
$image_url = $image['sizes']['similaires'];
?>
<div class="eight columns nomargin prodimg">
<a href="<?php the_sub_field('lien-produits-similaire'); ?>"> 
<img src="<?php echo $image_url; ?>" alt="<?php the_sub_field('titre-produits-similaire'); ?>">
<h2 style="text-align:center"><?php the_sub_field('titre-produits-similaire'); ?></h2>
</a>
</div>
<?php endwhile; endif; ?>

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>