Location of masonry gallery html construction…

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…

Ismael-
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’) + ‘ | ‘ + item.el.data(‘caption’);

Hope this helps someone else. Thanks again, Ismael!

Mick

• This reply was modified 5 years, 1 month ago by mickfollari.

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!