In this post, we'll cover how to dynamically sync the alt and title attributes of the Divi Image Module with the information stored in the WordPress Media Library. This enhances accessibility and SEO by ensuring the correct use of image attributes.
While Divi will retrieve the Image Module’s alt text and title fields when the image is first added, it doesn't keep them synchronized with the Media Library as the alt / title text are added or changed. Users have to manually update these attributes, which can be cumbersome.
Furthermore, if you're adding images using dynamic content (e.g. from an ACF field), then the image attributes are not retrieved by Divi at all.
Automatically Sync Divi Image Module Alt and Title Fields with the Media Library using PHP
Here's a PHP solution that ensures the alt and title attributes of images in the Divi Image Module are automatically updated based on the Media Library settings. This code can be added to your child theme's functions.php file or via a plugin like Code Snippets.
add_filter('et_pb_module_shortcode_attributes', 'db_add_image_alt_and_title', 10, 3);
function db_add_image_alt_and_title($attrs, $content, $module_slug) {
if ($module_slug !== 'et_pb_image' || empty($attrs['src'])) {
return $attrs;
}
// Look up the image attachment id
$image_id = attachment_url_to_postid($attrs['src']);
if (!$image_id) {
return $attrs;
}
// Retrieve the alt text
$alt_text = get_post_meta($image_id, '_wp_attachment_image_alt', true);
if (!empty($alt_text)) {
$attrs['alt'] = $alt_text;
}
// Retrieve the title text
$title_text = get_the_title($image_id);
if (!empty($title_text)) {
$attrs['title_text'] = $title_text;
}
return $attrs;
}Related Post: Adding PHP to the Divi Theme
By adding this PHP code, you ensure the alt and title fields of images in the Divi Image Module are dynamically kept in sync with the Media Library, improving accessibility and SEO. This method simplifies the process and maintains consistent image attributes across your WordPress site.
0 Comments