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...
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 :
- from create a child theme for Divi
- a code editor such as Bracket or SublimText
- install and activate the extension Multiple Featured Images
- some concentration and patience 😉
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.
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:
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.
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
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...
In this example, you can see that the article displays four front page images:
- the first is the basic front page image
- 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).
- 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).
- the fourth is a front page image that has been added using a widget in the sidebar (and code inserted in functions.php).
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.
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.
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.