1. Description of Responsive Portfolio component for Joomla!

With the Responsive Portfolio component (RPC), you can create a sortable and filterable portfolio within a few minutes. In the frontend, the user can sort and filter the portfolio for various options (as defined in the backend). For the sort animation, different effects like fade, blur, rotate etc. can be defined, these can also be combined. The single portfolio items in the frontend use a fading effect, i.e. on hovering the item, additional information about the item is displayed.

Available types of portfolio elements:

  • Image: a single item which displays a preview image and the full image in a lightbox on clicking it
  • HTML: a single item which displays the HTML that can be entered in the backend , opens a lightbox displaying the full HTML on clicking it
  • Video: a single element which displays a preview image, on clicking it, the video is being loaded in a lightbox
  • Articles from a Joomla category: multi items which display the articles from a Joomla category, on clicking the link, you can read the full article.
  • Articles from a Joomla user: multi items which display the articles by a Joomla user, on clicking the link, you can read the full article.
  • Articles from a K2 category: multi items which display the K2 articles from a K2 category, on clicking the link, you can read the full article.
  • Products from a VM2 category: multi items which display the products from a VirtueMart2 category, on clicking the link, the user is taken to the product in the shop

In the backend, the portfolio configuration can be done very easy. Just create a Portfolio and assign some portfolio items - thats it.

When your portfolio and portfolio elements are created to your needs, you have 2 way to display the Portfolio in the frontend: either as 'normal' component by creating a menu item, or by using the RPC plugin which allows displaying the component in a normal article.

2. Installation

In your Joomla backend, click on Extensions -> Extension Manager and select Install. Now select your package file and click on Upload & Install. After a successful installation, the RPC and RPC plugin can be used.

3. Backend Configuration

3.1 Creating a new Portfolio

In your Joomla backend, click on Components -> RPC - Responsive Portfolio -> Portfolio Manager. If this is your first portfolio, you'll see a empty list, otherwise, you'll see a list of existing Portfolios. To create a new Portfolio, click on New , now the Portfolio creation view opens, and you can configure your Portfolio.

3.1.1 The Details Tab

In the Details tab, enter a name for your Portfolio, and an alias (the alias should contain letters, numbers and the hyphen only). Choose whether you want to load the jQuery framework in the frontend or not (this is useful if your template already loads the jQuery framework). Next, choose your sorting effects for the Portfolio items. Click the box and a dropdown will open displaying all available sorting effects. You can combine any of these effects, e.g. fade only, or fade and scale, or you can choose all. Available sorting effects are: fade, scale, rotateX, rotateY, rotateZ, blur and grayscale. Depending on your choice, the Portfolio will use these effects when the items are being sorted or filtered. The next step is to choose your easing effect. Easing occurs at the beginning and at the end of the animation, you can choose from smooth, snap, windback and windup easing. Now select your animation duration, you can choose from 0ms to 3000ms, in steps of 100ms. This defines how long the sort process lasts. Filter logic is the next setting, here, you can choose from OR or AND, this setting controls the filtering algorithm. The initial display mode is set next, choose from list view or grid view. List view displays all items as a list with additional information (this can be edited in the single Portfolio elements), grid view displays the items in a grid without additional information. This setting can be switched in the frontend by clicking the respective button. The last setting in the Details tab is the main filters. This setting defines your filters for your single Portfolio items for which you can sort and filter. The respective tags for your filters will be configured in the single Portfolio items. Please note: you should not use too much filters (we recommend using max. 4 filters), otherwise, the display will get very confused in the frontend.

Addendum: main filters consisting of numbers only or numbers first cannot be generated.

3.1.2 The Advanced Tab

In the Advanced tab, you can set for the grid view the number of items per line on different display resolutons, i.e. for desktops, tablets and smartphones. Default settings are 4 items per line for desktops, 2 items per line for tablets and 1 item per line for smartphones. You can change these values, however, you always should check the frontend if changing these settings suits your needs. Next is the transition effect for the portfolio items. When you hover the single items in the frontend, the item will get overlayed by a container with additional information and a action button, e.g. read more, view the article, etc. You can choose from 13 different transition effects, these effects are explained in the tooltip. You can find the list below also:

  • Effect 1: light background zoom + foreground from top and bottom.
  • Effect 2: foreground fades in step by step with a small delay.
  • Effect 3: foreground fades in from the lower bottom using a tilting movement.
  • Effect 4: background reduces towards the middle, foreground enlarges from the middle in a twisting movement.
  • Effect 5: foreground pushes the background from top towards bottom.
  • Effect 6: foreground pushes the background from right towards left.
  • Effect 7: foreground pushes the background from bottom towards top.
  • Effect 8: foreground pushes the background from left towards right.
  • Effect 9: foreground zooms in.
  • Effect 10: background disappers in a swirl, foreground from top.
  • Effect 11: foreground pushes from top to bottom and hops 2 times.
  • Effect 12: foreground unfolds in a rotary motion from top left.
  • Effect 13: background zooms out fast, foreground zooms out slow.

The last setting control the preview image maximization, when enabled, it sets all preview images to fill the preview container. Please be careful when using this setting, if you use small images, they may get skewed. We recommend using preview images in 16:9 (or 4:3) format, and using a width of at least 400px.

3.1.3 The Meta Data Tab

In the Meta Data tab, you can set the meta description and meta keywords for your Portfolio. Meta data is used by search engines for generating better search results and for better description of your page content. You should add a small but meaningful description of your Portfolio.

3.1.4 Save your Portfolio

When you're done configuring your Portfolio and have entered all necessary data, click on Save to save the Portfolio and get back to the Portfolio Manager.

3.2 Editing a existing Portfolio

Editing a existing Portfolio is basically the same procedure than creating a new one, except that you click Edit instead of New, or click on the Portfolio name in the Portfolio Manager.

3.3 Creating a new Portfolio element

In your Joomla backend, click on Components -> RPC - Responsive Portfolio -> Portfolio Element Manager. If this is your first Portfolio element, you'll see a empty list, otherwise, you'll see a list of existing Portfolio elements. To create a new Portfolio element, click on New , now the Portfolio element creation view opens, and you can configure your Portfolio element. Available Portfolio elements are:

  • Image
  • HTML
  • Video
  • Articles from a Joomla Category
  • Articles by a Joomla user
  • Articles from a K2 category
  • Products from a VirtueMart2 category

Next, we'll introduce each element type separately:

3.3.1 Creating a Image type Portfolio element

First, select Image as portfolio element type, enter a name for your image element and select the Portfolio you want to assign your image element to. Click on Save to save the Element and continue with the configuration.

Next, publish or unpublish your element. The next setting is the preview image, select your preview image by clicking the Select button. Now a lightbox opens in which you can choose your preview image, browse to your image, click it and click on Insert to get back to the element configuration view. Repeat this step for your Original image.

Please note: for best results, your preview image should be at least 400px in width, and in a 16:9 or 4:3 format, your original image can be any size. Now enter a image description, this description will be used in the overlaying transition when hovering the portfolio item in the frontend.

Next, set your tags for the main filters you defined in the portfolio. The more main filters you defined, the more options you have here. To add a tag, click on the textbox and enter your tag, use space or return to confirm the tag. You can add as many tags as you like, but please remember that the frontend user can filter for these tags in the frontend, you you should not use too many tags. Now enter your description for this main filter, it will be used in the list view as additional information about the item.

Repeat the last 2 steps (entering tags and main filter description) for all main filters in your list. Optionally, you can leave these fields empty, however, a frontend user cannot sort for these filters in this case.

Save your image Portfolio item and go back to the Portfolio Element Manager

3.3.2 Creating a HTML type Portfolio element

First, select HTML element as Portfolio element type, enter a name for your HTML element and select the Portfolio you want to assign your HTML element to. Click on Save to save the Element and continue with the configuration.

Now publish or unpublish your element, and enter the custom HTML content for your HTML element. This custom HTML content will be used as preview and full display in the frontend.

Next, set your tags for the main filters you defined in the portfolio. The more main filters you defined, the more options you have here. To add a tag, click on the textbox and enter your tag, use space or return to confirm the tag. You can add as many tags as you like, but please remember that the frontend user can filter for these tags in the frontend, you you should not use too many tags. Now enter your description for this main filter, it will be used in the list view as additional information about the item.

Repeat the last 2 steps (entering tags and main filter description) for all main filters in your list. Optionally, you can leave these fields empty, however, a frontend user cannot sort for these filters in this case.

Save your HTML Portfolio item and go back to the Portfolio Element Manager

3.3.3 Creating a Video type Portfolio element

First, select Video as Portfolio element type, enter a name for your video element and select the Portfolio you want to assign your video element to. Click on Save to save the Element and continue with the configuration.

Now publish or unpublish your element, the next setting is the preview image, select your preview image by clicking the Select button. Now a lightbox opens in which you can choose your preview image, browse to your image, click it and click on Insert to get back to the element configuration view. Repeat this step for your Video URL, but instead of browsing to a local file, enter the video's URL (youtube or vimeo) in the URL field. To get the Video URL, browse to a video on youtube or vimeo, and copy the video's address from the browser's address line. Please note: for best results, your preview image should be at least 400px in width, and in a 16:9 or 4:3 format, your video can be any size. Now enter a video description, this description will be used in the overlaying transition when hovering the portfolio item in the frontend.

Next, set your tags for the main filters you defined in the portfolio. The more main filters you defined, the more options you have here. To add a tag, click on the textbox and enter your tag, use space or return to confirm the tag. You can add as many tags as you like, but please remember that the frontend user can filter for these tags in the frontend, you you should not use too many tags. Now enter your description for this main filter, it will be used in the list view as additional information about the item.

Repeat the last 2 steps (entering tags and main filter description) for all main filters in your list. Optionally, you can leave these fields empty, however, a frontend user cannot sort for these filters in this case.

Save your video Portfolio item and go back to the Portfolio Element Manager

3.3.4 Creating a Articles from a Category element

First, select Articles from a Category as Portfolio element type, enter a name for your articles from a category element and select the Portfolio you want to assign your articles from a category element to. Click on Save to save the Element and continue with the configuration.

Now publish or unpublish your element. Next, select your category from which the articles should be taken, choose the number of words for the preview (in case there is no image assigned to the article), and save again.

The tags and main filter description for a Articles from a Category element is a bit different than in image, HTML and video elements, since there can be multiple articles in one category. You will now see for each article from the category you chose a tags/description setting , so you can add tags and description for each article from the category.

When you're done adding tags/description to all articles, save your Articles from a Category Portfolio item and go back to the Portfolio Element Manager.

3.3.5 Creating a Articles by a Joomla User element

Configuring this element is basically the same as in 3.3.4. The only difference is that you do not select a category, instead you select a joomla user who has written the articles.

3.3.6 Creating a Articles from a K2 category

This element type is only available if the K2 extension is installed. Basically, configuring this element is the same as in 3.3.4 , the only difference is that you select a K2 category instead of a normal Joomla category.

3.3.7 Creating a Products from a VirtueMart2 category

This element type is only available if the VirtueMart2 extension is installed. Basically, configuring this element is the same as in 3.3.4 , the only difference is that you select a VirtueMart2 category instead of a normal Joomla category.

3.4 Editing a existing Portfolio Element

Editing a existing Portfolio Element is basically the same procedure than creating a new one, except that you click Edit instead of New, or click on the Portfolio element name in the Portfolio Elements Manager.

3.5 Using the Portfolio Manager

In the Portfolio Manager, you can search a Portfolio by entering a search term in the search field. Additionally, you can sort the Portfolio list by ID or Portfolio name. If you want to use the RPC plugin, you can copy the plugin shortcode directly from the list and add it to a normal joomla article. To delete one or more Portfolio(s), tick the Portfolio(s) you want to delete and click Delete.

3.6 Using the Portfolio Elements Manager

Additionally to the search and sort functionality, you can also filter for the single Element types and Portfolios in the portfolio Elements Manager. You can also set the ordering, activate the ordering functionality by clicking on it, now you can set the ordering by drag'n'drop on the single elements. From the Portfolio Elements Manager view, you can also Copy, Delete and Publish / Unpublish one or more Portfolio Element(s).

4. Frontend output

4.1 Displaying your Portfolio in the frontend

Your portfolio can be displayed by 2 different ways: Either as a normal menu item, or via the RPC plugin.

4.1.1 Your Portfolio as menu item

To display your Portfolio as a Joomla menu item, click on Menus, select your menu and click New. Now choose you Menu Item Type, click Select and choose RPC - Responsive Portfolio -> Single Portfolio. Next, choose your ortfolio from the list and enter a Menu Title for your menu item. Save your menu item, and check your frontend, there, you should see your newly created menu item. Upon clicking it, your Portfolio will be displayed.

4.1.2 Your Portfolio in a article via the RPC plugin

By using the RPC plugin, you can display your Portfolio in a normal Joomla article also. The RPC plugin is already installed and activated upon installing the RPC component, to check the plugin, go to Extensions -> Plugins Manager, and search for RPC. You should now see the RPC plugin, activate it if it is not activated.

Once activated, you can use the tag {rpc=id} (replace id with the actual id of your Portfolio) to display your portfolio within a Joomla article. You can get the tag also from the RPC Portfolio Manager, in the Portfolio list, the Plugin Shortcode is displayed for each single Portfolio, just copy and paste it to your article.

4.2 Using the Portfolio in the frontend

4.2.1 List View

The button labelled List view switches the portfolio in the List view, i.e. your Portfolio elements are displayed as a list with additional information. Yo can sort for name and all additional tags you entered in the backend by clicking the small arrow icons in the header bar.

4.2.2 Grid View

Grid view switches your Portfolio to the grid view, where all items are displayed without additional information, only the respective links for readmore (article), enlarge (image), etc. are being displayed on hover.

4.2.3 Randomize the Portfolio

The randomize button shuffles your items to a random order.

4.2.4 Main filters

Below the view mode buttons, you can find your main filters. Filters are used to filter your Portfolio for various tags which you defined in the backend. The more filters you created in your backend, the more you will see here. Hover your filters to see the list of tags, click a tag to filter your portfolio for this tag. Each main filter contains all tags from all Portfolio Elements you defined in the backend, and you can filter for all these tags.

4.2.5 direct link to a filtered output

During filtering, you may notice that your URL will change dynamically, depending on the filtering option you select. If you want the site to load directly with these filtering options active, all you have to do is to copy the URL from your browsers address line. If you open a new tab and paste this URL in your address line, the Portfolio will automatically filter according to the URL's options.

4.2.6 Hovering single elements

When hovering the single Portfolio elements, a overlay will appear which allows additional action. Images can be enlarged, videos can be viewed and articles/products can be linked to.

5. Upgrading the Portfolio Component

5.1 Upgrade process

Upgrading the RPC Portfolio component is very easy: just install the new version over the already installed old one. Everything else is done automatically. Afterwards, you can use the Component as always.

Please note: always backup before upgrading!

5.2 Upgrading to V1.4.0 from versions 1.3.5 or prior

V1.4.0 of our Portfolio contains a breaking change. This was necessary due to supporting non-latin characters as filter tags.

If you upgrade to V1.4.0 from version 1.3.5 or prior, you must re-enter and save your filter tags that contain non-latin characters, like e.g. umlaut characters, greek or cyrillic letters.

As always: backup first before doing any changes!

6. New features in V1.6.1

Version 1.6.1 brings a new automatic thumbnail creation system. The advantage is, the Portfolio will now load faster, since now, small thumbnail images will be loaded instead of the (large) full images. This should significantly improve loading time. The size of the thumbnail images can be defined in the portfolio settings. For a description of the upgrade process, please refer to point 5 above.

6.1 Re-creating thumbnails

The thumbnail images will be cached in the Joomla installation. If you change the image of a existing portfolio element, the thumbnail must be re-created.

To do so, browse to your Portfolio page in the frontend, and add the Parameter renew=1 to the respective URL.

Example: if your URL to your Portfolio is: http://domain.com/portfolio.html, then add renew=1, so the final URL looks like this: http://domain.com/portfolio.html?renew=1

All thumbnails will now be re-created and the portfolio will reflect the changes.


Frequently Asked Questions

1. The Portfolio doesn't work ...

This is a jQuery issue in most cases. Check your browser's console for errors, and make sure that the jQuery library get loaded correctly and doesn't get loaded multiple times. You can also use a plugin like jQuery easy which resolves jQuery clashes when loading jQuery multiple times.

2. Do you support K2?

Yes, K2 is supported. If the RPC Component detects that K2 is installed, you can use the 'Articles from a K2 category' element type in your portfolio, this is similar to the 'Articles from a joomla category' type, but takes the K2 content instead.

3. What about VirtueMart2?

VirtueMart2 is supported, however, VM2 is only available for Jooma 2.5 at present, so this element type can only be used when you're using J2.5 and have VM2 installed. As soon as VirtueMart2 supports Joomla 3.x , our Portfolio will also support using VM2 elements in the Portfolio on Joomla 3.x. Please note that the availability of VM2 for Joomla 3.x depends on the VM2 developer.

4. How can I change the look of the Portfolio in the Frontend?

All designs are stored in the Portfolio's CSS file. Please refer to the separate CSS manual we provide on our site if you need more information about changing the design of the Portfolio.

5. What about the sorting/filtering speed of the Portfolio

This depends heavily on the number of Portfolio elements, the user's machine and even on the user's browser. The more elements that need to be sorted/filtered, the more computing power is needed. If you e.g. have 100 elements in your Portfolio, a slow machine (smartphone, tablet, etc) might get problems displaying the sorting animation smoothly, but of course this depends on the speed of the machine. We also recommend using hardware accelerated browsers, like e.g. webkit based browsers, which generally deliver a better sorting performance than non-accelerated browsers.

2013-10-28