Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1401904

    Hi in Masonry gallery I have the caption set to Title. When I change the caption below the image in the Edit gallery part it doesn’t change on the site. I need this functionality for the client to retitle images in the same place she moves or adds them.
    Thanks
    Rob

    #1402129

    Hey fanlokbun,
    Thanks for your patience, the excerpt shows the gallery captions so if you want to display a title and a caption choose Display Title and Excerpt, if you only want to display the caption choose Display Excerpt
    If you want to change the title of the image then click the image and change the title in the side panel:
    Enfold_Support_704.jpeg
    but this will change the title in the media library and thus the same image across your site.

    Best regards,
    Mike

    #1402145

    Thanks Mike. My bad! When I choose Excerpt it showed a blank box on the gallery. It turns out the font colour was the same as the background in my quick CSS. Sorry

    #1402147

    I just noticed. Below the picture in Lightbox it shows the title not excerpt. Can I change this?

    #1402208

    Hi,
    Try adding the custom class replace-title-with-caption to your masonry gallery element:
    Enfold_Support_706.jpeg
    then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function replace_masonry_gallery_lightbox_title_with_gallery_caption() { ?>
      <script>
    window.addEventListener('DOMContentLoaded', function() {
    (function($){
    $(window).load(function(){  
        $('.av-masonry-gallery.replace-title-with-caption a.av-masonry-entry.lightbox-added').magnificPopup({
        type: 'image',
    		image: {
            titleSrc: false,
            markup: '<div class="mfp-figure">'+
                      '<div class="mfp-close"></div>'+
                      '<div class="mfp-top-bar"></div>'+
                      '<div class="mfp-img"></div>'+
                      '<div class="mfp-bottom-bar">'+
                        '<div class="mfp-title"></div>'+
                        '<div class="mfp-counter"></div>'+
                      '</div>'+
                    '</div>',
        },
        mainClass:          'avia-popup mfp-zoom-in mfp-image-loaded',
        closeOnContentClick:  false,
        midClick:         true,
    
        gallery: {
          enabled:      true
        },
    
        callbacks: {
    		markupParse: function (template, values, item) {
    			values.title = item.el.closest('.av-masonry-entry').find('.av-masonry-entry-content').text();
    		},
            change: function() {
                $(this.content)
                    .find('.mfp-top-bar')
                    .html(
                        '<h2>' +
                            $(this.currItem.el).attr('title') +
                        '</h2>'
                    );
            },
        },
      }); 
      $(document).on('click', '.popup-modal-dismiss', function (e) { 
        $.magnificPopup.close();
      });
    });
    })(jQuery);
    });
    </script>
      <?php
    }
    add_action('wp_footer', 'replace_masonry_gallery_lightbox_title_with_gallery_caption');

    The expected result:
    Enfold_Support_709.jpeg
    This code is based on some shared by Guenni007, thanks Guenni007.

    Best regards,
    Mike

    #1402282

    Perfect thanks Mike

    #1402338

    Hi fanlokbun,

    I’m glad that Mike could help you :)
    Please let us know if you still need further assistance or if we can close this thread.

    Best regards,
    Nikko

    #1402386

    Yes please close the thread Nikko. Thanks!

    #1402396

    Hi fanlokbun,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great weekend!

    Best regards,
    Nikko

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Masonry Gallery Caption change in gallery’ is closed to new replies.