Divi Hooks III - Sizing Featured Images with 'et_pb_index_blog_width' and 'et_pb_index_blog_height'

Hi everyone, today we are here with the new Divi Hooks appointment. We talked about ‘epanel_render_maintabs’, useful if you want maybe just add a tab with a link or any static code, we deeped the general ‘admin_notices’ and how to add real custom options pages to the Divi Theme epanel.

Today, however, we change page and we talk about the WordPress ‘wp_get_attachment_image_src()’ filter and its usage in two useful Divi-related filters: ‘et_pb_index_blog_width’ and ‘et_pb_index_blog_height’.

WP_GET_ATTACHMENT_IMAGE_SRC()

The filters we are going to talk about are documented in the new Developers section of the Divi Documentation in the ‘Hooks’ page. We can go to this page, scroll down till ‘INDEX.PHP’ section and we will find the following informations.

So, the first thing we can do is to deep what is this WordPress function called ‘wp_get_attachment_image_src()’. We can find informations about this function here and we discover that this function was introduced in ‘includes/media.php’ in WordPress 2.5.0 and it returns an array with the image url, the size (width and height) and eventually an icon. Leaving apart the $icon parameter for now in our case so we can get the width and height of the featured image we can se both in the single post page and in the blog itself.

ET_PB_INDEX_BLOG_WIDTH and ET_PB_INDEX_BLOG_HEIGHT

Coming now to our Divi filters ‘et_pb_index_blog_width’ and ‘et_pb_index_blog_height’ what they allow to us to do is nothing else that modify the size of our featured image. Diving into the code we will use something like the following:

function blog_image_size_h($height) { 
return '340'; 
} 
add_filter( 'et_pb_index_blog_image_height', 'blog_image_size_h' );

function blog_image_size_w($width) { 
return '680'; 
} 
add_filter( 'et_pb_index_blog_image_width', 'blog_image_size_w' );

to get our featured image (in posts and pages as well as in the Blog page) sized 680x340px.

Problems with Height?

Note that the ‘et_pb_index_blog_height’ couldn’t work properly because of the css in our ‘style.css’ that sets automatically the ‘height’ property to the value ‘auto’. So in this case you have to override your css or alternatively you should add a little jQuery snippet (see below) in order force the use of ‘height’ attribute.

<script><script>jQuery(document).ready(function() { jQuery(“img”).each(function(e) { var ht = jQuery(this).attr(“height”); ht = ht ? ht+”px” : “auto”; jQuery(this).css(“height”, ht); });});</script>

A NOTE ON BLOG MODULE IMAGES

The filters we talked about are – we repeat it again – for the index.php, page.php and single.php, that is for the blog, the pages and posts. However if you have your blog page builded with a Blog Divi Module these filters don’t work.

In this case we have to use another couple of Divi filters: ‘et_pb_blog_width’ and ‘et_pb_blog_height’, writing a php snippet in our functions.php like this:

function blog_image_size_h($height) { 
return '380'; 
} 
add_filter( 'et_pb_blog_image_height', 'blog_image_size_h' );
function blog_image_size_w($width) { 
return '480'; 
} 
add_filter( 'et_pb_blog_image_width', 'blog_image_size_w' );

FINAL THOUGHTS

So, with very few lines of php in our Divi Child functions.php file we can get the image size we prefer for our featured images in a standard blog, at the top of our posts and pages as well as, with two slightly different Divi filters, in our Divi Blog modules.

You can take a look at the new Divi Developers Documentation in order to find some Divi custom actions and filters. There are certainly many more Divi hooks that those documented that probably will be gradually added.

See you next post!