Joomla Portfolio Gallery User Manual

Step 1. Adding process of Huge-IT Portfolio Gallery Extension

In order to install Portfolio Gallery extension, go: Extensions > extensions manager > choose the zip file > upload > module manager > activate

Part 2 Usage of Portfolio Gallery Module

Module of this extension is made to facilitate the process of using the plugin within page. You can: place it in different positions within page, choose in which pages to display or not.

2.1 How to install module zip file

2.1 How to install module zip file
Extensions > Module Manager > Activate Huge-IT Portfolio Gallery > Choose Portfolio Gallery and Position within specific theme (on right panel) > Menu assignment > Choose where to display it

Part 3. How to Insert Created Portfolio Gallery

Menu > Main Menu > “page” > Select >choose our Portfolio Gallery > Save

Part 4. Free version options of Portfolio Gallery Extension

Components > Portfolio Gallery > My First Gallery
On the admin page of the Portfolio Gallery extension give you 7 ways to demonstrate the videos:

  • Gallery/Content-Popup.
  • Content Slider.
  • Full-Width block
  • Full-Height block
  • Lightbox Gallery.
  • Toggle Up/Down
  • FAQ toggle up/down

  • Easy drag & drop function to change the order of projects.
  • Image Gallery – Add main images, add additional images.
  • Video gallery – If you have videos, add main videos and additional videos. Videos can be added from YoutUbe and Vimeo sources only.
  • Title – write title to each project
  • Description – make it full with description text
  • URL – add external URL link( which will work on “View More” button
  • Sorting buttons – select to “show sorting buttons” and enable the function of sorting your projects by date, name, and so on…
  • (PRO) Category Buttons – select to “show category buttons” and enable the ability to divide your projects into different categories.
    category can be create in the same place on admin, add new category or edit the existing one, and select to which category your project should belong to.
    After creation, take the shortcodes to add into article/page/template.

After creation, take the shortcodes to add into article/page/template.

Step 5. (PRO) General Options of Portfolio

This section will allow making changes for the specific view option of the Portfolio. Most of the view options allow styling and color options. The relevant changes will affect all portfolio using that specific view option.

5.1 Blocks Toggle Up/Down.
Element Styles
  • Element Background Color.Determine the background color for the element.
  • Element Border Width. Set the border width for the element.
  • Element Border Color. Select the element border color.
  • Toggle Button Style. Choose the style for the toggle button.
  • Show Separator Lines. Choose whether to display divider lines or not.
Main Image
  • Main Image Width. Set the main image width in pixels.
  • Main Image Height. Set the main image height in pixels.
Title
  • Title Font Size. Specify the font size for the portfolio title.
  • Title Font Color. Choose the color for the portfolio title font.
Thumbnails
  • Show Thumbnails. Choose whether to display the image thumbnails or not.
  • Thumbnails Position. Set the positioning of the thumbnails.
  • Thumbnails Width. Set the width for the image thumbnails.
Description
  • Show Description. Choose whether to display the description of the portfolio or not.
  • Description Font Size. Set the portfolio description font size in pixels.
  • Description Font Color. Select the portfolio description font color.
Link Button
  • Show Link Button. Choose whether to display Show More button.
  • Link Button Text. Define the text of the Show More button.
  • Link Button Font Size. Set the font size for the Show More button.
  • Link Button Font Color. Select the font color for the Show More button.
  • Link Button Font Hover Color. Select the font color for the Show More button when hovered.
  • Link Button Background Color. Select the background color for the Show More button.
  • Link Button Background Hover Color. Select the background color for the Show More button when hovered.
5.2 Full-Height Blocks
Element Styles
  • Block Width. Set the width of the blocks in pixels.
  • Element Background Color. Determine the background color for the element.
  • Element Border Width. Set the border width for the element.
  • Element Border Color. Select the element border color.
  • Show Separator Lines. Choose whether to display divider lines or not.
Title
  • Title Font Size. Specify the font size for the portfolio title.
  • Title Font Color. Choose the color for the portfolio title font.
Thumbnails
  • Show Thumbnails. Choose whether to display image thumbnails or not.
  • Thumbnails Position. Set the thumbnail position.
  • Thumbnails Width. Set the thumbnail width in pixels.
Description
  • Show Description. Choose whether to display the image descriptions or not.
  • Description Font Size. Determine the font size for the image descriptions.
  • Description Font Color. Choose the font color for the image description.
Link Button
  • Show Link Button. Choose whether to display Show More button.
  • Link Button Text. Define the text of the Show More button.
  • Link Button Font Size. Set the font size for the Show More button.
  • Link Button Font Color. Select the font color for the Show More button.
  • Link Button Font Hover Color. Select the font color for the Show More button when hovered.
  • Link Button Background Color. Select the background color for the Show More button.
  • Link Button Background Hover Color. Select the background color for the Show More button when hovered.
5.3 Gallery/Content Popup
Element Styles
  • Element Width. Set the element width in pixels.
  • Element Height. Set the element height in pixels.
  • Element Background Color. Determine the background color for the element.
  • Element Border Width. Set the border width for the element.
  • Element Border Color. Select the element border color.
  • Element’s Image Overlay Color. Set the overlay color for the element image.
  • Element’s Image Overlay Transparency. Determine the transparency level of the overlay.
  • Zoom Image Style. Choose the light or dark options of the image zoom.
Element Title
  • Element Title Font Size. Specify the font size for the element title.
  • Element Title Font Color. Choose the color for the element title font.
Element Link Button
  • Show Link Button On Element. Choose whether to display Show More button on the element or not.
  • Link Button Text. Set the text for the Show More button.
  • Link Button Font Size. Define the font size for the text over the button.
  • Link Button Font Color. Select the font color for the text over the button.
  • Link Button Background Color. Select the background color for the text over the button.
Popup Styles
  • Popup Background Color. Select the popup background color.
  • Popup Overlay Color. Set the overlay color for the background.
  • Popup Overlay Transparency. Set the level of transparency of the popup overlay.
  • Popup Close Button Style. Select the style of the Close button for the background.
  • Show Separator Lines. Choose whether to display divider lines or not.
Popup Title
  • Popup Title Font Size. Specify the font size for the popup title.
  • Popup Title Font Color. Choose the color for the popup title font.
Popup Thumbnails
  • Show Thumbnails. Choose whether to display the image thumbnails or not.
  • Popup Title Font Color. Choose the color for the popup title font.
  • Thumbnails Width. Set the width for the image thumbnails.
Popup Description
  • Show Description. Choose whether to display the description of the portfolio or not.
  • Description Font Size. Set the portfolio description font size in pixels.
  • Description Font Color. Select the portfolio description font color.
Popup Description
  • Show Link Button. Choose whether to display Show More button.
  • Link Button Text. Define the text of the Show More button.
  • Link Button Font Size. Set the font size for the Show More button.
  • Link Button Font Color. Select the font color for the Show More button.
  • Link Button Font Hover Color. Select the font color for the Show More button when hovered.
  • Link Button Background Color. Select the background color for the Show More button.
  • Link Button Background Hover Color. Select the background color for the Show More button when hovered.
5.4 Full-Width Blocks
Elements Styles
  • Main Image Width. Set the width of the main image.
  • Element Background Color. Determine the background color for the element.
  • Element Border Width. Set the border width of the element.
  • Element Border Color. Select the element border color.
  • Show Separator Lines. Choose whether to display divider lines or not.
Title
  • Title Font Size. Specify the font size for the portfolio title.
  • Title Font Color. Choose the color for the portfolio title font.
Thumbnails
  • Show Thumbnails. Choose whether to display the image thumbnails or not.
  • Thumbnails Position. Set the positioning of the thumbnails.
  • Thumbnails Width. Set the width for the image thumbnails.
Description
  • Show Description. Choose whether to display the description of the portfolio or not.
  • Description Font Size. Determine the description font size in pixels.
  • Description Font Color. Select the font color for the description.
Link Button
  • Show Link Button. Choose whether to display Show More button.
  • Link Button Text. Define the text of the Show More button.
  • Link Button Font Size. Set the font size for the Show More button.
  • Link Button Font Color. Select the font color for the Show More button.
  • Link Button Font Hover Color. Select the font color for the Show More button when hovered.
  • Link Button Background Color. Select the background color for the Show More button.
  • Link Button Background Hover Color. Select the background color for the Show More button when hovered.
5.5 FAQ
Elements Styles
  • Block Width. Set the width for the block in pixels.
  • Block Background Color. Select the background.
  • Element Border Width. Set the border width of the element.
  • Block Border Width. Se the border width in pixels.
  • Block Border Color. Choose the border color.
Title
  • Title Font Size. Specify the font size for the portfolio title.
  • Title Font Color. Choose the color for the portfolio title font.
  • Toggle Button Style. Select the toggle button style from the provided options.
Description
  • Show Description. Choose whether to display the description of the portfolio or not.
  • Description Font Size. Set the portfolio description font size in pixels.
  • Description Font Color. Select the portfolio description font color.
Link Button
  • Show Link Button. Choose whether to display Show More button.
  • Link Button Text. Define the text of the Show More button.
  • Link Button Font Size. Set the font size for the Show More button.
  • Link Button Font Color. Select the font color for the Show More button.
  • Link Button Font Hover Color. Select the font color for the Show More button when hovered.
  • Link Button Background Color. Select the background color for the Show More button.
  • Link Button Background Hover Color. Select the background color for the Show More button when hovered.
5.6 Content Slider
Slider
  • Slider Background Color. Choose the background color for the slider.
  • Slider Tabs Font Color. Set the font color for the slider tabs.
  • Slider Tabs Background Color. Set the background color for the slider tabs.
  • Icons Style. Choose the icon style.
Images
  • Main Image Width. Set the main image width in pixels.
  • Main Image Height. Set the main image height in pixels.
Show Thumbnails
  • Thumbnails Width. Set the width for the thumbnails.
  • Thumbnails Height. Set the height for the image thumbnails.
Title
  • Title Font Size. Specify the font size for the portfolio title.
  • Title Font Color. Choose the color for the portfolio title font.
Link Button
  • Show Link Button. Choose whether to display Show More button.
  • Link Button Text. Define the text of the Show More button.
  • Link Button Font Size. Set the font size for the Show More button.
  • Link Button Font Color. Select the font color for the Show More button.
  • Link Button Font Hover Color. Select the font color for the Show More button when hovered.
  • Link Button Background Color. Select the background color for the Show More button.
  • Link Button Background Hover Color. Select the background color for the Show More button when hovered.