LuckyMarble / i3dthemes: Wordpress 'Theme' Tutorials
Section 7: Working with Media Components
Exercise 7-1: Working with the Portfolio Component
** included with the 'Primary' layout only
For any component or web page using 'media' such as images or movie files, you will first upload that media to the Media Library. Please review Section6 - Working with the Media Library for tutorials on uploading and working with images.
Working with the Portfolio or any component that displays Media such as 'images', you first need to upload the 'media / images' to your theme, then you can size and import them for use in a 'Media Component' such as the Portfolio. Let's start with a quick review on working with the Media Library to upload your new images for the Portfolio, then we'll tackle the Portfolio component itself.
The Media Library allows you to upload your Media files such as images, PDF and video. Once you've uploaded your images, you can resize, scale, crop and adjust the images to 'fit' into your Media Components ( such as the Portfolio, or Image Rotator components ).
For 'best' results, we recommend that you resize ( scale or crop ) your images to fit the component they'll be displayed in.
One of the best features of the Wordpress theme, is the Media Library. A place where you can upload and save all your 'Media' files.. if it can be displayed in a web page, it can probably be uploaded to the Media Library. Once uploaded, you can assign special properties such as a file name, title, description, and alternate names for screen readers.
The 'Media Library' is shared, so any components that use 'Media' will pull from this central Library. All of your themes 'Components' share the same Library, so learning to use the Media Library means you only need to learn once, then it's the same process for all media components.
The Portfolio is a 'Flash based' image component included with the 'primary layout' only. The Portfolio is able to display any number of images and depending on the 'theme' the portfolio may also display 'thumbnail' or 'preview' buttons that also include a 'Title' and 'short description'. The preview buttons provide two functions. When hovered over, the larger image switches to match the preview, and when the preview button is clicked on, the visitor is taken to the 'linked' page.
The Portfolio is a combination of image 'Gallery' and 'Banner Ad' as it can accommodate 'both' types of functions. You can use the Portfolio to simply display images. You can also use the Portfolio to display 'ADS' or 'product shots'. Many users of the Portfolio display images for upcoming events, or past events, and link these images to a page containing information on these events. If you are selling products on your website, this would be a great tool for advertising your products and linking directly to the product details page or catalog page.
To open the Portfolio editing panel:
The Expand button includes an important function, by clicking on the Expand button, additional 'Properties' are revealed for each image
The 'Title' is displayed by the Portfolio's 'preview' button, as the button's 'Title'.
The 'Short Description' is often ( but not always ) used for the 'preview' button. Not all themes include this function, you'll know if you theme does by viewing the 'Home' page, and looking at the Portfolio buttons. If your theme displays 'preview' buttons, you will probably see a 'First Topic' which is the 'Title' and if there's any smaller text included with the preview button, that'll be the 'Short Description' .. basically, it's 'teaser' text, describing what that button does.
You can leave the 'Short Description' field blank, or enter a few words to help describe what this button is linked to.
The 'Long Description' is the text that is displayed along with the 'larger' image.
To edit, simply delete the default dummy text in the 'Description' field, and type in your own text. As with the 'Title' this requires a bit of 'testing' as you go. Although the 'Description' text field displays a lot more characters, you'll need to 'save and preview' as you go to make sure some crucial information isn't left out. You may need to reword, or remove some wording to enable all the important info to fit into the available space.
If you want the preview button to link to a web page ( or the 'click me' text in the description ) ....
The 'Link Label' is a 'clickable' bit of text, located at the 'end' of the 'Description' ... you've probably seen this type of clickable text on many websites, usually it's something simple like ( ...click here to learn more ) or just ( ...more ) ... the Link Label provides a link between the image and description, and the web page the image/description are related to. If for example your image was depicting an upcoming event, and the description was describing that event, you could finish the 'description' off, by linking to a web page in your site, with details of the event, or a sign up page ... also great for 'product information' a description followed by a link to the product page.
You can modify 'how' the linked page for your 'preview' buttons, or 'Link Label' function. By default, when you click on a hyperlink in a web page, it opens the page in the same window. If you are linking to a web page that is 'not' located in your website, you may want to set that link to open in a new browser window, so your visitor doesn't actually leave your website, or need to press the 'back' button in their web browser, in order to get back to your website.
You can change the 'target' from 'Current Window' to 'New Window' so the hyperlinked page, will open a new browser window when clicked on.