Skip to main content
All CollectionsTroubleshooting and FAQsFrequently Asked QuestionsGeneral
Replacing Default Alt Attribute In Image Module With WordPress Alt
Replacing Default Alt Attribute In Image Module With WordPress Alt

By default it's not possible to use the built-in WordPress image attributes for the Image module, like Alt. Here is a workaround.

Updated over a week ago

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:

Did this answer your question?