How to Add Width and Height Dimensions to Divi Images

by | Aug 29, 2020 | Divi Hacks, Wordpress Optimization

Are you a Divi user? Ever wondered how to add width and height dimensions to Divi images?

I use Elegant Theme’s Divi builder for all of my projects. To say I love its creative magic and ease of use is an understatement. In fact, when first getting back into the website game, it quickly became my gateway drug of choice into the wonderous world of WordPress development – recovery is futile.

But, as with most things, Divi is not perfect. One of my pet peeves is the inability to add width and height dimensions on Divi images. Seems like a small thing I know, particularly in a world of responsive web design, but it drives me absolutely bonkers.

Barry Pollard from Smashing Magazine explains why in his excellent article on why Setting Height And Width On Images Is Important Again, and its all about user experience. Bad user experience leads to no user experience I say … and Google (you know, the big-brother company that pretty much controls your online potential?) agrees. In fact, they’re upping the stakes for non user-friendly websites which I go into more detail in my recent blog article Website Speed Test Alert – Battle Google’s Public of Shame.

In case you can’t tell, l ‘m super keen on WordPress optimization. Call me an “optimization freak” and I’ll shake your hand and wear the label proudly. The inability to add width and height dimensions on Divi images is bad for optimization, which is bad for user experience, and in the end our Google PageSpeed results suffer for it. Well, we simply can’t have that, can we?

If you’re reading this article, you’ve most likely scoured the internet looking for solutions to add width and height dimensions to Divi images, but none are readily available or totally outdated. Perhaps, like me, you even pinged Divi support in hopes of a magic solution, to which you were told “it is impossible” due to Divi’s responsive design approach. Ummm … pardon me? Impossible you say? Well, I took that as a challenge … as my Gramps used to say, “where there is a will, there is a way”. Below I share with you two ways to add height and width dimensions to your Divi images, and bump that page speed score up just a little more 😊

The Quick Fix: How to Add Width and Height Dimensions to Divi Images by Directly Editing the Image Module File

In your favourite text editor, open up the Divi image module file located at :

wp-content/themes/Divi/includes/builder/module/Image.php.

Around line 443 find the block of code that starts with $image_html = $multi_view->render_element and add the following  code (highlighted) to fetch the intrinsic dimensions of the image and add them to the attributes array:

list($width, $height) = getimagesize($src); ///fetch the current image intrinsic width and height
$image_html = $multi_view->render_element(
array(
'tag'      => 'img',
'attrs'    => array(
'src'   => '{{src}}',
'alt'   => esc_attr( $alt ),
'title' => esc_attr( $title_text ),
'width' => esc_attr( $width ),  //add the width as an attribute in $output var
'height' => esc_attr( $height ), //add the height as an attribute in $output var
),
'required' => 'src',
)
);

That’s it! You’re good to go.

It’s definitely not best practice to directly modify a theme’s core files, but it’s super quick if you’re in a pinch and hey, sometimes you gotta do what you gotta do. The real drawback with this one is that whenever the Divi theme is updated, you will lose your changes so make sure to bookmark this article in case you need to reference it again😉

The Lasting Fix: How to Add Height and Width Dimensions to Divi Images by Creating Your Own Extended Class

This one is a bit trickier, but not as scary as it sounds, and the real plus is it will not be overwritten with theme updates. I’ll walk you through it but before I do, a huge shout-out to Jonathan Bossenger who’s post on Building your own Divi Builder Modules got me on my way with this one!

The image module is created and rendered using PHP Classes. Each Divi module has its own extended class that groups together variables and functions (they are called property’s and methods in Classes).

For this fix, we will copy all of the code from  Divi’s Image Module class file and add the aforementioned modifications. I discovered some unexpected results using this in the builder itself, so we’ll wrap the entire class in logic that will only take affect on the front end if the user is not logged in (you know, like a page speed test or Google crawl bot 😉)

  1. Start by creating the custom image class file in your child theme directory. I called mine custom-image-module.php.
  2. In your child theme’s function.php file, add the following code to include the custom-image-module.php file:
    include_once(get_stylesheet_directory() . '/custom-image-module.php');
  3. All other changes will be made inside the custom-image-module.php file itself, so open that up and add the following code to ensure it is only included on the front end if the user is not logged in:
    if ( ! is_user_logged_in() ){ }
  4. Add a function that will wrap around the Class code and be hooked into the custom Divi et-builder-ready action, I called my function extend_divi_child_theme_setup(). So the code in your custom-image-module.php file will now look like this:
    <?php 
    
    if ( ! is_user_logged_in() ){ ///only call on front-end 
    
    function extend_divi_child_theme_setup() {
    
    ////php class code to go here
    
    } 
    
    add_action('et_builder_ready', 'extend_divi_child_theme_setup', 101); ///hook the function into the custom Divi hook }
  5. Copy the entire code in the Divi Image Module fiile located in wp-content/themes/Divi/includes/builder/module/Image.php and paste it into your custom-image-module.php file in between the curly braces of the function extend_divi_child_theme_setup.
  6. Adjust the name of the class to make it unique:
    ET_Builder_Module_Custom_Image extends ET_Builder_Module { ///create the new sub class name 
  7. Make the same code adjustments as described in the Quick Fix method above to add the width and height attributes:
    list($width, $height) = getimagesize($src); ///fetch the current image intrinsic width and height
    $image_html = $multi_view->render_element(
    array(
    'tag'      => 'img',
    'attrs'    => array(
    'src'   => '{{src}}',
    'alt'   => esc_attr( $alt ),
    'title' => esc_attr( $title_text ),
    'width' => esc_attr( $width ),  //add the width as an attribute in $output var
    'height' => esc_attr( $height ), //add the height as an attribute in $output var
    ),
    'required' => 'src',
    )
    );
  8. At the very bottom replace the code that reads
    new ET_Builder_Module_Image();

    with the following code:

    $et_builder_module_custom_image = new ET_Builder_Module_Custom_Image();
    remove_shortcode( 'et_pb_image' ); //remove the original et_pb_image shortcode and replace with...
    add_shortcode( 'et_pb_image', array($et_builder_module_custom_image, '_shortcode_callback') );

    This basically creates an instance of your custom class and overwrites the original et_pb_image short code with your modified one.

That’s it! Once done your custom-image-module.php should look like this:

<?php
if ( ! is_user_logged_in() ){  ///only call on front-end

function extend_divi_child_theme_setup() {
class ET_Builder_Module_Custom_Image extends ET_Builder_Module {  ///create the new sub class name

//// all the original php class code with the width and height code adjustments


$et_builder_module_custom_image = new ET_Builder_Module_Custom_Image();
remove_shortcode( 'et_pb_image' );  //remove the original et_pb_image shortcode and replace with...
add_shortcode( 'et_pb_image', array($et_builder_module_custom_image, '_shortcode_callback') );
}
add_action('et_builder_ready', 'extend_divi_child_theme_setup', 101);  ///hook the function into the custom Divi hook 
}

Open up an incognito browser window (to by-pass your WordPress logged in status) and take a look at the page source code. If done correctly you should see the width and height attributes added to the image tag like this:

Add Width and Height Dimensions To Divi Images

Won’t Adding Width and Height Dimensions to Divi Images Break the Responsive Design?

You might assume that adding the dimensions to the image will break the responsive design of the image when viewed on a tablet or smartphone, but this is not the case. Divi uses the srcset declaration to choose which image size to use depending on the device view-port, so adding the width and height has no impact other than to let the browser know the intrinsic size of the image and reserve the appropriate space so there are no huge content shifts. If you follow best practice of sizing your images to their container, you will be Gucci and have bumped up your page speed score a bit.

That’s it for now! There may be other ways to accomplish this, so please share in the comments below solutions that have worked for you.

Happy Optimizing!

Lee

About The Author

Lee Kierstead

Lee Kierstead

Founder/Owner, Studio 6AM - Websites That Work!

Lee has over 12 years experience as a full stack developer and specializes in WordPress design, development and optimization for small business and partnering website designers. Lee lives with his loving family in Whitby, Ontario, Canada.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Combat Google's Slow Website Badge Today

15% Off WordPress Speed Optimization Package

Get Your Free Assessment Now
JOIN 6AM NATIONPlenty Insightful. Awfully Helpful. Always Free.

Put your website ahead of the digital marketing game!  Become a member of 6AM Nation to receive exclusive bonus offers and free monthly web marketing tips and tricks.  No blood contract needed.  Just great free advice straight into your inbox courtesy of your friendly neighbourhood web designer! Easy-Peasy.

Win The Battle Against Google's 'Public Badge Of Shame'!Significantly Improve Your Website's Loading Speed For Only $249.00 (15% Off)

Protect your brand, improve your page rank, increase traffic, and avoid Google's public "Badge of Shame" with a Studio 6AM WordPress Speed Optimization Package.

You get:

  • Free Website Speed Assessment
  • Page & Browser Caching Configuration
  • Site-wide Java Script and CSS Optimization
  • Deep Optimization of Homepage (Including Images)
  • Before & After Report
  • 15% Off Standard Pricing of $300.00

Submit this form to get your free website speed assessment and a 15% discount upon purchase. 100% Money Back Satisfaction Guarantee.

Pin It on Pinterest