First of all, you will need a Divi Child theme installed. If you don't know what it is and need get one, please refer to this article.
After you got a child theme, create a new folder called includes in your child theme folder and copy the includes/builder/module/Image.php file from the parent /Divi/ folder to the includes folder in your child theme you just created.
After that, rename the Image.php file in the child theme to something else, for example custom-image.php
Now add the following changes to the custom-image.php file. Replace this line (at the very beginning):
class ET_Builder_Module_Image extends ET_Builder_Module {
with
class Custom_ET_Builder_Module_Image extends ET_Builder_Module {
Next, remove the following code from the very bottom:
// 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;
}
Now look for this line :
$this->vb_support = 'on';
Replace it with:
$this->vb_support = 'off';
Then, after this line:
$parallax_image_background = $this->get_parallax_image_background();
add:
$src_alt = attachment_url_to_postid( $src );
$alt = get_post_meta( $src_alt, '_wp_attachment_image_alt', true );
Save the changes and open the functions.php file in your child theme folder.
Add this code to the file:
function custom_image_setup() {
get_template_part( 'includes/builder/module/custom-image' );
$custom_image = new Custom_ET_Builder_Module_Image();
remove_shortcode( 'et_pb_image' );
add_shortcode( 'et_pb_image', array( $custom_image, '_render' ) );
}
add_action( 'et_builder_ready', 'custom_image_setup' );
function custom_image_setup_class( $classlist ) {
$classlist['et_pb_image']['classname'] = 'Custom_ET_Builder_Module_Image';
return $classlist;
}
add_filter( 'et_module_classes', 'custom_image_setup_class' );
That's it. Now you can define Alt attribute that you can see in the WordPress media library. Here is a screenshot:
Please note that the Image Module will be customized after the changes and it will be displayed as a gray box under the Divi Builder. On Front End, it should still look fine. You can ignore the warnings:
Now, even if you update the Alt text in the WordPress media library, the module will automatically fetch it:
