Optimizing images with relevant alt text is crucial for enhancing accessibility and improving your site's SEO. However, managing alt text across various modules can be challenging.
In this article, we will guide you through the process of replacing the default alt text in the Divi Image Module with the alt text set in WordPress.
This ensures consistency and accuracy across your website, leveraging the alt text you’ve already specified in your Media Library.
Go to WordPress Dashboard → Media → Libary
Select the image you want to use in a Divi Image module
With each Image uploaded to your WordPress website, ensure that the Alt Text is being set. Use descriptive text for what the image represents
Best practices also require setting the Title, Caption, and Description text
Return to your page and add the image in question using the Image module
Note: The Image module will automatically use the Image's Alt Text and Title text. You can check them by opening the Image module settings → Advanced Tab → Attributes
Important Note: If the Alt or Title text for an image used inside an Image module is changed in the WordPress Media Library after being used inside an Image module, the new Alt or Title text will not be reflected in the Image module.
Customize the Image module to automatically update its Alt and Title attributes using a child theme
Install and activate a Child theme for Divi
Use an FTP connection, the hosting File Manager app, or the Advanced File Manager plugin
Copy the Image.php file located in wp-content/themes/Divi/includes/builder/module to wp-content/themes/child theme folder/includes/ folder
Go to WordPress Dashboard → Appearance → Theme File Editor
Open the Image.php file from the Child theme folder
Change this line of code:
class ET_Builder_Module_Image extends ET_Builder_Module {With:
class Custom_ET_Builder_Module_Image extends ET_Builder_Module {Change this line of code:
$this->vb_support = 'on';
With:
$this->vb_support = 'off';
Scroll to the bottom of the file and remove this PHP code:
// This adds the upload label for Image module
// TODO: Remove when BB is removed.
function _et_bb_module_image_add_src_label( $filed ) {
if ( ! isset( $filed['label'] ) ) {
$filed['label'] = esc_html__( 'Image URL', 'et_builder' );
}
return $filed;
}Remove this PHP code as well:
if ( et_builder_should_load_all_module_data() ) {
new ET_Builder_Module_Image();
}Find this line of code:
$parallax_image_background = $this->get_parallax_image_background();
Add the following lines right after it:
$src_alt = attachment_url_to_postid( $src );
$alt = get_post_meta( $src_alt, '_wp_attachment_image_alt', true );
$title_text = get_the_title($src_alt);Save your changes.
With the above changes, you can easily update the image Alt and Title text directly from the WordPress Dashboard → Media → Library.
Important Note: Since the Image module has been loaded from a Child Theme folder, you will lose the Preview inside the Visual Builder. Instead of the expected Image module preview, a grey box will be displayed:
However, all the Image module settings will still work as expected.