Portfolio Particle Documentation

Add responsive portfolio to your website. Present your work in so many ways. This item comes with 05 super customizable styles to choose from. Tons of ready to use options make it very easy to add Filter style, filter position, number items, grid gutter and so on.

Installing the particle on your website is a really simple process. You just need to follow the below instructions depending on the platform you are on.

Important This particle requires Uikit3 for Gantry5 Framework atom to be installed and enabled in your template/theme configuration . To get started right away, we recommend you to enable the Uikit3 for Gantry5 atom FIRST

Version: 2.0.0 | Changelog | Download

Joomla Installation

Step1 Unzip the package Portfolio.zip.

Step2 Copy all the contents inside folder Portfolio to custom folder which located at

root/templates/TEMPLATE_NAME/custom/

Step 3 Add the following code below

@import "portfolio";

in your custom.scss file. If the custom.scss file does not exists, you will need to create it manually. The custom.scss file located at

root/templates/TEMPLATE_NAME/custom/scss/custom.scss

Also, make sure your custom.scss file has the @import "dependencies"; code at the very top. Basically, this step is the same as the one described in the Adding a Custom Style Sheet chapter in the Gantry 5 Documentation.

Video Tutorial

Still don’t know what to do? Watch the video below! It will show you all the steps in details. The video is installation for flipster card particle in JOOMLA but the steps are the same. ( Remember to change the directory if you are using WORDPRESS ).

WordPress Installation

Step1 Unzip the package Portfolio.zip.

Step2 Copy all the contents inside folder Portfolio to custom folder which located at

root/wp-content/themes/THEME_NAME/custom

Step 3 Add the following code below

@import "portfolio";

in your custom.scss file. If the custom.scss file does not exists, you will need to create it manually. The custom.scss file located at

root/wp-content/themes/THEME_NAME/custom/scss/custom.scss

Also, make sure your custom.scss file has the @import "dependencies"; code at the very top. Basically, this step is the same as the one described in the Adding a Custom Style Sheet chapter in the Gantry 5 Documentation.

Usage

All particles are very easy to use. All the options in partice have a tooltip text to show you what they do. You can watch the usage video below if you are confusing and don’t know what to do next.

General Setting	Description
Filter Style	Select filter style.
Filter Position	Select filter position.
Number Items	Select number item on 1 row
Grid Gutter	Enter grid gutter.

Item Setting	Description
Style	Select style.
CSS Classes	CSS class name for the item.
Image	Select the image.
Link	Customize the link when click image.
Items Title	Customize the title.
Description	Customize the description.
Tags	Customize the tags for grouping, seperate by comma if multi tags (EX: Plants, Rose).
Special tag	Enter the special tag for this item (EX: NEW).

Introduction
Joomla Installation
WordPress Installation
Usage