Tuesday, 03 May 2016 19:11

Advanced Portfolio Pro

Written by

This is the how to use advanced portfolio

General

  • you can have nested categories
  • there is an inbuilt media mamanger

Projects

  • Projects are the individual Items
  • a project has a list view and a details view (like mosets)
  • you must create category before you can create a project
  • you can select images or videos for the project type
  • Either have a video gallery or an image gallery for the project
  • you can upload mutiple images at once
  • you can make 1 project featured

** From official project notes

https://extstore.com/support/documentation/components/advanced-portfolio-pro#usage

  • Project URL: Enter a valid url in this field. This url will be used for Permalink button on the project's overlay (list view) and Launch Project in the project view (details view).
  • 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. (details view)

Categories

  • This is just your basic container for the projects
  • A category cand be used to group a load of projects together ie groups

Menu

  • In the menu item it is possible to select which categories you want to display

Image Settings and their description

There is no direct control of gallery/slider image sizes. I have added it to the forum

These are where you can control the images, it can be a bit awkward at first but when you have read the list below it all makes sense.

General/Default Settings

  • Configuration settings (General layout tab)
    • Image quality
    • File Locations
    • Watermark
  • Configuration settings (list layout tab) (thumbnails)
    • Image width
    • Image height – fixed height or auto to keep ratio with width
  • Configuration settings (details layout tab)
    • You can set the description box width (1 – 11, bootstrap?) which alters the image size by proxy
    • There are no direct settings to control the sliding image sizes
  • Configuration settings (transform tab) (thumbnails)
    • These control animation effects when you hover over a thumbnail
    • Scale – animate bigger or smaller
    • Rotate – rotate the image
    • Skew – like ringing a cloth or trapezium shape

Category Settings

  • Category (Options Tab)
    • Image – set an image for the category

Project Settings

  • Project (Project Options Tab) per project setting which will override the defaults
    • Description Width (on details page)
    • Image width (project thumbnail)
    • Image height (project thumbnail) – fixed height or auto to keep ratio with width

Menu Item Settings

  • Menu Item (list layout tab) - will override the defaults
    • Scale (project thumbnail)
    • Rotate (project thumbnail)
    • Skew (project thumbnail)

My Prefered Settings

Apply these settings or as required

  • Project details description width = 6

My Fixes

These fixes should all be applied as needed

List styling is turned off / Enable bullet list icons

This prevents me adding any custom icons for my list items or just using the themes.

In media/com_advportfoliopro/css/style.css line 749, I disabled the following block of code

.portfolio-module ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

'Go Back and 'Launch Project' Buttons are not in the middle

/* Launch Project Button to the middle */
.project-wrapper .project-link {
	margin: 18px 0;
	padding: 10px 0 0;
	border-top: 1px solid #E5E5E5;
}

style.css:691
+ text-align: center;

 

/* Go Back Button to the middle */
.btn-go-back {
	border: medium none;
	color: #ffffff;
	font-size: 16px;
	margin: 15px 0;
	padding: 15px 30px;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.4s;
	background: #008cba;
	border-radius: 4px;
}

style.css:654
+ display: block;
+ margin: auto auto;

Does not work well because it is in a 100% width div spanning both columns

Change Launch Project Name

It is controlled by

COM_ADVPORTFOLIOPRO_LAUNCH_PROJECT="Launch Project"

Override / Change in language translation thing via Joomla

  • Make sure you select site and English before creating a new override
  • Call it ‘Launch Website’

Make list items same height

  • jsn-time changes it to uses class 'jsn-com-advportfoliopro' and not 'com_advportfoliopro'
  • .com_advportfoliopro is not 100% required

This is my first attempt to keep all of the list ietms the same height. It is better than nothign but there seems a bit of difference between how Firefox and Chrome handles this.

/*-- Advanced Portfolio - unify list item height --*/

/* - This is not 100% - */

.com_advportfoliopro .project-item-meta {
    min-height: 300px;
}

@media only screen and (max-width: 975px) {
    .com_advportfoliopro .project-item-meta {
        min-height: 400px;
    }
}

@media only screen and (max-width: 783px) {
    .com_advportfoliopro .project-item-meta {
        min-height: 650px;
    }
}

@media only screen and (max-width: 631px) {
    .com_advportfoliopro .project-item-meta {
        min-height: 700px;
    }
}

/* (this is where 3 columns goto 2 columns) */
@media only screen and (max-width: 615px) {
    .com_advportfoliopro .project-item-meta {
        min-height: 400px;
    }
}

Building a Portfolio

Image Names and Sizes

You need images for your protfolio item so these are some pointers on their sizes and names. I use Firefox addon called Fireshot

suggested sizes

  • Thumbnails - 100x100, 300x300, 600x600 (all square)
  • Project Details - 1280x720, 640 x 320 (all widescreen). You can use other sizes if they keep the same ratio.

Suggested Names

All pages have these areas so do not need a page name in. The header will either have the slider or not, you do not need 2 images, one  with and one without.

  • Header
  • Content
  • Footer
  • Special images (gallery.jpg, testimonals.jpg...)

Special features, they do not need page references

  • gallery
  • testimonials
  • thumbsgallery
  • contact-form

Aquire an image with FireShot

This is quite straight forward when you have got things configured. Using Firefox:

  • install FireShot addon
  • install webdeveloper toolbar addon
  • create a custom  'Resize Dimension' in the webdeveloper toolbar
    • Goto Resize menu --> Edit Resize Dimension
    • add a new dimension called 'Advanced Portfolio' with the dimensions 1313 x 720. (The weired dimensions account for the scroll bars and once an image is taken the dimensions end up correct)
  • Under the 'Resize' menu select 'Advanced Portfolio' to resize the browser windows
  • take an image with FireShot by clicking the 'S' icon in your toolbar at the top (or wherever)
  • verify the image's dimensions

Workflow to create 1 list item

Here I will outline the rules I used for makinga single project item. These are obviously forcused on websitres but can easily be applied to other variations.

  • Create a Category called ‘Website Portfolio’
  • Pick a website
  • Get the images
    • Screen grab the pages of the website (1280 x 720 – use FF FireShot window resize)
    • Keep originals and always use ‘save as’
    • Currently all images need to be the same height otherwise the gallery/slider goes up and down to show each slide.
    • Take images of specific areas (1280 x 720 or possible 640 x 360) using the Fixed Size select tool in Paint.Net (use pixels)
      • When using selection tool be very careful you have got all of the area selected. It is very precise
      • Zooming in helps
      • Images should be W x H – alter in paint.net as needed (all need to be same size details = 620x400 thumbnails = 300x300, image width 8, detail width 4)
      • Use 1280 x 720 and 90% quality jpg (set FireShot to 1313 to get 1280 images this is because of the scroll bars width)
    • Create thumbnail (home-page or other image) – using paint.net
      • get full home page image
      • set the secondary colour to e6e6e6 / ececec
      • expand canvas width to match height giving a square (note the secondary colour will fill the gap
      • resize to whatever (300x300)
      • save as jpg 90% quality
  • Create a project - Use the JSN Template name for the Project
  • Short Description - Write a 1 line describing the template
  • Long description – bullet point the aspects of the theme (maybe add things like the slider)
  • Create a folder for the template – should be the same as the project name
  • Upload the altered images to the CORRECT folder
  • Give the images titles in advanced portfolio (as per rules)
  • Set the thumbnail
  • (optional) add each entry to the demo toolbar. The short description and thumbnail (resize to 100 x 100, the extstore demo resizes 600 x 600 to 100x100 lol)
  • Order of images
    • Header
    • Content
    • Footer
    • Special images (gallery.jpg, testimonals.jpg...)
  • Advance Pro image names/titles – Just capitalize the image name ie 'content' --> 'Content'

Examples

Short Description (HTML)

<p>A light and versatile modern theme ideal for small companies who want to be presented as professional but accessible.</p>

Long Description (HTML)

<p>&nbsp;</p>
<ul style="display: table; margin: 0 auto; list-style-image: url('/images/common/tick.png');">
    <li>Responsive / Mobile Friendly</li>
    <li>Light</li>
    <li>Modern</li>
    <li>Versatile</li>
    <li>Animated Slider</li>
</ul>

Keywords

  • Responsive / Mobile Friendly
  • Clean
  • Simple
  • Dark
  • Versatile
  • Modern
  • Fresh
  • Adaptable
  • Animated Slider
  • Professional
  • Slider
  • Funky
  • Light
  • Eye Catching
  • Visually Attractive
  • Corporate
  • Impressive
  • Unique
  • Informative
  • Popular
  • Accessible
  • SEO Friendly
  • Expandable
  • Inspired Design
  • Warm
  • Easy to look at
  • Refreshing
  • Straight Forward
  • Multi Purpose
  • Family
  • Homely
  • CTA
  • Call To Action
  • Increased Conversion
  • Elegant
  • Colourful
  • Functional
  • Interesting
  • Memorable
  • Personal

Notes

  • The thumbnail are not cropped but ‘strectch by X-axis’.
  • Having images in the gallery of different heights can cause the cycling of images to be a bit crap. As it goes up and down
  • All images use the cached reduced quality version
  • Gallery is in a responsive modal box so there are no settings for this but does use the cached version
  • don’t forget it has a search plugin, smart search plugin and carousel module
  • contains the actuall script
    • C:\Desktop\com_advportfoliopro_v3.8.1_j3\media\js\script.js
    • C:\Desktop\com_advportfoliopro_v3.8.1_j3\site\views\project\tmpl\default_images.php
    • /public_html/components/com_advportfoliopro/views/project/tmpl/default_images.php
  • transform tab description should make a note that it is the thumbnail animation
  • When you make all images have the same heigh (720px), some are thinner than others because they are stretched along the width and then then grow taller because of this to maintain ratio.
  • Autoheight – changes the physical size of the container, id does NOT resize the image
  • Owl carousel is the library used and is not good at image resizing

 

Read 1495 times Last modified on Thursday, 02 February 2017 15:10
Published in Joomla Extensions
back to top