Divi plugin: fetch images “alt text” from media library

11 May 2018

Hi all,

You may be aware that since Divi 3.1, several WordPress hooks have been introduced into the Divi source code. But there’s more: module management has been redesigned as well. And that’s good news for developpers or power users, for it’s way easier now to make changes in modules.

Hence the update of my free Divi plugin, Divi Alt Text, in charge of automatically fetching images alt texts from WordPress media library for every image related module except Gallery: Image, Fullwidth Image, Blurb, Fullwidth Header, Slider and Fullwidth Slider.

Divi Alt Text redesigned

You will find here the new code for Divi Alt Text, based on the new Divi code, which is much cleaner than before. The plugin is now way smaller, thanks to the use of a well designed WordPress hook in the modules code.

Note : I removed the Gallery module from the plugin because I couldn’t find a clean solution to make it work (the only way I found to get the alt text from the library was to overide the whole module’s HTML rendering function, which is too long). Besides, the module gets the image title from the media library to set the alt text, so it’s not empty like the other modules.

Getting image alt text from the media library

I still use the same technics to get the alt text from the image URL:

/* Fetch image alt text from media library */
function get_image_alt_text($image_url) {

  if ( ! $image_url )
    return '';
 
  if ( '/' === $image_url[0] )
    $post_id = attachment_url_to_postid(home_url() . $image_url);
  else
    $post_id = attachment_url_to_postid($image_url);
 
  $alt_text = get_post_meta($post_id, '_wp_attachment_image_alt', true);
  if ( '' === $alt_text )
    $alt_text = get_the_title($post_id);
 
  return $alt_text;

}

The principle is simple: We first get the image’s post ID from its URL, then we get the alt text from the post meta, or the image title if the alt text is not set (which is bad!).

Since last version, I added the use of relative path in image URL, starting with ‘/’ and not ‘http…’, because every single URL should be relative in WordPress.

Modules update: the filter hook

With the arrival of Divi 3.1, I started digging into the modules source files to see if and how it was improved. Great surprise, a lot of code has been factorized and simplified. And even better, there are several WordPress hooks that can be used to dynamically inject PHP! Actually Divi was already using hooks before v3.1, but at the time, I was not looking for them.

And what is really interesting for us now, is the ability to filter the module’s properties before sending them to the HTML render function. No need to overide the whole rendering process anymore!

To do that, we just need to add a filter function to the et_pb_module_shortcode_attributes hook. The module properties are passed as a parameter of the function, and the function returns the updated parameters.

And of course, like before, if the alt text is set in the module properties, we just keep it and don’t fetch the one from the library.

So here is the filter code, which updates the module properties with the media library alt text:

/* Update image alt text in module properties */
function update_module_alt_text( $attrs, $unprocessed_attrs, $slug ) {

  if ( ( $slug === 'et_pb_image' || $slug === 'et_pb_fullwidth_image' ) && '' === $attrs['alt'] )
    $attrs['alt'] = get_image_alt_text($attrs['src']);
  elseif ( $slug === 'et_pb_blurb' && 'off' === $attrs['use_icon'] && '' === $attrs['alt'] )
    $attrs['alt'] = get_image_alt_text($attrs['image']);
  elseif ( $slug === 'et_pb_slide' && '' !== $attrs['image'] && '' === $attrs['image_alt'] )
    $attrs['image_alt'] = get_image_alt_text($attrs['image']);
  elseif ( $slug === 'et_pb_fullwidth_header' ) {
    if ( '' !== $attrs['logo_image_url'] && '' === $attrs['logo_alt_text'] )
      $attrs['logo_alt_text'] = get_image_alt_text($attrs['logo_image_url']);
    if ( '' !== $attrs['header_image_url'] && '' === $attrs['image_alt_text'] )
      $attrs['image_alt_text'] = get_image_alt_text($attrs['header_image_url']);
  }
 
  return $attrs;
}
/* Filter injection */
add_filter( 'et_pb_module_shortcode_attributes', 'update_module_alt_text', 20, 3 );

Installation : Plugin or child theme

 

Download Divi Alt Text 4.0 (From Divi 3.1)

 

If you’re already using a child theme on your website, you may not need to install the plugin. Just copy/paste the two bits of code above to your child theme’s functions.php file.

Else just download the plugin and upload it to your site:

Bouton d'ajout d'extension WordPress

For your curiosity or if you haven’t upgraded to Divi 3.1 yet (bad), here is the (much bigger and dirtier) previous version:

 

Download Divi Alt Text 3.0 (Before Divi 3.1)