Installing the Plugin
a3 Portfolio is available for download for free from wordpress.org. It can also be installed directly from your a3 dashboard.
Once you have the plugin installed and activated it adds the a3 Portfolio menu to your WordPress admin page menu. It looks like this when you hover over or click on a3 Portfolio.
The first thing to do is to create some Portfolio Items. Once that has been done we can then look at how the Portfolio should display on the front end.
Add a New Item
a3 Portfolio allows you to create an unlimited number of Portfolio Items. Items are WordPress custom post types and hence if you know how to create a WordPress post then you know how to create a Portfolio Item which a few extra features.
Title and Description
1. Title – This is the item post title. It will also show as the title on the Item Card either under the card on when a user moves their mouse over the card (depending on which option you have selected in the General Settings
2. Description – Use the WordPress text editor to add your description (just like posts). The description shows on the item expander on the front end and also in the post.
Each Portfolio item has it’s own gallery. You can upload any number of images via the Portfolio Item Meta section that is found under the WordPress text editor. Click the ‘Add portfolio gallery images’ link and the WordPress Image uploader will open. You can upload images or use any image from your WordPress media Library. When the images are selected or uploaded click the Add to Gallery button (bottom right corner of the WP medi uploader pop-up and you will see the image thumbnails in the Portfolio Gallery meta box. See image
Item Main Thumbnail
The first image in the thumbnails will be used as the item Card image on the front end. You DO NOT have to set it as the feature image.
Sort Image Order
Sort the order of the images in the Item gallery by drag and dropping the thumbnails in the Portfolio Gallery meta box. You will also see an delete X show on each thumbnail when you mouse over it. This allows you to easily and quickly remove images from the gallery (does not delete the image from your media Library).
You can add a custom card description or leave it blank and it will be pull from the first paragraph from item description.
Remember that you will see this option ONLY if you have turn it On from General Settings.
You will see the second item on the Portfolio Item Meta menu is ‘Layout’. Important ! The layout settings apply for users who’s post content width is greater than 762px. When the post width is greater than 762px the default layout expands to Main Gallery image LEFT and Taxonomy, description to the right. Under 762px and the layout is Main image top with thumbnails under the main image and then the Taxonony – description.
For users with post content wider than 762px there are 2 elements that you can control on a post by post basis. These elements are set in the General Settings menu and whilst they apply to all Portfolio Item posts they can be over-ridden on any item post.
Post Display – You can have the post display in 1 columns or 2 columns
Main Image Width – This is the width of the Gallery main image as a percentage of the Theme post content width.
Gallery Thumbnail Position – Options are RIGHT or BELOW and both are relative to the Gallery main image.
The image below shows the Item post on a page that has no sidebar and is 830px wide (greater than 762px wide) with the layout settings Main Image Width 40% and Gallery Thumbnails positioned below.
The next image is the same Portfolio Item Meta > Layout settings – but the post has a Sidebar and hence the content section of the post is less than 762px wide. See how the content auto wraps below the gallery for an enhanced display – especially in tablets in portrait view.
Attributes are data that is common to a number of Portfolio items. Values that are created in the Attribute menu are created in the Portfolio Attribute menu. This allows you to add values specific to the portfolio item that is being created.
1. Add new attribute by select it from Portfolio menu
2. Give you attribute a name
3. Add new terms for your attribute
1. View More button – The Button shows under the description in the Item Post. It will open the item post or expand the portfolio (can be set from General settings)
2. Launch Button – This button show under the description of the Item Expander. Add a link to any URL and a custom button text. Leave this field empty and the button will not show on front end.
3. Open Type – Set how the link should open – default is open in the same window.
Turn On or Off if this item will be show as first. The items that have this feature turn on will be show as firsts.
Portfolio categories meta can be found in the right sidebar of the Item post edit page just like WordPress post categories. The meta box works exactly the same, assign the item post to a category and create new categories
Portfolio categories have other important functions – visit the Portfolio Categories section to read about those.
Portfolio Tags meta can be found in the right sidebar of the Item post edit page just like WordPress post Tags. The meta box works exactly the same, add new Tags or choose from the most used tags. See image.
There is no need to set an image as featured. The image that is first in the Portfolio Item Meta > Portfolio Gallery will always show as the Portfolio Gallery main image and on the item card. If you do set a Featured image the thumbnail will not show in the Portfolio gallery meta (it shows in the featured image meta – see image below) and the image will be used as the main image and show on the item card.
Portfolio categories are a custom WordPress Taxonomy. This means that creating Categories works exactly the same as Post Categories but they also have a couple of advanced features.
Portfolio Nav Bars
The Portfolio main page Navigation bar is created from the Portfolio Parent Category names that are created and turned ON to show on the main navigation bar. If it is turned OFF then that category and all Portfolio items assigned to it will not show on the main Portfolio page. Don’t worry – you can use your WordPress Menus to show a category page on any Nav bar and or use the a3 Portfolio Category widget for navigation.
When the Portfolio page first loads all of the items load – hence the All tab. Click on a category name and all the items assigned to that category show without the page reloading. You can see that here on the demo site.
Nav Bar Sort
Sort the order that the Portfolio Navigation bar items show by dragging and dropping the Categories into the position that you want on the Categories table. Note any Categories that are turned OFF from showing on the main nav bar are ignored in the front end nav bar order. When you mouse over a Parent Portfolio category you will see a 4 way arrow. Click on the category and hold down your mouse left clicker. With the left clicker held down move your mouse up or down the page and when the Parent category is in the position you want drop it (let go of the left mouse clicker).
Portfolio Tags are ways to group your projects together. They work exactly like Tags for blog posts.
In general settings you will find all the option to style your item cards, expander and items posts.
The general settings for a3 Portfolio plugin.
Plugin Framework Global Settings
Portfolio Item Images
These settings affect the display and dimensions of images in your portfolio – the display on the front-end will still be affected by CSS styles. After changing these settings you may need to regenerate your thumbnails.
Style your front end item cards
Item Cards Per Row
Maximum Items to show per row in larger screens
Item Card Image
1. Image Display Height – It can be fixed or dynamic (it will show the image original size)
2. Image Height as a % of Width – If it is choose Fixed you can set the procent of the image height as a % of width
3. Image Link Opens – Clicking on the item card image it can be choose if it will open the expander of the item post
Item Card Title
1. Item Title Position – The title can be Under image like in the above example or On Hover (when you put your mouse over the image the title will show hover on the image)
2. Title Link Opens – When clicking on title you can have open the expander or the post item.
Item Card Description
1. Item Card Description – ON to show the description on the Item Card under the image
2. Description Height – Select the height of the description. Can have till 6 rows. You can add a custom card description or leave it blank and it will be pull from the first paragraph from item description.
View More Feature
1. Item Card View More – ON to show the view more button on the Item Card under the description
2. View More Link Opens – Clicking on the button you can have open the Item Expander or the Item Post
Item Expander Post Meta
Post meta shows under the post name on the expander.
Item Expander Social Share
Turn Off or On the social share icons on the expander.
Expander Top Alignment
By default, the item expander will open at the top if the screen or 0px from top. Use the setting to adjust the distance that the expander opens from the top of the screen to match your requirements in PC’s and mobiles
Expander Attribute Table
Show the attributes position: above or bottom of the expander content
Expander Image Gallery
Set the thumbnail position. In this example it set below main gallery image.
Item Posts Layout
Settings here apply to all Portfolio Item posts. These can be over-ridden from Portfolio Item Meta on each Items edit page.
1. Post Display – It can be set on 1 column or 2 columns like in the example
2. Main Image Width – The Gallery main image container width as a percentage of the full content width
3. Gallery Thumbnail Position – Gallery Thumbnails position in relation to the Gallery main image
Item Post Attributes Table
Set where the attributes will show on Item Post
Item Post Template Reset
Switch this ON and Save Changes if you want all Item Posts to have the same Layout that you have set above in the + Item Post Layout options.
Important! Clear your cache after so that you and visitors see changes
From WordPress Visual editor menu on any page or post use the a3 Portfolio Button to insert Single Items, Portfolio Categories or Portfolio tags into any post or page.