How do I add multiple images to the front page in Divi?

Updated on 24/07/2018 | Published on 26/06/2018 | 3 comments

Have you ever wanted to add several images to the front page to illustrate the same article? I'm not talking about the images that are inserted in the body of the article, but rather the featured image, the one that illustrates your article on the blog page and which is also found at the very top of the article, just under its title.

 

That's good, in this article, we'll see how to add different front page images within the same article with the help of a plugin and a few lines of code...

Discover Divi now!

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and the sponsored links are in pink.

 

1 - Requirements for adding multiple images to the front page

Although we will be using an extension to add multiple front page images to our Divi posts, we will still need to add a few lines of code here and there... To complete this tutorial, you will need :

plugin Multiple Featured Images

In the following example, I'm going to add 3 front page images in addition to the basic front page image. Of course, you don't have to add so many and you can stop at two or three front page images. In this case, you will take care to modify the code slightly so that there are no errors...

 

2 - The code to add to the functions.php file

Once you have installed and activated the Multiple Featured Images extension, you will need to add a few lines of code to the functions.php file of your Divi child theme.

integration multiple images theme enfant

This code is added to the code already present in this functions.php file, here is the text version:

add_filter( 'kdmfi_featured_images', function( $featured_images ) {

// Add featured-image-2 to page and post
$args_1 = array(
'id' => 'featured-image-2',
'desc' => 'Cette image apparaitra en haut, sous le titre de votre article',
'label_name' => 'Image en haut des articles',
'label_set' => 'Choisir',
'label_remove' => 'Supprimer',
'label_use' => 'Choisir',
'post_type' => array( 'page', 'post' ),
);

// Add featured-image-3 to pages and posts
$args_2 = array(
'id' => 'featured-image-3',
'desc' => 'Cette image apparaitra à la fin de vos articles',
'label_name' => 'Image en bas des articles',
'label_set' => 'Choisir',
'label_remove' => 'Supprimer',
'label_use' => 'Choisir',
'post_type' => array( 'page', 'post' ),
);

// Add featured-image-4 to page and post
$args_3 = array(
'id' => 'featured-image-4',
'desc' => 'Cette image apparaitra dans un widget à placer dans la sidebar',
'label_name' => 'Image Pinterest Widget Sidebar',
'label_set' => 'Choisir',
'label_remove' => 'Supprimer',
'label_use' => 'Choisir',
'post_type' => array( 'page', 'post' ),
);

// Add the featured images to the array, so that you are not overwriting images that maybe are created in other filter calls
$featured_images[] = $args_1;
$featured_images[] = $args_2;
$featured_images[] = $args_3;

// Important! Return all featured images
return $featured_images;
});

This code is designed to add multiple front page images to your pages and posts. If you want to add these multiple images only to your posts, then you can change the line post_type => array( 'page', 'post'), to post_type => array( 'post'),

Similarly, if you only want to add one image to the front page (in addition to the one already there), then your code should look like this:

add_filter( 'kdmfi_featured_images', function( $featured_images ) {

$args = array(
'id' => 'featured-image-2',
'desc' => 'Your description here.',
'label_name' => 'Featured Image 2',
'label_set' => 'Choisir',
'label_remove' => 'Supprimer',
'label_use' => 'Choisir',
'post_type' => array( 'page', 'post' ),
);

$featured_images[] = $args;

return $featured_images;
});

Look carefully at the differences between these two pieces of code and make your changes according to the number of front page images you wish to insert.

For more information, you can see the instructions on the extension page.

 

3 - The code to add in the single.php file

At this point, new front page image inserts should have appeared within your articles. If you try to add images, they will appear in the back office but not in the front office. This is normal, there is still a small step to be done...

You need to duplicate the single.php file of the Divi theme (the parent theme) and add this copy to the directory of your child theme.

At the same time, you will need to edit this single.php file to add some lines of code. These lines will make your new images appear on the front page. This means that it is up to you to decide where to add these bits of code.

In my test, I added two front page images within my single.php in places like the top of my article and the bottom of my article:

ajout image à la une en haut de l'article

Adding a front page image at the top of the article

 

ajout image à la une en bas de l'article

Addition of a front page image at the bottom of the article

 

Here is the code to add:

kdmfi_the_featured_image( 'featured-image-2', 'full' );

Don't forget to modify it according to the number of images to be added (featured-image-2, featured-image-3, featured-image-4 etc...).

 

4 - Changing a Divi option

For my example, the image on the front page of my article that appears in the blog module or even in the page of my articles is different from the one at the top of the article.

To achieve this, you will not only need to add the code in the right place but also change an option in Divi.

option image à la une

In the Divi > Theme Options > Layout tab, you will need to set the "Put thumbnails in posts" option to "Disable". This will prevent you from having two images in a row under the title of your post.

 

5 - Using the Multiple Featured Image Widget

featured image widget dans la sidebar

This widget, implemented with the Multiple Featured Images plugin, will allow you to easily add a front page image to the sidebar and/or footer of your site.

This image will be displayed differently depending on your posts and the images you have assigned to this location. This is ideal for displaying the image for Pinterest for example or a banner ad.

 

6 - In conclusion...

Comment ajouter plusieurs images à la une

How to add several front page images: here, four different front page images

In this example, you can see that the article displays four front page images:

  1. the first is the basic front page image
  2. the second is a front page image that has been added to the top of the article using the plugin and the various pieces of code (in single.php and functions.php).
  3. the third is a front page image that has been added to the bottom of the article using the plugin and the various pieces of code (in single.php and in functions.php).
  4. the fourth is a front page image that has been added using a widget in the sidebar (and code inserted in functions.php).

Comment ajouter plusieurs images à la une dans Divi

 

Comment ajouter plusieurs images à la une dans Divi

1,235 words

5

You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

3 Commentaires

  1. Jan

    Bonjour,

    J’ai une petite question.

    J’ai bien réussi a tout mettre en place comme expliqué dans le tuto
    (qui d’ailleurs au passage je le souligne, est très bien expliqué et agréable a lire)

    Cependant cela ne fonctionne plus quand mon post est crée par le thème Builder.

    faut-il mettre le code ailleurs que dans single PHP pour que cela fonctionne ?

    En gros je voudrais que les image 2 – 3 – 4 soit mise a la suite de mon image en avant 1 dans le post direct.

    mais ma page post est crée avec le thème buidler comme vous l’avez expliqué dans un de vos articles. (ce qui me va très bien) mais pour le coup ne fonctionne pas.

    Pourriez vous m’aider s’il vous plait, enfin m’expliquer comment faire surtout.

  2. Jan

    Bonjour Lycia,

    Je vous ai écrit un message hier soir ici, je bloc complétement sur les images a la une

    quand je l’utilise avec la page single.php tout fonctionne sans aucun souci

    mais j’ai besoin de pouvoir utiliser cette solution en utilisant le thème Builder !

    en faite je eux réussir a avoir deux colonne

    1 colonne de gauche = les images à la une que l’on peu agrandir en cliquant dessus un peu comme si c’était une galerie

    2 colonne de droite = le texte de mon article

    j’ai créée avec theme builder ma page ou j’ai

    en haut le titre avec image en fond = ok

    en dessous deux colonne

    colonne 1 (gauche) j’ai mis titre du post sans afficher le titre et les méta (j’affiche uniquement l’image a la une)
    et je voudrais appeler en dessous les images a la une 2,3,4

    colonne 2 (droite) j’ai mis publier un contenu pour afficher le contenu texte de mon article.

    quel idée ou solution auriez vous pour que je puisse utiliser cette méthode ?

    ps: pour info j’ai enregistrer mon nom et email en dessous de commentaires pour être enregistrer mais je doit retaper mon nom et email a chaque commentaire.

  3. Lycia Diaz

    Salut Jan… Écoute, ici sur Astuces Divi, j’utilise 2 images à la une et aussi le Thème Builder. Donc les deux sont compatibles, plus ou moins, je pense. Si tu regardes mes articles, il y a une image « en anglais » à la fin de la barre latérale, et bien j’ai utilisé ce tuto ici présent… Mais j’ai fait cela dans une sidebar que j’appelle dans mon modèle d’article. Peut-être que tu devrais faire de même. Ensuite, il te suffit d’ajouter un module « barre latérale » où tu veux dans ton modèle et ton image devrait s’afficher. Voilà, je pense que l’astuce est là. Tiens-moi au courant.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

New Divi training!

55 videos to master the Divi Visual Builder like a pro: ⏱ 3h30 of theory + 👩🏻💻 6h00 of practical application + 🤝 30min. of individual coaching in visio.

(CPF eligible training)

Pin It on Pinterest

Shares
Share This