Question posted in
The full documentation can be found here.

Divi theme – Divi image gallery: display title on hover

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/

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search