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

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 :

• 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:

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).