Custom Image

This document explains how to use the Custom Image filter available in the Divi FilterGrid plugin.

By default, Divi FilterGrid will display the featured image of each post or custom post type. The plugin will display the 400 x 284 px thumbnail version of the featured image if this thumbnail exists for the image. If the thumbnail size does not exist because the image is too small, the full size image will be displayed. You can change the thumbnail size by selecting the size you want from the Thumbnail Size dropdown option found in the module’s Posts Elements section.

In some cases, you may want to display an image other than the featured image for all posts or only specific posts. For example, if a post does not have a featured image defined you may want to display a default image. Below is an example for this exact scenario. To replicate this you’ll need to add the following to your child theme’s functions.php file:

In the example above, we are first checking if the current post in the grid has a featured image by checking the $thumb_url variable. If this variable is empty, the post does NOT have a featured image set. We then return the URL of an image thumbnail we would like to display rather than display no image at all. This is the image that will get displayed in the grid.

Notice we are displaying the 400×284 thumbnail since that is the default thumbnail size that is displayed in the grid. You can change the thumbnail size to match your selected thumbnail size if you’ve changed the Thumbnail Size setting in the module’s Posts Elements section.

Also notice that we included a commented line in the example above (line 3). In the commented line, we are displaying the thumbnail by attachment ID. If you prefer to get the image thumbnail by attachment ID, you can uncomment this line and delete the line below it (line 4). In this case, we are providing the $width and $height values to the wp_get_attachment_image_url function. These values come from the Thumbnail Size setting in the module’s Posts Elements section. For example if you have the et-pb-portfolio-image-(400×284) thumbnail size selected, the wp_get_attachment_image_url function will return the 400 x 284 thumbnail version of the image.

The example above will change the featured image that’s displayed in the grid. If have selected the lightbox or lightbox gallery option in the module’s Posts Elements -> Click Action option, you’ll also want to change the full image that’s displayed in the lightbox. To do this, add the following to your child theme’s functions.php file:

In the example above, we are performing nearly identical steps. If the featured image does not exist ($thumb_url variable is empty), we are returning an image we would like to display in its place. Since this image is for the lightbox, we want it to be the large version of the image and do not need to provide the thumbnail version.

If you have not selected the lightbox or lightbox gallery in the click action option you do NOT need to include the filter above. You can simply include the first filter to change the image displayed in the grid.