A Divi Image Module Alternative – The Text Module
I recently built a site for a client using the Divi Theme and suggested they use the default WordPress editor for creating posts; this was fine until I realised they wanted the image pop-ups as used in the Divi Image Module.
Rather than code something by hand to mimic the effect, I already knew that using the et_pb_lightbox_image class would enable the pop-up feature on an image. What I didn’t know was how easy it was to add this class to images added in the default editor and likewise, in any Divi Module that uses the TinyMCE editor such as the text module. You can of course add the class in the text editor, but that’s not the quickest solution, and certainly not the easiest for most clients.
There’s always a caveat or two
Let’s start by considering what we will lose by not using the Image Module. Although the text module and other modules have the usual Design Tab and styling options, in the image module these options are of course to style the image container so we instantly lose much of the styling options that are usually available. It’s quite a large caveat to be fair, so if you’re not happy with a fairly simple image then maybe this isn’t for you. If however you’re happy to add a little CSS to style your text module images, then read on, you’re going to love this I am sure.
The second caveat is that to do this within the Divi Builder, you have to set it up in the back end builder as the options required aren’t available when using the Visual Builder. This is such a shame although if like my client, you are creating posts with the default WordPress editor then this caveat isn’t an issue.
Most people are aware of the limitations of the standard Divi Image Module. The need to add the alt tag and title in the Advanced Tab, no way of selecting a different sized image from the original uploaded image, and no use of the srcset attributes that have been included in WordPress I believe, since version 4.4. All of these limitations can be overcome when using a Text Module or the default post editor.
Below is a quick side by side (if on desktop) example of an image added with the Image Module (left) and a Text Module (right). For this I am using an image of my mum (catching flies) and my niece (without their permission).
They’ll never know… probably.
The image I have used for this was uploaded at 1920 x 1080px. The first image added with the Image Module uses this same size image for both the initial page load and the pop-up. Because the second image was added in the TinyMCE editor in the Text Module, I was able to choose the initial image size from the options available in WordPress as well as using a custom size. In this case I used 600px wide. The pop-up on this image will still use the full size image.
There is another small caveat to the second image in that when clicked for the first time, the usual animation you get in the Image Module doesn’t really work because the image hasn’t been loaded yet. The benefit of course is a smaller initial page size and I personally think this caveat is barely worth a mention. Click the images to see what I mean.
So, how do we do this?
As previously stated, you can do this in a text module in the backend builder or the default WordPress post editor. You can’t do this in the Visual Builder, but you can cut and paste the code into a Visual Builder module if you first create it in a post using the default editor. For this tutorial I’m using a new post with the default editor.
So let’s get down to it.
First create a New Post.
In the Visual editor tab of the post edit screen, click the Add Media button to upload or add your image.
Choose your image and edit the attachment settings.
Add a title, your alt text and a caption if you want one (another benefit!). In the Attachment Display Settings set the alignment if you want to, change the Link To option to Media File and then choose the image Size that you want to show on the front end. If you want a custom size, you can leave this for now.
Click the Insert into post button.
Now the image is in your post, click it to bring up the alignment, edit and delete ‘quick links’. Click the Pencil Icon to open the Image Details dialogue box.
Adding a custom image size.
The Image Details box allows yo to edit the Attachment Settings just as before but this is where you can choose to use a custom size for your image instead of the WordPress default sizes. Just select ‘Custom Size’ in the Size drop down box and then enter your custom size. The image will retain it’s original aspect ratio when changing the width or height.
Add the class to enable the pop-up
Staying in the Image Details dialogue box, scroll down a bit to show the Advanced Options. You may need to click Advanced Options to show them. Here you can add an Image Title Attribute if you need to and you can also add a class to the img tag in the Image CSS Class box if you need it for styling.
Leave the ‘Open link in a new tab’ checkbox unchecked and add the et_pb_lightbox_image class to the Link CSS Class input box as shown below. You don’t need to add the preceding . to the class.
Click the Update button to return to the post editor.
Preview the post.
If you now preview our post you will see the lightbox effect on the image is now working. You’ll need to inspect the code to see the srcset attributes have been added by WordPress. You can’t view the srcset attributes in the post editor but copying the code in the Plain Text view and pasting elsewhere, such as in a Visual Builder module should still allow WordPress to add the srcset attributes.
Just one more thing.
When I first uploaded my image to WordPress it was actually quite huge. The first thing I did was to scale the image in WordPress down to 1920 x 1080px. If you do this, the srcset attributes won’t work unless you regenerate your media library images.
Just something to keep in mind.