Magazine

Overview

Magazine element makes it easy to display blog posts, portfolio entries, products and also plugin additions, like events… in a magazine layout.  The magazine layout can be customized to display the list of entries and build beautiful magazine style news sites.

Example of Magazine element.

Code Snippets

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_magazine link='category,105' items='5' offset='0' tabs='aviaTBtabs' thumbnails='aviaTBthumbnails' heading_active='aviaTBheading_active' heading='Economy' heading_link='category,1' heading_color='theme-color' heading_custom_color='#ffffff' first_big='aviaTBfirst_big' first_big_pos='left' custom_class='' admin_preview_bg='' av_uid='av-48cict']

Customization

Heading, Title and Content

Magazine Heading: The heading colo can be set in the Magazine element options. To add other advance styling or background color to the Magazine heading please use the below CSS code.

/*----------------------------------------
// CSS -  Magazine Heading
//--------------------------------------*/
#top .av-magazine-top-bar {
    background: #ebebeb;
    padding: 0 10px;
}

Magazine Title: Titles in the magazine layout inherit the styles from the theme options. To custom style the magazine titles please use the below CSS.

/*----------------------------------------
// CSS -  Magazine title
//--------------------------------------*/

#top .av-magazine .av-magazine-title {    
    font-weight: 900!important;
    color: coral;
}

Magazine Content: Magazine content is no different when it comes to inheriting the styles. If you like to custom style the magazine content please use the below CSS.

/*----------------------------------------
// CSS -  Magazine Content
//--------------------------------------*/

#top .av-magazine-content.entry-content {
font-size:12px;
color:#000;
line-height:1.6em;  
padding:0 0 10px 0;
}

Metadata: Metadata also inherits styles from the theme options. To custom style the metadata please use the below CSS.

/*----------------------------------------
// CSS -  Magazine Meta
//--------------------------------------*/

#top .entry-content-header .av-magazine-time {
font-size:9px;
color: #9cc2df;
letter-spacing:.06em; 
font-weight:600;
}

Thumbnail Size

The thumbnail size of the magazine element can be changed using the below CSS.

/*----------------------------------------
// CSS -  Magazine Thumbnail size
//--------------------------------------*/

#top .av-magazine-entry-small .av-magazine-thumbnail {    
    margin: 0 15px 15px 0;
    width: 150px;
    min-height: 100px;
}

#top .av-magazine-entry-small .av-magazine-thumbnail img {
    width: 150px;
    max-height: 100px;
}

/* Thumbnail width in mobile */
@media only screen and (max-width: 768px) {
#top .av-magazine-entry-small .av-magazine-thumbnail {    
    margin: 0 10px 10px 0;
    width: 75px;
    min-height: 50px;
}

#top .av-magazine-entry-small .av-magazine-thumbnail img {
    width: 75px;
    max-height: 50px;
}
}

However, depending on the size you choose the thumbnail may not fill in the whole thumbnail area or may the image looks blurry. To fix this issue please perform the steps:

  • Login to FTP.
  • Look for the magazine.php file in /wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/magazine.php
  • Open the file in a file editor, press Ctrl + F and search for “image_size” till you find the below line:
'image_size'     => array( 'small'=> 'thumbnail', 'big' => 'magazine')
  • Change it to:
'image_size'     => array( 'small'=> 'medium', 'big' => 'magazine')

After the file is updated, clear the cache and refresh the page to view changes.

Magazine elements in RTL

Using CSS we can interchange the magazine element Columns, Headings and Thumbnails and display this element as part of a layout design or to display in a RTL version.

/*----------------------------------------
// CSS -  Magazine RTL
//--------------------------------------*/

/* Columns */
.av-magazine-sideshow.flex_column.av_one_half {
        border-right-width: 1px;
        border-right-style: solid;
        border-left-width: 0;
        margin-left: 0
}
/* Hero Image */
#top .av-magazine-hero {
        float: right;     
}
/* Small Thumbnails*/
.av-magazine-thumbnail {
        float: right;
        margin-left: 15px;
}
/* Heading */
.av-magazine-top-heading {
        float: right;
}
/* Sort filter */
.av-magazine-sort {
  float:left;
}

Open magazine elements in new window

To open the magazine element links in a new tab please add the below code in the child theme  functions.php

//------------------------------
// php -  open Magazine link in new tab
//------------------------------

function mag_new_tab(){
?>
<script>
jQuery(window).on('load', function(){
jQuery('.av-magazine-title a ').attr('target','_blank');
});
</script>
<?php
}
add_action('wp_footer', 'mag_new_tab');

How to change the default thumbnail image

To change the default image of the magazine element thumbnail please use the below CSS.

/*----------------------------------------
// CSS -  Magazine Default Thumbnail
//--------------------------------------*/

/* 

For this code to work please enter your default image URL in the background rule.

*/

.av-magazine-thumbnail a {
z-index: 1;
}
.av-magazine-thumbnail a:before {
content: ”;
background: #000 url(ENTER IMAGE URL HERE) no-repeat center center;
position: absolute;
top: 0;
left: 0;
right:0;
bottom:0;
background-size:cover;
}
/* Hero image min height*/
.av-magazine-hero .av-magazine-thumbnail {
  min-height:200px;
}

Resource

Contributed video:

Magazine Element Tutorial