Vous souhaitez nous contacter, poser des questions / besoins en développement web ?

Contactez-nous

NB : Faire une sauvegarde de votre thème, de votre fichier et/ou votre base de données avant d’ajouter ces fonctions tutoriels.

Images ACF avec un custom size images WordPress
Difficile

Publié le : 26 février 2020 - Modifié le : 17 janvier 2022

Temps de lecture : 1 minute, 18 seconds - 82 mots

Version audio de cet article

Nous allons dans le tutoriel d’aujourd’hui, développer une petite fonctionnalité pour afficher des images avec une taille personnalisée qui est déjà paramétrée dans nos fonctions avec le add_image_size.

Donc on doit par exemple vérifier si notre add_image_size est présente dans nos fonctions comme dans l’exemple ci-dessous.

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

Laissez un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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>