skip to Main Content

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/

2

Answers


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