Masonry gallery with Extra Caption below image

Hi Sigmund,

Thanks for contacting us!

Could you please post a screenshot showing the changes you would like to make? You can upload your screenshots on imgur.com and share the links here :)

Best regards,
Yigit

Hi,

– Please refer to this post – https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb and add the code in functions.php file of your child theme
– Copy /enfold/config-templatebuilder/avia-shortcodes/av-masonry-helper.php file to your child theme inside /shortcodes/ folder
– Find following line

$bg = '<div class="av-masonry-outerimage-container">' . $img_before . '<div class="av-masonry-image-container" ' . $img_style . $outer_title . $outer_alt . '>' . $img_html . '</div></div>';

– Change it to following

$bg = '<div class="av-masonry-outerimage-container">' . $img_before . '<div class="av-masonry-image-container" ' . $img_style . $outer_title . $outer_alt . '>' . $img_html . '</div></div><span class="masonry-name-field">'. esc_attr( $alt ) .'</span>';

It would display alt text :)

Best regards,
Yigit

Hi,

I adjusted the code in .av-masonry-helper.php file and then added following code to Quick CSS in Enfold theme options > General Styling

.masonry-name-field {
    display: block;
    position: fixed;
    bottom: 0;
    color: white;
}
.av-fixed-size .av-masonry-outerimage-container {
    bottom: 15px;
}
.av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content { bottom: 14px; }

Please review your website :)

Best regards,
Yigit

Hi,

You are welcome!

Let us know if you have any other questions and enjoy the rest of your day! :)

Best regards,
Yigit