We are hiring Developers at Junior and Mid level

Divi alt tags done right (in functions.php)

by Sam Collett
DIVI for Wordpress. Load Alt tags in Divi directly from the Media Library, pull alt tags in automatically even when these are added or changed from the Wordpress Media Library.
Jan 10, 2022

Alt Tags in Divi have always been a problem.

Read down to the solution which takes the LATEST image alt tag from the library on every page load, and generates an alt tag if none is available. If an alt tag exists in the advanced tag then this will not be overwritten.

The problem with alt tags in Divi:

When you add an image to Divi, via the builder as an image module or for example as a gallery, it will pick up the alt tag from that image from media library. BUT if you dont have the alt tag set then nothing is saved.

Moreover if you add alt tags to the images in the media library, this change DOES NOT get pulled through. Your alternative for every page is either re-add those images to each page or to add alt tags manually.

The best solutions is, of course, to add Alt tags at the point of uploading them. Divi picks these up when images are added to the page. Oddly this is a fairly recent addition [See a previous paid plugin from Divi Examples]. BUT when you have clients adding content OR when you have inherited a site with 1000s of images, none of which have alt tags, this is a problem. There are plugins that allow bulk changing of alt tags in the media library. But with Divi these changes do not get picked up.

As we say, Divi allows you to add alt tags for images (in the advanced tab on the module), but this has to be done on EVERY page, meaning you will forget some and you ideally want every image to have a canonical alt tag.

The Solution

The solution is to fall back on the alt tag as held in each image in the media library. If this changes then this change also comes through to all the pages where this image lives. It is much easier to bulk edit in the media library, either with the built in WordPress interface, or with a plugin.

What it does:

  • Automatically sets the image title & alt-text upon upload.
  • Retrieves the alt-text from WP media library
  • Updates image alt-text in module properties (Image, Slider, Blurb modules)

The code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* Automatically set the image Title & Alt-Text upon upload*/
add_action( 'add_attachment', 'my_set_image_meta_upon_image_upload' );
function my_set_image_meta_upon_image_upload( $post_ID ) {
    // Check if uploaded file is an image, else do nothing
    if ( wp_attachment_is_image( $post_ID ) ) {
        $my_image_title = get_post( $post_ID )->post_title;
        // Sanitize the title:  remove hyphens, underscores & extra spaces:
        $my_image_title = preg_replace( '%\s*[-_\s]+\s*%', ' ',  $my_image_title );
        // Sanitize the title:  capitalize first letter of every word (other letters lower case):
        $my_image_title = ucwords( strtolower( $my_image_title ) );
        // Create an array with the image meta (Title, Caption, Description) to be updated
        $my_image_meta = array(
            'ID'        => $post_ID,            // Specify the image (ID) to be updated
            'post_title'    => $my_image_title,     // Set image Title to sanitized title
        );
        // Set the image Alt-Text
        update_post_meta( $post_ID, '_wp_attachment_image_alt', $my_image_title );
        // Set the image meta (e.g. Title, Excerpt, Content)
        wp_update_post( $my_image_meta );
    }
}
/* 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;
}
/* 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;
}
add_filter( 'et_pb_module_shortcode_attributes', 'update_module_alt_text', 20, 3 );

You should have a child theme running. For more information on this see the Ultimate Guide to Creating a Divi Child Theme.

 

Divi alt tags done right (in functions.php)

Add ALT Tags in Divi websites

Once this is in place there are several methods to editing ALT tags in Divi websites:

  1. Edit in the Divi Page Editor
  2. Change and add alt tags in the WordPress Media library
  3. Let the site create an alt tag for you

Obviously the latter is the worst option. We think number two is the most sensible

How to edit images in the WordPress Media Library?

Step One:
Find the media library from the top left of the dashboard.

Divi alt tags done right (in functions.php)

Step Two:
Select and image and fill in the alt tag as best you can. Note most images don’t need Titles and Captions. Descriptions are a good idea for SEO.

Divi alt tags done right (in functions.php)

A call to arms

Now we do hope that the wonderful folks at Elegant Themes fix or add this or something similar. Seems to us a really basic omission from an otherwise amazing piece of kit. In which case this should be seen as a temporary solution. We didn’t go down the plugin route – for us pasting into functions.php file on a child theme is simpler and more elegant.

Credits and shout outs

This code comes on the back of giants, and builds especially from Intercom Help and other solutions that get part of the way.

https://intercom.help/elegantthemes/en/articles/2917388-replacing-default-alt-attribute-in-image-module-with-wordpress-alt

https://brutalbusiness.com/automatically-set-the-wordpress-image-title-alt-text-other-meta/

https://digital.insightdesign.com.au/blog/2019/11/18/how-to-make-divi-use-alt-tags-on-images/

 

About Practically.io

We are web specialists based in cheltenham, UK. We are huge users of the Divi theme and we use it for most of our more normal websites. For the more complicated applications we do not use WordPress, but instead use any number of bespoke systems, from React.js, to Yii, to our own frameworks. As such we are continually seeking the best ways to use Divi and WordPress, including some highly advanced SEO and speed tricks.

If you would like help with your business or website, especially if you are using Divi, please do get in touch, or book yourself a free consultation.