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 Extension → Extension 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 Components → Advanced Portfolio Pro

• 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 button to create a new category.

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 → Projects → to create a new project. The Title of each project is required.

Setting for Details

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

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

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

Publishing, Project and Metadata Options

Publishing Options	Parameters
	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 Options

Parameters

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 Options

Parameters

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

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.

• And/Or input tags directly in the project.

 

Configuration

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

General Settings

• Image Upload Path: Set the path or folder to store images.
• Image Cache Path: Set the path or folder to store cache images.
• Image Cache URL: Set URL for cache folder. E.g: http://example.com/cache/advportfoliopro or http://image.example.com
• Image Quality: Set the quality of images to be displayed.

Projects Settings

• 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.
  
• Grid Column: Shows when you choose Grid for Layout Type option. You can change number column of Grid.
  
• Animation for Slider: Shows when you choose Slider for Layout Type option. You can choose an animation for Slider such as Fade, Cube, Coverflow or Flip.
  
• Show Navigation Slider: Shows when you choose Slider for Layout Type option. You can choose Yes/No to Show/Hide Next/Previous button for Navigation Slider.
  
• Show Pagination Slider: Shows when you choose Slider for Layout Type option. You can choose Yes/No to Show/Hide pagination on Slider.
  
• 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.
  
• Next/Prev 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.
  
• Button Go Back: Choose No/Yes to Hide/Show button go back.
  
• Label: You can change Label on the button.
  
• Link: When you press button go back. It will direct to this link.
  
• Button Position: Set the button position to the above/ below the image.
  
• Alignment Button: Horizontal alignment of Go Back button include Left/ Center/ Right.
  
• Background Back Button: Change background color of Go Back Button.
  
• Background Hover Back Button: This option will change background color of Go Back Button on the overlay when you mouse over them.
  
• Title: Choose to show or hide the title of projects.
  
• Show Description: Select On/ Off to Show/ Hide the project description on the project detail page.
  
• Description Position: Set the description position to the right, left, bottom or top of image slide/video.
  
• Description Width: Width of description.
  
• Unauthorised Links: Show or not show links of registered contents when users are not logged-in. All the above options are applied to all projects. If you want to make changes in a specified project, you need to set in that project privately.

List Layout Settings

 

• 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 Filter All: Allow you Show/Hide Filter “All”.
  
• Background Filter Selected: You can change the background of the filter buttons.
  
• Background Filter Hover: Change the background of the filter buttons when you mouse over them.
  
• 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 Gallery Popup or Detail Page.
  
• Link Of Project: Choose Project URL to open the external link (that is added at Project URL section) when visitors click on project thumbnail and title. Choose Default to open the page default single project when visitors click on project thumbnail and title.
  
• 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.
  
• 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.
• Load More: You can choose Yes/ No to Show/Hide Load More. In the same page, you can view all the projects. Click Load More until the project is over then the button will be hidden.
• Number Item Load: Appear when you choose Yes Load More. You can change number project will show when pressing Load More.
• Pagination: Apper when you choose No Load More. 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

• Transform Scale: An effect allows you to shrink or enlarge images by the scale factors. 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

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 backend.
• 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 backend.
• 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 superuser. A superuser 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 cannot 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 Menus → Add 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

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

Category List

Category List type allows you to show many projects of one category. You need to notice List Layout settings when selecting Category List.

• Menu Item Type: Click on Select button => a popup will appear, click on Advanced Portfolio Pro => Category List.
• Choose A Category: Shows if you choose Category List for Menu Item Type option. Select a project category from the list

List Projects

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

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

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.

There are also caption under every picture

• Video Mode

Create Portfolio Module

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

 

Module Settings

• 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

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

Setting for Style Options

• 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

• 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

• 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

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

Module Display

Carousel Module

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.

 

• 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 Extensions → Module Manager → New to create new Search and Smart Search modules:.

 

Search

 

• 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 Components → Smart Search and click button to create new index.
• Waiting in some seconds for the indexing process to complete.

 

• Now all the contents of Advanced Portfolio Pro are indexed.

 

How To Remove ID From URL

Step 1: Create Portfolio View Category Menu

In case, if you don’t want to show those view category pages on your website, you can create those pages in the hidden menu.

From Dashboard => Menu => Main Menu/ Hidden Menu => Add New Menu Item

• » Menu Item Type: Click on Select button => a popup will appear, click on Advanced Portfolio Pro => Category List

• » Choose A Category: Shows if you choose Category List for Menu Item Type option. Select a project category from the list.

Step 2: From Dashboard => Components => Advanced Portfolio Pro Configuration => Integration tab => Choose Morden for URL Routing and choose Yes for Remove IDs from URLs option

Click on Save button to save any your change. After all, the project IDs will be removed from URL

Support

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