Divi image gallery: display title on hover

Question

I have a photography website that I am building using Wordpress Divi theme. Using the Gallery Module I have built a few photo theme pages.

Currently when you mouse over an image thumbnail in a gallery it overlays an opaque colour and an icon. I would like to replace this icon with the image title as it is set in the Wordpress Media Gallery (mfr-title, I think).

Note: when you click on an image in the gallery, it opens a lightbox with the image title down the bottom left hand corner - so the title is html readable, somewhere.

I have scanned all the articles on stack and this question is similar, but for the Divi Portfolio module not Gallery module, and I can't quite figure out how to adapt the solution to suit.

Any help here would be really appreciated.

Link to my website gallery: http://27.54.88.129/~mattsh39/between-worlds/

Answer 1

I have fixed this issue by Customising the code , Go to theme folder > includes > builder > main-modules.php
Line Number : 846-857

$image_output = sprintf(
                '<a href="%1$s" title="%2$s">
                    <img src="%3$s" alt="%2$s" />
                    <span class="et_overlay%4$s"%5$s></span>
                </a>',
                esc_url( $attachment->image_src_full[0] ),
                esc_attr( $attachment->post_title ),
                esc_url( $attachment->image_src_thumb[0] ),
                ( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
                $data_icon
            );

Replace the above code by given below

$image_output = sprintf(
                '<a href="%1$s" title="%2$s">
                    <img src="%3$s" alt="%2$s" />
                    <div class="et_overlay%4$s"%5$s><span>%6$s</span></div>
                </a>',
                esc_url( $attachment->image_src_full[0] ),
                esc_attr( $attachment->post_title ),
                esc_url( $attachment->image_src_thumb[0] ),
                ( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
                $data_icon,wptexturize($attachment->post_title)
            );

Add this css code to your custom css option :

div.et_overlay span {
text-align: center;
display: block;
position: absolute;
top: 50%;
width: 100%;
}

The title would come on the hover . You find issue of title come under the image as well and icon is coming as well . For that you can add a custom class in the module and handle it by css coding Example :

.my_gallery h3.et_pb_gallery_title{
display:none;
}

Answer 2

First you create a child theme properly Inside the child theme create Include folder Inside Include folder create Builder folder Now copy the main-modules.php file inside Builder folder .

Now add this code to Child theme functions.php so that it override the parent theme main-modules.php .

if ( ! function_exists( 'et_builder_add_main_elements' ) ) :
function et_builder_add_main_elements() {
require ET_BUILDER_DIR . 'main-structure-elements.php';
include ( get_stylesheet_directory() . '/includes/builder/main-modules.php');
do_action('et_builder_ready');
}
endif;