Portfolio Grid

Overview

This element allows you to display a grid with portfolio items, that can link to the full portfolio entry, just a single image or open a ajaxed preview version of the entry. Please see all options at the portfolio main menu where we show different ways to show your work in a beautiful way.

Example portfolio entries.

Portfolio Grid Settings

Select Portfolio categories
Columns
Post Number
Excerpt
Portfolio Grid Image Size
Link Handling
Sortable?
Pagination
Order by (Bate/Title/etc)
Display order (Descending/Ascending)

Creating new Portfolio Items

When you install and use Enfold you have access to a new Custom Post Type for displaying Portfolio items. It isn’t strictly for Portfolio data but that is the general design and how other elements within the theme are set to handle the single portfolio items made with it.

Adding a Portfolio item works just like adding a post or page. Your portfolio categories can be hierarchical with Parent->Child relationships and each portfolio item can also have tags added to it like a post. Once you have some portfolio items created you then output portfolios on your pages using either shortcodes or using the Advanced Layout Builder Portfolio elements.

From the left menu click on Portfolio Items and then Add New to create your own Portfolio item. Now add your title and jump in to adding in your content. You can use the blue Advanced Layout Editor button to turn on the Advanced Layout Builder and create a completely custom layout for each content area of your portfolio items.

Just like on a page you can choose to have a sidebar, page title and breadcrumbs showing and footer/socket settings all from the Layout Meta box on the right-hand side of the visual editor.

The Featured Image meta box just below the Layout meta box is where you will set the main single image to represent your portfolio item in the Portfolio grid and other outputs. So make sure to set that with an image larger than 700×700 pixels for the most flexibility.

Additional Portfolio Item Settings
Just below the visual editor section is the Additional Portfolio Settings meta box with some additional single portfolio item options. The first option “Overwrite Portfolio Link Setting” will let you change the default action of a user clicking on that item in a portfolio grid. By default, the item will open in a lightbox: larger size of your featured image zoomed in with a black background over the page content. By selecting “Define custom link” you can instead make the image link to a custom page URL of your choice.

Ajax Portfolio Settings
Within the Additional Portfolio Settings, meta box is the options for the Ajax portfolio view of that single portfolio item. See an ajax portfolio demo here: http://www.kriesi.at/themes/enfold/portfolio/portfolio-ajax/

The Ajax view is more limited in layout than what you can do with the single page view. The image(s) will be displayed on the left and the visual editor content on the right. Add your images using the “Add Preview Images” button, choose the display style from the “Display Preview Images” drop-down and if needed the number of columns for the thumbnails.

Then add in the content you want to appear on the right of the image(s) and publish!

Customization

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.

Title and Background

The title and background by default pick up style from the color scheme and styles set up in the theme options. To add custom style to the portfolio grid element please use the CSS below.

/*----------------------------------------
// CSS - Portfolio Grid Title and Background
//--------------------------------------*/

/* Font */
.grid-entry .grid-entry-title {
  color:#7d3f98;
  background: transparent;
  font-weight: 800;
}
/* Title background */
.grid-entry .grid-content,
/*  Arrow*/
.grid-entry .grid-content .avia-arrow {
  background: #ffc168;
}

Overlay style

Use the below CSS to make the portfolio grid entry overlay and title appear on hover.

/* Portfolio overlay with title */
/* Disable default animation */

#top .grid-entry a:hover .image-overlay .image-overlay-inside {
animation: none;
}

/* Overlay color */

#top .grid-entry .image-overlay {
background: rgba(10, 10, 180, .96)!important;
}

/* Remove hover icon */

#top .grid-entry .image-overlay .image-overlay-inside:before {
display: none !important;
}

/* Remove default title below */

.grid-content .avia-arrow,
#top .grid-entry .grid-content {
display: none;
}

/* Display title on hover*/

.grid-entry a:hover:before {
content: attr(title);
position: absolute;
width: 100%;
z-index: 1000;
text-align: center;
opacity: 1;
font-size: 18px;
color: #ffffff !important;
top: 50%;
transform: translateY(-50%);
animation: avia-fadein 0.75s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
}

Remove Overlay

To remove the default overlay effect please use the CSS below.

/*----------------------------------------
// CSS - Portfolio Grid overlay
//--------------------------------------*/

.grid-entry  .image-overlay { 
  display:none;
}

Alignment

By default, the title text is center aligned. To align the title text to the right or left please use the CSS below.

/*----------------------------------------
// CSS - Portfolio Grid Title Alignment
//--------------------------------------*/

/* Font Alignment */
#top .grid-entry .grid-entry-title {
text-align: left;
  }

Border and image shape

We can add custom CSS style to change the shape of the portfolio image and hide the borders.

/*----------------------------------------
// CSS - Portfolio Grid  Border and shape
//--------------------------------------*/

/* Remove Border
.grid-entry .inner-entry { box-shadow: none; }  */

/* Image shape */
.grid-image img {
  border-radius: 200px!important;
  width: 200px;
  max-width:200px;
  height: 200px;
  text-align: center;
}
.grid-image img {
  display:inline-block;
 }

Change the sort order of Portfolio Elements

By default the portfolio elements that display a group of portfolio items will show them sorted by date created. You can add this function to your functions.php to change the sorting order:

  function custom_post_grid_query( $query, $params ) {
    $query['orderby'] = 'title';
    $query['order'] = 'ASC';
    return $query;
  }
  add_filter( 'avia_post_grid_query', 'custom_post_grid_query', 10, 2);

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:

  function custom_post_grid_query( $query, $params ) {
    $query['orderby'] = 'title';
    $query['order'] = 'DESC';
    return $query;
  }
  add_filter( 'avia_post_grid_query', 'custom_post_grid_query', 10, 2);

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

function custom_post_grid_query($query)
{
  $query['orderby'] = 'rand';
  return $query;
}
add_filter('avia_post_grid_query','custom_post_grid_query');

Prev / Next arrows on mobile

By default, the Previous / Next arrows on the portfolio item page are hidden on the mobile display. To display the post /portfolio navigation arrows please use the CSS below.

/*----------------------------------------
// CSS - Display Previous / Next arrows in mobile view
//--------------------------------------*/

@media only screen and (max-width: 767px) {
.responsive #top.documentation .avia-post-nav {
display: block !important;
}}

Load a default portfolio category

To open a default portfolio category add the code to your functions.php file. By default the code activates the first category of the portfolio filter if you like to change it increase the eq(x) value in line jQuery(‘.inner_sort_button:eq(1)’).click();

//------------------------------
// php -  Open portfolio category
//------------------------------

function select_portfolio_filter(){
?>
<script>
jQuery( window ).load(function() {
  jQuery('.inner_sort_button:eq(1)').click();
});
</script>
<?php
}
add_action('wp_head', 'select_portfolio_filter');

Portfolio filter hide the word “ALL”

Hide the word All in the portfolio filter sort options.

/*----------------------------------------
// CSS - Hide the word All 
//--------------------------------------*/
.all_sort_button,
.all_sort_button + .text-sep {
    display: none !important;
}

Replace the word “ALL” in portfolio filter

Add your replacement text in the below code and copy the code to functions.php

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

Hide portfolio filter separator

To hide the sort filter separator please use the CSS below.

/*----------------------------------------
// CSS - Hide sort separator
//--------------------------------------*/

.sort_width_container .text-sep {
    display: none !important;
}

Enable deeplinking to the Portfolio AJAX

Enfold Version 3.0.4+

This snippet will allow you to create links to your portfolio ajax items and have one of them open up when the page is loaded.

1. Add to the functions.php file.

First off open up the functions.php file and add this to the very bottom.

add_action( 'wp_footer', 'enfold_customization_portfolio_linking', 999 );
function enfold_customization_portfolio_linking() {
?>
<script type = "text/javascript">
jQuery(document).ready(function(){
var p = getUrlParameter('custom_ajax');
//jQuery('.grid-links-ajax').avia_portfolio_preview();
jQuery('.post-entry-'+p+' .grid-image').click();
});
function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}      
</script>
<?php
}

2. Create your links
Next you would create the links to your portfolio page.


http://www.yoursite.com/your_portfolio_page?custom_ajax=12
http://www.yoursite.com/your_portfolio_page?custom_ajax=13

And then change 12 and 13 to the ID’s of some of your portfolio posts.

Open external links when a portfolio image is clicked

To link the portfolio image to an external page or site, open the portfolio item and scroll down to the bottom and look for “Portfolio Additional Settings” here you can select “Define custom link” under the Overwrite Portfolio Link setting option.

Resource

Contributed video:

Portfolio Element Tutorial