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).

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>