Section 7: Working with Media Components

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:

• click on the 'Flash' menu
• click on the 'Portfolio' menu

Adding your first Portfolio Image

• To add your 'first' image, scroll through the 'Image Library' panel on the right, and click on the image you want to load first.

Expand and Minimize

The Expand button includes an important function, by clicking on the Expand button, additional 'Properties' are revealed for each image

• click on the 'Expand' button

• to reveal the 'Link to / Link Label / Link Target' properties
• these properties are hidden by default as they are optional. You may not wish to link the image to a web page, so this field is left blank by default.

Updating an Image Title

The 'Title' is displayed by the Portfolio's 'preview' button, as the button's 'Title'.

• when you add an image to the Portfolio, the 'Title' of the image ( when you uploaded the image ) is used by default
• you can change the default 'Title' to something short or more appropriate for a button
• delete the 'default title' text from the 'Title' field
• enter your own button name

• the maximum number of characters that the 'Title' can display will vary from theme to theme, so you'll need to 'test' as you go
• enter your text, then click on the 'Save Changes' button at the bottom of the page

• preview your home page to test the number of 'Title' characters to ensure they all fit
• if they don't fit neatly into the button space provided, edit the 'Title' to use fewer characters

Updating the 'Short Description'

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.

• In this example, we've added some information into the 'Short Description' that didn't quite fit into the 'Title'

Updating the 'Long Description'

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.

Changing the 'Image Link To'

If you want the preview button to link to a web page ( or the 'click me' text in the description ) ....

• click on the 'Link To' drop menu, to expand the list of pages you can link to

Changing the 'Link Label'

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.

• to set the 'Link Label's' target page, use the 'Link To' drop menu to select the page
• to set the 'text label' for your link, place your cursor into the 'Link Label' text field, and type in your text

Changing the 'Link Target'

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.