Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1108999

    Hi guys,
    For a client, I need to edit the magnific pop up so that it will show the image ‘caption’ as saved in the WP Media) in addition to the title. I have researched it at length and not found something that works, at least now in 2019. I know that in the new Enfold there is avia-snippet-lightbox.js and in there you grab the ‘title’ attribute. However, I can’t get the Alt Text, nor the Caption nor anything else like it, because I think that stuff is just not being written to the page at all. Here is the inspected Masonry Gallery:, there is only the Title being written, nowhere is there any alt text or caption (this image has both specified in the WP Media). I experimented with various things in the JS file, and was able to get the ID since I knew at least that was being written out.

    For the life of me I can’t find the HTML output for the masonry gallery on the page. I scoured all the files I thought it would be. My plan is to adjust the HTML output to include the Alt, Caption and maybe even Description attributes so they are available to that JS file.



    Hey mickfollari,

    You might want to look in this folder for the html

    If you need further assistance please let us know.
    Best regards,


    Hi Victoria,
    I’ve looked there, and did so again, but I don’t see anything in that file that produces the final front-end code of a masonry gallery. That file seems to only create the back-end ALB element and the pop up that happens when you click to edit it.

    It seems to me that there needs to be the caption attribute on the page when seeing the thumbnails of the masonry gallery in order for the magnific popup to be able to show the caption. Whenever I add code to look for the caption or alt text, I get “undefined” because I think it is just not on the page to find. So my thought is to edit the HTML output of the masonry gallery to include those things. BTW don’t you think it’d be good for the masonry gallery to have Alt text on the page anyway, for SEO and readers? Just a thought…



    Thank you for the update.

    What are you going to do with the attributes once they are included in the markup? The masonry loop is done in the aviashortcodes > av-helper-masonry.php file. Look for the “html” function or method around line 306. The actual image markup is located around line 380:

    						if($size == 'flex')  
    							$img_html  = '<img src="'.$attachment[0].'" title="'.$title.'" alt="'.$alt.'" />';
    							$outer_title = '';
    						if($size == 'fixed') $img_style = 'style="background-image: url('.$attachment[0].');"';
    						$class_string .= " av-masonry-item-with-image";
    						$outer_title = '';
    						$over_html  = '<img src="'.$attachment_overlay[0].'" title="'.$title.'" alt="'.$alt.'" />';
    						$over_style = 'style="background-image: url('.$attachment_overlay[0].');"';
    						$img_before = '
    <div class="av-masonry-image-container av-masonry-overlay" '.$over_style.'>'.$over_html.'</div>

    Best regards,


    You got me in the right direction, and I solved the issue, though not exactly where you were thinking. My goal was to get the caption on the page so that when clicked for the magnific popup, it could write that out alongside the title.

    In that file aviashortcodes > av-helper-masonry.php, at line 411 you build the < a > tag, and in there you have a title attribute that is then called up in the avia-snippet-lightbox.js file. I added some code to get the caption, then insert it as a data attribute within that same < a > tag, so that I could get it in the js file and show it in the magnific popup. I might write up a quick blog post about it, I think there have been people looking for this over the years. I now just need to figure out where to put these files in my Child theme and I’ll be all done.

    In the av-helper-masonry.php file I added this around line 410, just before the important line :
    //get the caption
    $image = get_post($thumb_ID);
    $image_caption = $image->post_excerpt;

    then at what used to be line 411, after the {markup} within that < a > tag I add this: data-caption=’$image_caption’
    So that that line now looks like this:
    $items .= “<{$html_tags[0]} id=’av-masonry-“.self::$element.”-item-“.$entry[‘ID’].”‘ data-av-masonry-item='”.$entry[‘ID’].”‘ class='{$class_string}’ {$linktitle} {$markup} data-caption=’$image_caption’>”;

    Then in the ava-snippet-lighbox.js, I changed line 45 to call that data attribute and add it to the title:
    var title = item.el.attr(‘title’) + ‘ | ‘ +‘caption’);

    Hope this helps someone else. Thanks again, Ismael!


    • This reply was modified 4 years, 11 months ago by mickfollari.

    Hi Mick,

    Glad you got it working for you and thank you for sharing! :)

    If you need further assistance please let us know.

    Best regards,


    For anyone trying this at home, as it were, I’ll just finish up by mentioning that to make all this work in a Child Theme, this is what I did:
    In my child theme I have a js folder where I added a copy of avia-snippet-lightbox.js and made the changes. I also created a ‘shortcodes’ folder and added a copy of the helper-masonry file where I made those changes.

    In my Child Theme functions.php I added this:
    // Register and enqueue scripts
    function my_custom_scripts() {
    wp_dequeue_script( ‘avia-lightbox-activation’ );
    wp_enqueue_script(‘avia-lightbox-new’, get_stylesheet_directory_uri() . ‘/js/avia-snippet-lightbox.js’, array(‘avia-default’));
    add_action( ‘wp_enqueue_scripts’, ‘my_custom_scripts’ );

    //load override of helper-masonry
    add_filter(‘avia_load_shortcodes’, ‘avia_include_shortcode_template’, 15, 1);
    function avia_include_shortcode_template($paths)
    $template_url = get_stylesheet_directory();
    array_unshift($paths, $template_url.’/shortcodes/’);
    return $paths;

    Thanks again!



    Thanks for sharing the update and solution for everyone!

    Best regards,
    Jordan Shannon

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Location of masonry gallery html construction…’ is closed to new replies.