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

Updated 7/24/2018 | Published 6/26/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 that is also at the very top of the article, just under its title.

 

That's good, in this article, we will see how to add different images to the front page within the same article with the help of a plugin and some 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're going to use an extension to add multiple front page images to our Divi posts, we'll still need to add a few lines of code here and there... To complete this tutorial, you'll 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 images and you can stop at two or three images on the front page. In this case, you will take care to slightly modify the code so that there are no errors...

 

2 - The code to add in 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 your Divi child theme's functions.php file.

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'),

Also, 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;
});

Take a good look at the differences between these two pieces of code and make your changes according to the number of front page images you want 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 have 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's up to you to decide where to add these bits of code.

During my test, I added two front page images within my single.php at places like the top of my post and the bottom of my post:

ajout image à la une en haut de l'article

Add a front page image at the top of the article

 

ajout image à la une en bas de l'article

Add 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 result, 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 tab > Theme Options > Layout, you'll 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 one is a front page image that has been added at the top of the article using the plugin and the various pieces of code (in the single.php and in the functions.php).
  3. the third one is a front page image that has been added at the bottom of the article using the plugin and the various pieces of code (in the single.php and in the functions.php).
  4. the fourth is a front page image that was added using a widget in the sidebar (and code inserted in the functions.php).

Comment ajouter plusieurs images à la une dans Divi

 

Comment ajouter plusieurs images à la une dans Divi

1,235 words

5

You should like it too:

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.

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this 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. Les champs obligatoires sont indiqués avec *

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.

Pin It on Pinterest

Shares
Share This