Portfolio PRO Manual
Portfolio PRO Manual for Joomla 1.5, 1.6, 1.7 and Joomla 2.5
The 40° Portfolio extension (component) for Joomla! 1.5, 1.6, 1.7 and 2.5 is a Mootools driven Portfolio with stunning sliding effects and a great Lightbox system that allows your visitors to open multiple lightboxes that can be moved around.
The portfolio uses standard Joomla! categories and articles, so it is easy to maintain and setup just like any other article you use in your Joomla! website.
Important Notice: Your webserver needs to have cURL support and correct permissions for Joomla! to create the fdthumbs folder within the images folder.
In case the permissions are not correct you will have to create the fdthumbs folder within your Joomla's images folder manually and set the correct permissions for Joomla! to create the thumbnails in there.
Any jQuery script has to be put into noConflict() Mode. Otherwise the portfolio will display and endless loading circle!
So let's start with the setup procedure.
First install the component as usual from th Extension Manager in Joomla!.
Article Creation
Now create the categories you want to display in your Portfolio.
Into those categories the articles that are displayed in the portfolio are created now.
We use the JCE Editor, so the layout in your backend may vary.
Create the article (one per portfolio item) and insert the images you want to use in the Portfolio.
If you want to show a description on the thumbnails you need to insert a paragraph tag with the class "fdtDesc". Into this p tag insert the 2 lines of description (titel & subtitle) divided by a break.
Each image should get an Alt Tag, a Title and the Class should be set to "fdImage". Only images with this class will be recognised by the portfolio component. And the Title will be displayed in the Portfolio details.
The images should keep original size and aspect ratio.
Repeat with all images you want to insert.
If you want to insert a link into this portfolio item, insert a Paragraph (<p> </p>) and give it the class "fdDescription" and insert a link if you want to display one in the portfolio.
The link has to start with a href= ... followed by title and alt tags.
Otherwise your link will not be recognized by the portfolio system.
That's the left part for the portfolio detail view. To define the right part insert a "read more" now.
Next put in your description text into another paragraph that should also get the class "fdDescription" to get recognised by the portfolio.
That's it. Repeat until you created all the articles you want to display in the portfolio.
Portfolio Setup
After you set up all the articles it's about time to get the Portfolio configured.
From the Extensions Menu open the 40° Portfolio and enter the Options.
The first tab is about the portfolio categories.
Simply select the categories created before to be displayed in the portfolio.
The next tab is the Thumbnail Configuration where you can set the thumbnails width and height.
The third tab is the Layout Settings.
These settings define how many rows and columns you want to use and the heights and widths of your portfolio, as well as the setup of a shadow under the thumbnails.
For the gallery modes you can enable or disable the gallery mode for each category.
You also have the possibility to enable or disbale the thumbnail descriptions (titles) and to define if they should be static or only on mouse hover.
Nothing too complicated here. Just one thing should be mentioned here.
Depending on the set "Portfolio details height" the ratio of your detail images will be calculated.
So maybe you will need to play with these settings a bit before it looks perfect.
Now save the Options and switch to the Thumbnail and Portfolio Image Generator.
You have two options here.
By clicking the first Icon (single image deck) only new thumbnails and images will be pulled from your articles and added to the portfolio images. (Usefull if you just added a new portfolio article).
By clicking the second Icon (multiple images deck) all thumbnails and images will be pulled from your articles and added to the portfolio images by overwriting the already existing ones.
This will be necessary every time you change the Portfolio Layout Settings or Thumbnail sizes!
Congratulations. Your portfolio is set up and ready now. Enjoy this stunning portfolio component.
Here is an example code of a correct article setup:
