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
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
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: