Advanced Portfolio Pro

Advanced Portfolio Pro

Introduction

Advanced Portfolio Pro is the professional Joomla! 3 extension developed by ExtStore Team that allows users to create a neat, flexible and effective portfolio-based site. The component manages projects by tags or categories. Each project contains short and full description, media gallery and project URL

Features

Basic Features

  • Joomla MVC Standard: Advanced Portfolio’s code is written based on Joomla 3.0 standard, making it work greatly on Joomla 3.0 websites and support custom layout from templates.
  • Multi-level/Nested Categories: Advanced Portfolio allows you to manage projects across infinite categories and subcategories.
  • Projects Management: Advanced Portfolio allows you to manage projects in which you can add thumbnail, images gallery as well as video easily.
  • Easy images management: You can create unlimited sub-folders and upload multiple images by dropping many images once at a time.
  • Support videos URL from Youtube or Vimeo.
  • Clean theme and responsive design.
  • Support tags for filtering projects by tags on front-end.
  • Support pagination results.
  • Option to show/hide unauthorized links for non-registered users.
  • Show list of projects in nice default layout.
  • Easy to customize.

Pro Features

  • Image Management: You can configure the location to store images safely.
  • Image Performance: With image cache feature and images quality, your website will load much faster.
  • Extra Video Support: You can add video from not only Youtube or Vimeo but also Metacafe, Daily Motion or Twitvid.
  • Featured Project: If one project is marked as featured, it will display in bigger size than the others' in list view.
  • Overlay: Beside configurable colors displays title, category and quick links to project as well as quick link to preview project gallery/video in the popup, overlay is clickable. Now users can click overlay to visit project details.
  • SEO Performance: The component is optimized superlatively for Search Engine due to Joomla full SEF/SEO compatibility and effective image performance.
  • Optional Filter: Advanced Portfolio Pro allows you to Show/Hide filter bar as well as filter projects by tags or categories.
  • Overlay Effects: None (simply cover), Animate (slide from left to right), Hover Direction (create direction-aware move). Opacity of thumbnails is changeable as well.
  • CSS3 Transform Effects: Scale, Rotate, Translate and Skew. Hover duration and delay time are configurable.
  • Gutter Width: Option to configure space between projects in list view.
  • Module: There are 2 types - Carousel and Grid. Grid layout, with filter bar, columns, effect options..., is exactly the same as list project of component and can be shown in Joomla articles.
  • Option to show number of projects per page.
  • Option to configure width/height of project thumbnails.
  • Option to change color of buttons on Overlay.

Click to see See Demo

Installation

Go into Administrator site, click ExtensionExtension Manager. Download the latest version of Advanced Portfolio Pro from ExtStore website to your local machine. The ownloaded file should be a zip file package. There are 2 ways to install Advanced Portfolio Pro. You can upload or install from a directory.

Upload

  • From the backend of your Joomla site (administration) select Extensions → Install.
  • Click the Browse button and select the extension package on your local machine.
  • Click the Upload File & Install button.
  • Note that modules and plugins must be enabled before they will work.

Install from a directory

  • Unzip all of the files locally.
  • Transfer the files (using FTP) to a folder in the install directory (for example administrator/components/com_installer/components)
  • Use the installer, but select "install from directory" indicating the correct folder name. This folder name should be an absolute path from the root of the file system.

Usage

Main Screen

  • In Administrator site, choose ComponentsAdvanced Portfolio Pro


Extcapp dashboard.png

  • Click items on the main dashboard or left-side menu to enter sections. There are also support links, version info and other useful details on dashboard view.

Create new category

  • Advanced Portfolio Pro allows to create infinite number of categories, subcategories and projects. And there are two ways to create a category.
  • First way: Click Components → Adv Portfolio Pro → Categories and choose New button.png button to create a new category.


Extcapp new category.png

 

Second way: You can create a quick category during creating a new project by clicking arrow-down icon on Category field and enter the name of the new category.

Create new project

  • Click Components → Adv Portfolio Pro → ProjectsNew button.png to create a new project. The Title of each project is required.

Setting for Details


Extcapp new project.png

  • Project URL: Enter a valid url in this field. This url will be used for Permalink button on the project's overlay and Launch Project in the project view.
  • Ordering: Select the ordering for the project.
  • Short Description: Give the project some short introduction lines that will be displayed on the list view.
  • Description: Description has got the same role as a brief document of a project that provides specified information in the detailed page.
  • Category: Choose a Category for the project.
  • Tags: Add tags to the project. Tags help users to filter projects.
  • Status: Set status as Published, Unpublished, Archived or Trashed.
  • Featured: Set the project as featured projects by choosing option Yes or No.
  • Access: Choose which group which is enabled to view this item.

Setting for Media Manager

  • Thumbnail: Click Select button to choose images from the media library.


Extcapp media management.png

  • Image: All the images used for thumbnail or image slider can be uploaded and chosen from the library. You can add a whole bunch of images by dragging and dropping them to the popup window. The process are super quick and very simple. Advanced Portfolio Pro also allows you to create folders to arrange and manage uploaded images as well.

 

Extcap media image library.png

  • Video: Add an available link from YouTube, Vimeo, Metacafe, Daily Motion or Twitvid..

 

Extcapp video.png

 

Publishing, Project and Metadata Options

Publishing OptionsParameters
Extcapp publish options.png
  • Alias: Alias is for internal use only. Just leave it blank and Joomla will fill in a default value from the title. It has to be unique for each project in the same category.
  • ID: Record number of the product in the database.
  • Created by: Name of the author who creates the project.
  • Author's Alias: Use another name than the author's for display.
  • Created Date: Date shows when the project is created.
Project OptionsParameters
Extcapp project options.png
  • Show Title: Choose options to show or hide title
  • Show description: If this option is set to be Show, the description of the project will be displayed when you click to see details in the project. If it is set to be Hide, only slider/video will be showed.
  • Description Position: Select the position to put project's description - on top, at the bottom, on the right or left of slider/video.
  • Description Width: Width of description.
  • Image Width: Width of thumbnail. Thumbnail width should be larger than column width.
  • Image Height: Height of thumbnail.
  • Show Unauthorised Links: Option to show or not show links of registered content when users are not logged-in.
Metadata OptionsParameters
Extcapp metadata options.png
  • Meta Description: The optional paragraph to generally display in the results of search engine.
  • Meta Keywords: The optional comma-separated list of keywords or key phrases. This contributes to SEO on your website.
  • Robot: People normally have to use some HTML <META> tags to tell robots not to index the content of a page but now you only need to choose among options for robots of products.
  • Content Rights: Describe the content right which others must have to abide by to use this content.

Featured Projects

In a list of projects, you can easily make one project featured by clicking the star symbol or changing the Featured option in each project.

Choose featured projects

 

Extcap featured project display.png

 

Tags Management

  • Tags are very helpful in searching and managing projects. You can easily find out a project by using tags.
  • From the admin toolbar in backend, choose Components → Tags to create tags.

 

Extcapp tags management.png

 

  • And/Or input tags directly in the project.
Extcap input tags to projects.png
 

 

Configuration

Click the Gear icon or choose Configuration item from the left menu on Advanced Portfolio Pro dashboard.

General Settings

Extcapp configuration general.png

Projects Settings

pro-projectlayout

  • Project Layout: Choose a default layout for a single project. If you don't create any custom layout, Advanced Portfolio Pro will use the default layout from the component.
  • Layout Type: The images at project detail will be shown by Grid or Carousel Style.
  •  Animation for Slider: You can choose an animation for Slider such as FadeUp, Fade, BackSlide or GoDown.
  • Popup: You can Enable/ Disable popup when you click on the image at View Project Detail.
  • Show Project Navigation: Choose Yes/ No to show/ hide Next/ Previous button for Project Navigation.
  • Project Navigation by Category: If you choose Yes, the Next/ Previous button only work with the projects assigned to the same category. If you choose No, all of the projects will be navigated.
  • Show Title: Choose to show or hide the title of projects.
  • Show Description: Select to show only images/video or images/video with description when you click in to see more details of projects.
  • Description Position: Set the description position to the right, left, bottom or top of image slide/video.
  • Description Width: Width of description.
  • Show Unauthorised Links: Show or not show links of registered contents when users are not logged-in.
  • All the above options are applied for all projects. If you want make changes in a specified projects, you need to set in that project privately.

List Layout

listlayout1
 
  • Projects Layout: Choose layout to use for projects list.
  • Show Filter Bar: Show filter bar at the top to filter projects by tag or category.
  • Filter Order: You can arrange filter by Ordering or Title Alphabetical 
  • Show Title: Option to show title of projects.
  • Show Category: Show project category.
  • Show Short Description: Option to show/hide short description of projects.
  • Show Info: Show information in the overlay.
  • Show Info Title: Show project title in the information overlay.
  • Show Info Category: Show project category in the information overlay.
  • Show Info Project Link: Show project link button in the information overlay.
  • Show Info Details URL: Show url button of project details in the information overlay.
  • Show Info Gallery: Show project gallery's preview button in the information overlay.
  • Click Thumbnail To: When you click Thumbnail, it will link to Gallary Popup or Detail Page.
  • Link to target=_blank: Choose Yes to open link (when you click on thumbnail) at the new tab. Choose No to open link in the same tab.
  • list layout2 
  • Background Button: Change background color of buttons on the overlay.
  • Background Hover Button: This option will change background color of buttons on the overlay when you mouse over them.
  • Image Width and Image Height: Options to adjust thumbnails' size.
  • #Columns: Max number of columns in which projects are shown.
  • Gutter Width: Change width of spacing between columns.
  • Overlay Color1 and Overlay Color2: Change overlay colors.
  • Overlay Opacity: Enter a valid number between 0 and 100 to change opacity degree of thumbnails. E.g: 50
  • Overlay Effect: Choose animation to side overly or choose Hover Direction to create direction-aware move with the mouse.
  • Hover Easing: Choose transition effect of moving animation.
  • Hover Duration: Set duration of overlay performance in seconds.
  • Hover Delay: Delay time before overlay effect starts, in seconds.
  • Hoverdir Speed: Speed of overlay performance when you choose Hover Direction as Overlay Effect.
  • Hoverdir Inverse: Inverse direction-aware move when you choose Hover Direction as Overlay Effect.
  • Project Order: The order that projects will show in. Choose among the following options:
    • Most recent first: Newest projects are shown first.
    • Oldest first: Oldest projects come first and most recent projects come last.
    • Title Alphabetical: Show projects in alphabetical order.
    • Title Reverse Alphabetical: Show projects in alphabetical order but in reversion.
    • Ordering: Order projects by default.
  • List Limit: Limit the number of projects per page.
  • Pagination: Decide among Auto, Hide or Show options for pagination at the bottom of the page, navigating to the previous or the next page.
  • Pagination Results: Show or Hide Pagination results information. For example, "Page 1 of 4".

Transform Settings

Extcapp transform configuration.png
  • Transform Scale: An effect allows you to shrink or enlarge images by the scale factore. By default, 1 is the value of full size.
    • Scale x: Value of X-axis scale transformation. e.g: 1.1, 1.5...
    • Scale y: Value of Y-axis scale transformation. e.g: 1.1, 1.5...
  • Transform Translate: An effect allows you to move images to left-right or upwards-downwards. Images are translated along the X- and Y- axis.
    • Translate x: Value of X-axis translate information, in pixels. Eg: 20, 50, 100...
    • Translate y: Value of Y-axis translate information, in pixels. Eg: 20, 50, 100...
  • Transform Rotate
    • Transform RotateX: An effect allows you to rotate images along the X-axis.
    • Transform RotateY: An effect allows you to rotate images along the Y-axis.
    • Transform RotateZ: An effect allows you to rotate images along the Z-axis.
    • Rotate angle x: Angle of X-axis rotate transformation. The value is calculated by degrees. E.g: 30, 60, 90, ...
    • Rotate angle y: Angle of Y-axis rotate transformation. The value is calculated by degrees. E.g: 30, 60, 90, ...
    • Rotate angle z: Angle of Z-axis rotate transformation. The value is calculated by degrees. E.g: 30, 60, 90, ...
  • Transform Skew: An effect allows you to tilt images along the X- and Y-axis, and is calculated by degrees.
    • Skew angle x: Angle of X-axis skew transformation. e.g: 20, 40, 60, ...
    • Skew angle y: Angle of Y-axis skew transformation. e.g: 20, 40, 60, ...

Permissions Settings

Extcapp permission configuration.png


Permission settings allow to change settings (Configure, Create, Delete, Edit...) for all child groups, components and content.

9 Default Groups

  • Public: This group is the parent of all others. By default, all values are set to Not Allowed, means Denied but child groups can overwrite the value. Everyone that access to your site is public unless they log in.
  • Guest: This group is the parent of all others. By default, all values are set to Not Allowed, means Denied but child groups can overwrite the value. Everyone that access to your site is public unless they log in.
  • Manager: By default, a member of this group can do most things. But they can't access components, global permissions or component options. To become a manager, a user with higher permissions must set a user to "Manager" in the Joomla back end.
  • Administrator: Administrators are just like managers except they can access components and component options.
  • Registered: Registered users are like public users but they can access content that has been marked registered users.
  • Author: Besides the values of Registered, authors can also create and edit articles. Authors only have front end permissions to the site. They cannot access the Joomla back end.
  • Editor: Besides the values of an Author, editors can edit other people's articles.
  • Publisher: Besides the values of an Editor, Publishers can change the state of other people's articles to be published or unpublished.
  • Super Users: The admin account that is set up during installation is a super user. A super user can do everything. Super Users are the only users allowed to change global configurations.

7 Actions for every group

  • Configure: Make settings for Joomla content at front-end or back-end
  • Access Administration Interface: Set the permission for the Client User Group.
  • Create: Permission to create articles and contents.
  • Delete: Permission to delete articles and contents.
  • Edit: Permission to edit articles and contents.
  • Edit State: Permission to edit the publishing state of articles and contents.
  • Edit Own: Allow users to edit their own articles and contents.

3 Settings for each action

  • Inherited: The permissions from the parent group will be used for child groups.
  • Denied: This group can not do one function, even when the parent group can.
  • Allowed: This group can do one function. However, if the parent group is Denied, it will be Denied in the same way.

Display on Frontend

Create a Portfolio Page

Click MenusAdd new menu to create a new menu item or select a menu item from list to edit. A popup window will appear, just choose the menu item type as Adv Portfolio Pro

General Settings

Extcapp menu item.png

  • Page Display Configuration
    • Browser Page Title: Optional text for the Browser Page Title. If you leave this option blank, a default value will be used based on the Menu Item Title.
    • Show Page Heading: Show or Hide the heading of the page. The page heading is usually displayed inside the "H1" tag.
    • Page Heading: Optional alternative text for the Page heading.
    • Page Class: Add optional CSS class to elements in the Portfolio page.

Extcap menu item page display options.png

List Projects

List Projects type allows you to show many projects from categories. You need to notice List Layout settings when selecting List Projects.

Extcap list projects layout.png
  • Category: Choose categories of which projects will be showed in this list.
  • Other options are the same as options in List Layout and Transform sections of Advanced Portfolio Configuration. You can reset these options or leave them in Use Global status to inherit from the component's configuration.

Single Project

This option is used to show one project only. After choosing this, you need to choose project in Select Project option as well.

Extcap menu item single project.png

List View


When you hover to preview images from one project

Project View

  • To see the more details of the project, click on thumbnail image or permanent link below.
  • The image slides can be showed in 2 different styles.

 

Extcapp detail view 1.png

There are also caption under every picture

  • Video Mode

 

Extcapp video project.png

Create Portfolio Module

  • From Administrator site, choose Extensions → Module Manager, search for Adv Portfolio Pro module. Click in to enable and edit.

 

Extcapp module.png
 

Module Settings

Extcapp module detailed settings.png
  • Title of the module is free to be changed.
  • Show Title: Choose option to show/hide the module title.
  • Position: The position you have in a template. e.g: position-3 if you want a horizontal module.
  • Status: published, unpublished or trashed.
  • Start Publishing: An optional date to start publishing the module.
  • Finish Publishing: An optional date to finish publishing the module.
  • Access: public (for user and guest), registered (for user only).
  • Ordering: The ordering the module will be put with other modules in the same position
  • Language: Select the language to show the module in.
  • Note: An optional note to display in the module list.
  • Category: Choose categories to get projects to show on the module. Leave it blank if you want to show projects of all categories.
  • Project Order: The order that project will show in. You can choose among options: Most Recent First, Oldest First, Title Alphabetical, Title Reverse Alphabetical, Ordering or Random.
  • Limit: Limit the number of projects that will display in the module
  • Display Type:
    • Carousel: Choose carousel sliding effect for the module.
    • Grid: All elements in the module will be exactly the same as the ones in List Project.

Setting for Menu Assignment

Option menu assignment j30.png
  • Module Assignment: Choose to assign module in selected pages.
  • Menu Selection: Select menu type.

Setting for Style Options

Extcapp module style.png
  • Show Title: Option to show title of projects.
  • Show Category: Show project category.
  • Show Short Description: Option to show/hide short description of projects.
  • Show Info: Show information in the overlay.
  • Show Info Title: Show project title in the information overlay.
  • Show Info Category: Show project category in the information overlay.
  • Show Info Project Link: Show project link button in the information overlay.
  • Show Info Details URL: Show url button of project details in the information overlay.
  • Show Info Gallery: Show project gallery's preview button in the information overlay.
  • Background Info Button: Change background color of buttons on the overlay.
  • Background Info Hover Button: This option will change background color of buttons on the overlay when you mouse over them.
  • #Columns: Max number of columns in which projects are shown.
  • Overlay Effect: Choose animation to side overly or choose Hover Direction to create direction-aware move with the mouse.
  • Overlay Color1 and Overlay Color2: Change overlay colors.
  • Overlay Opacity: Enter a valid number between 0 and 100 to change opacity degree of thumbnails. E.g: 50
  • Hover Easing: Choose transition effect of moving animation.
  • Hover Duration: Set duration of overlay performance in seconds.
  • Hover Delay: Delay time before overlay effect starts, in seconds.
  • Hoverdir Speed: Speed of overlay performance when you choose Hover Direction as Overlay Effect.
  • Hoverdir Inverse: Inverse direction-aware move when you choose Hover Direction as Overlay Effect.

All the above options are applied for projects on Adv Portfolio Pro module only.

Setting for Grid Options

Extcapp module grid options.png
  • Show Filter Bar: Choose option to filter projects by tags or categories, or hide filter bar.
  • Gutter Width: Change width of spacing between columns.

Setting for Carousel Options

Extcapp module slider options.png
  • Animation: Choose an animation type of slider.
  • Speed: Set the speed of sliding in milliseconds.
  • Show Navigation: Show list of dots-navigation at the bottom of the module.
  • Show Direction Nav: Show direction arrows.

Setting for Transform Options

Extcapp module transform settings.png

Settings are the same as Transform Configuration but are applied for the module only.

Module Display

Carousel Module

Extcapp grid module display.png
Grid Module

Portfolio Pro Search Plugins

  • In order to make project contents available for Search, you have to use Search plugins.
  • At the Administration site, click on Extensions → Plug-in Manager, find Advanced Portfolio Pro plugins and enable them. Remember to enable Content - Smart Search plugin as well.
Extcapp search plugins.png
 
  • If you've already had Search module, you should take a quick look at these modules and put them in your desired positions. If you don't have Search module, click in ExtensionsModule ManagerNew to create new Search and Smart Search modules:.
Extcapp create search modules.png
 

Search

Extcapp search plugin settings.png
 
  • Search Limit: Number of search items to return.
  • Projects: Enable or disable searching in all projects.
  • Archived Projects: Enable searching in archived projects.

Smart Search

  • Enable Smart Search - Advanced Portfolio Pro plugin.
  • Go to ComponentsSmart Search and click Index button.png button to create new index.
  • Waiting in some seconds for the indexing process to complete.
Smart search indexer.png
 
  • Now all the contents of Advanced Portfolio Pro are indexed.
Extcapp manage indexed content.png
 

Support

If you have questions regarding specific details or need any help with the product, feel free to contact us and join Extstore forum.

Don't have an account yet? Register Now!

Sign in to your account