Masonry Gallery

Overview

Similar to the default Masonry Element in design and options. The big difference is that this Gallery it is not meant to display WordPress entries but images. The element can be displayed fullwidth (see Portfolio Masonry examples) or adapt to the content size.

View example Masonry Gallery element.

Code Snippet

How to use the snippets?

Add the CSS Snippets to Enfold child theme styles.
Add the JS and PHP scripts to your child theme functions.php file.
Shortcodes can be used in a text area in pages, posts, sliders and widget areas. Enable debug mode to view the page shortcode.
Enable custom CSS class name support to add your class names to the theme elements.
Disable script merging and clear the cache to view the changes on the frontend.

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

[av_masonry_gallery ids='' items='24' columns='flexible' paginate='yes' size='flex' orientation='' gap='large' overlay_fx='1px' container_links='active' id='' caption_elements='title excerpt' caption_styling='always' caption_display='always' color='' custom_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-columns='' av-small-columns='' av-mini-columns='' av_uid='av-2r87sv'][/av_masonry_gallery]

Customization

Caption style

Caption font: Caption font size can be set in the element options however if you choose to add custom style please use the CSS below.

/* caption font */
#top .av-masonry h3.av-masonry-entry-title.entry-title {
	font-size: 12px;
	font-family: 'Encode Sans Expanded', sans-serif;		
	color:#ff0092;
}

Caption background To add custom color to the caption area please use the below CSS.

/* Background color */
#top .av-masonry figcaption.av-inner-masonry-content,
#top .av-masonry .av-inner-masonry-content .avia-arrow {
    background: #caccd1!important;
}

Remove default overlay

To remove the default overlay of the image please use the CSS below.

/* Remove overlay */
#top .av-hover-overlay-active .av-masonry-image-container {
    opacity: 1!important;
}

Masonry gallery pagination

To add custom style to the masonry gallery pagination please use the CSS below.

/*----------------------------------------
// CSS - Masonry Gallery pagination
//--------------------------------------*/

/* Pagination */
.av-masonry-pagination, 
.av-masonry-pagination:hover {
	background-color: #ffc845!important;
}

/* active pagination */
#top .av-masonry .pagination .current {
	background: #334858;
	color:#fff;
}

/* inactive pagination */
#top .av-masonry .pagination a.inactive {
	background: #222222;
	color:#fff;
}

Open gallery image links in new window

By default, the links assigned to the gallery image will open in the same window. If you wish to open the links in a new window please use the below function.

Code snippets:

function

//---------------------------
// Open masonry gallery links in new window
//---------------------------
function add_custom_target(){
?>
<script>
jQuery(window).on('load', function(){
jQuery('.av-masonry-container a ').attr('target','_blank');
});
</script>
<!--?php<br /--> }
add_action('wp_footer', 'add_custom_target');

Resource

Contributed video:

Masonry Gallery Element Tutorial