Masonry

Overview

Masonry element is used to display blog posts, portfolio items and tags in different grid styles. The items displayed are sortable based on the categories or tags.

Example of Masonry element.

Masonry Settings

Some of the masonry options that can be played with to change the look and feel of the element are:

  • Entry type (Post, Portfolio or tags)
  • Sortable options
  • Columns
  • Pagination
  • Display order
  • Size Settings
  • Image overlay effect
  • Caption
  • Color
  • Background Color

Customization

How to use the snippets?

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.

Title and Background

The title and the background color are inherited by the options set up in the theme options. To add custom style please use the CSS below.

NOTE: The “Image overlay effect” should be active in the masonry settings for the code below to work.

/*----------------------------------------
// CSS - Masonry overlay animation 1
//--------------------------------------*/
/* Title */
#top #main .av-masonry-entry .av-masonry-entry-title.entry-title  {		
	color: #242424; /* Apply the !important rule if the titles color do not change*/
	font-weight:800;
}
/* Title Background */
#top .av-masonry-entry.isotope-item figcaption,
#top .av-masonry-entry.isotope-item .avia-arrow {
/*	background: #dbebfa; */
	background: #6a67ce;
}
/* Masonry Content */
#top .av-masonry-entry.isotope-item .entry-content {
	color: #FFF;
	font-size:13px;
}
/* Hide date */
#top span.av-masonry-date { display: none; }

Overlay Styles

The masonry overlay can be styled in a few different ways, let’s go over a few examples.
NOTE: Masonry caption should be on for this code to work.

Masonry overlay animation 1

/*----------------------------------------
// CSS - Masonry overlay animation 1
//--------------------------------------*/

/* Title and caption area */
#top .av-inner-masonry-content {
	background:rgba(15, 0, 56, 0.59)!important;
	height:100%
	} 
/* Title text */
#top .av-masonry .entry-title {
    background: gold;
	display:inline-block;
    padding: 0 5px;
	position: absolute!important;
    top: -100%;
	transition:all .35s cubic-bezier(0.63, 0.7, 0.55, 1.03);
	font-size:22px;
	letter-spacing: .05em;
	text-transform:uppercase;
}
/* Title text on hover*/
#top .av-inner-masonry-content:hover .entry-title{
	transition:all .5s ease;
	top: 20px!important;
}
/* Disable the overlay on hover*/
#top .av-inner-masonry-content:hover{	background:transparent!important; }
/* Hide caption arrow */
#top .avia-arrow {	background: transparent; }
/* Hide date */
#top span.av-masonry-date { display: none; }

Masonry overlay animation 2

The masonry titles and excerpts can be styled to slide up using the following CSS code:

NOTE: The below options in the settings should be selected for the code to function as seen in the example.

Image overlay effect > Overlay Active
Element Captions > Element Title and Excerpt > Display Title and Excerpts
Element Captions > Element Title and Excerpt Styling > Default display (At the bottom of the element’s image)
Element Captions > Element Title and Excerpt display settings > Display on mouse hover

/*----------------------------------------
// CSS - Masonry overlay animation 2
//--------------------------------------*/
/* Remove rotate animation */
#top .av-inner-masonry-content {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

/* Masonry Overlay*/
#top .av-inner-masonry:before {
  content:'';
  position:absolute;
  background: rgba(0,0,0,.0)!important;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
}
#top .av-inner-masonry:hover:before {
  background: rgba(0,0,0,0.69)!important;
  transition:all .5s cubic-bezier(0.63, 0.7, 0.55, 1.03);
}


/* Masonrt Title and Content position */
#top .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content { 
    bottom: calc(-100% + 151px)!important;
}
#top .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry:hover .av-inner-masonry-content { bottom: 0%!important; }

Align Title and Excerpt

/*----------------------------------------
// CSS - Masonry title Alignment
//--------------------------------------*/
/* Title */
#top .av-masonry-entry-title {		
	color: #FFF;
	font-weight:800;
	text-align: right;
}
/* Title Background */
#top .av-masonry-entry.isotope-item figcaption,
#top .av-masonry-entry.isotope-item .avia-arrow {
	background: #008374;
}
/* Masonry Content */
#top .av-masonry-entry.isotope-item .entry-content {
	color: #FFF;
	font-size:13px;
	text-align: right;
}
/* Hide date */
#top span.av-masonry-date { display: none; }

Styling Sort filter

Let’s take a look at styling the sort filter:

/*----------------------------------------
// CSS - Masonry Sotr filter
//--------------------------------------*/

/* Active sort filter */
#top .av-masonry .active_sort {
    background: #000;
    color: #FFF;
    padding: 0 10px;
}
/* Sort filter  */
#top .av-masonry .av-sort-by-term {
    width: 100%;
    display: table;
    table-layout: fixed;
}
#top .av-masonry .av-sort-by-term a {
    display: table-cell;
    padding: 20px 5px;
}
/* Hide Separator */
#top .av-masonry span.text-sep {
    display: none;
}

Styling Pagination

Add custom style to masonry pagination:

Pagination style is inherited by the color scheme selected in the theme options. To add custom style to pagination:

/*----------------------------------------
// CSS - Masonry Pagination
//--------------------------------------*/

/* Pagination meta */
#top .av-masonry .pagination .pagination-meta { 
	background: #dbebfa;
	border-radius: 2px;
	color: #1793d1;
}
/* Active Link */
#top .av-masonry .pagination .inactive {
	background: #333333;
	color: #FFF;
}
/* Inactive Link */
#top .av-masonry .pagination .current { 
	background: #1793d1;
	color: #222;
}

Hide Date

To hide the date on the masonry element:

/* Hide date */
#top span.av-masonry-date { 
display: none; 
}

Disable Masonry loading Animation

To disable the masonry loading or the fly-in animation, please use the CSS code:

/*----------------------------------------
// CSS - Disable Masonry Animation
//--------------------------------------*/
.av-masonry-entry {
    visibility: visible;
    opacity: 1;
}
.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
    -webkit-animation: none;
    animation: none;
}

Replace the word ALL in masonry filter

To replace the word “ALL” in masonry filter update the “ALL TEXT” in the below code and add it to functions.php

/**
 * Use the "avf_masonry_sort_first_label" filter changes the first label (All) in Masonry element
 *
 **/
 
add_filter('avf_masonry_sort_first_label','new_masonry_first_label');
function new_masonry_first_label() {
$first_item_name = "NEW ALL TEXT ";
return $first_item_name;
}

Change the sort order of Masonry Elements

The default order of the masonry items is by creation date. What if you want to change it? It’s easy. Use this filter on functions.php:

 add_filter('avia_masonry_entries_query', 'avia_masonry_custom_query');

function avia_masonry_custom_query( $query ) {
$query['orderby'] = 'date';
$query['order'] = 'DESC';
return $query;
} 

You can see all of the Order and Orderby parameters for additional options here: http://codex.wordpress.org/Class_Reference/WP_Query#Order_.26_Orderby_Parameters

For example, to reverse the above it would be:

 add_filter('avia_masonry_entries_query', 'avia_masonry_custom_query');

function avia_masonry_custom_query( $query ) {
$query['orderby'] = 'date';
$query['order'] = 'ASC';
return $query;
} 

Or to just sort the visible items randomly on page load:

 add_filter('avia_masonry_entries_query', 'avia_masonry_custom_query');

function avia_masonry_custom_query( $query ) {
$query['orderby'] = 'rand';
return $query;
} 

Aside from adding these filters, you can also activate the order/orderby option on the masonry element options panel:
https://www.kriesi.at/documentation/enfold/how-to-add-an-orderorderby-option-to-the-blogpost-sliderportfoliomasonry-grid-element/

Add custom link or lightbox to masonry element

A portfolio item can be linked to an external web page or any other page within your domain. The page content of the link to open can be an image, slider or any external link.

To open a link in a lightbox when a portfolio item is clicked, set up your portfolio items as usual and add the lightbox link in the portfolio item page under Additional Portfolio Settings.

Note: The link we added to Additional Portfolio Settings has ?iframe=true to the end. This will trigger the iframe.

Example: If your link is http://kriesi.at to open it in a lightbox it should be http://kriesi.at?iframe=true

Code snippet

How to use the snippets?

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_entries link='category,149' wc_prod_visible='' prod_order_by='' prod_order='' sort='no' items='2' columns='2' paginate='none' query_orderby='rand' query_order='DESC' size='flex' orientation='' gap='large' overlay_fx='active' id='' caption_elements='title' caption_styling='' caption_display='always' color='custom' custom_bg='' av-medium-columns='' av-small-columns='' av-mini-columns='' custom_class='maso-title' av_uid='av-w35vf'] 

Resource

Contributed video:

Masonry Element Tutorial