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 image that is highlighted, 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.

 

Good thing, 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 a few lines of code...

Discover Divi now!

Advertisement: This article contains affiliate links that you will easily recognize. Classic links are in purple and sponsored links are in pink.

 

1 - Prerequisites for adding multiple images to the front page

Although we will use an extension to add several images to the front page of our Divi articles, 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 will add 3 images to the front page in addition to the basic front page image. We will then obtain 4 images on the front page instead of 1, of course, you are not obliged to add as many 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 enabled the Multiple Featured Images extension, you will need to add a few lines of code to the functions.php files of your Divi child theme.

integration multiple images theme child theme

This code is added to the code already present in this file functions.php, 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 intended to add several images to the front page of your pages and articles. If you want to add these multiple images only in your articles, you can then modify the line post_type => array('page','post'), by post_type => array('post'),

As if you only want to add one image to the front page (in addition to the one already present), 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 want to insert.

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

 

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

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

You must 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 a few 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 pieces of code.

During my test, I added two images to the top of my single.php in places like the top of my article and the bottom of my article:

add image to the front page at the top of the article

Adding an image to the front page at the top of the article

 

add image to the front page at the bottom of the article

Adding an image to the front page 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 add (featured-image-2, featured-image-3, featured-image-4 etc...).

 

4 - Change a Divi option

For my example, the front page image 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 have to add the code in the right place but also change a Divi option.

front page image option

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

 

5 - Using the "Multiple Featured Image" Widget

featured image widget in the sidebar

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

This image will be displayed differently depending on your items and the images you have assigned to this location. This is ideal for displaying the image intended for Pinterest, for example, or an advertising banner.

 

6 - In conclusion....

How to add multiple images to the front page

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

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

  1. the first is the basic front page image
  2. the second is a one-to-one 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 is an 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 an image in the front page that has been added using a widget provided for this purpose in the sidebar (and the code inserted in the functions.php).

How to add multiple front page images in Divi

 

Lorem commodo Sed libero felis massa

Pin It on Pinterest

Shares
Share This