LuckyMarble / i3dthemes: Wordpress 'Theme' Tutorials

The Media Library includes the tools / panels that allow you to upload your Media files. 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 or web page 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, as well as scale or crop your images.

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.

Prep! - Before you upload your first image

Time saver alert!!!!

Preparation and Organization first!!! There are 3 things you can do right now, to save yourself time and even some potential headaches.

1. review the 'image dimension guide' on the instructions main page. This guide will tell you what Media Component is included with each type of template layout, and the dimensions of the images in that media component.

2. create a folder on your computers 'Desktop' or somewhere you can easily locate it. Then drag, copy, or save the images you want to use in your website and media components into this folder.

Verify the images you want to use in your Media Components meet the 'minimum dimensions' as noted in your 'image dimension guide'. If your images are 'too small' it's best to just find suitable replacements that do meet the minimum dimensions. If the images 'exceed' the minimum dimensions this is OK, as you will be resizing the images once you've uploaded them. OR, you can use your favorite image editor to resize them ahead of time.

** there are many ways to determine an image's dimensions, one method that works in all cases is to 'right click' on your image and select the 'Details' tab then scroll through the details panel until you find the 'Dimensions' information ...

3. once you've verified your images meet the minimum dimensions, rename them so the image names make sense to you. For example, if you have 7 images you want to use for the 'Portfolio' component, rename your images as in this example...

in a real world build, we'd be using image for the Portfolio as well as the 'Primary Rotator, 'Secondary Rotator' and maybe even the 'themed object' .. if this were the case, here's how the 'web images' folder on our Desktop would look

Now that we've organized all the images to be used in our Media Components, when it comes to uploading them to the Media Library we won't need to 'guess' at which image was supposed to go 'where'. We'll know as we organized our images ahead of time.

Something you may be asking yourself, is what if you want to 'share' an image between components? Is it possible, yes. Recommended no. If you want to use the same pics in your Media Components, just make a copy of the image, and rename it. If you wanted to use the 'Portfolio1.jpg' image in the Portfolio as well as the Primary Image Rotator, just make a copy of the 'Portfolio1.jpg' then rename the copy for the Primary Image Rotator... check out the screenshot when we change the folder to 'thumbnail' view, you'll see the 'portfolio1.jpg' and the 'primary-rotator1.jpg' look identical..and that's because they are ... the 'primary-rotator1.jpg' image is a copy of the 'portfolio1.jpg'

The reason you want a to use 1 image for each media component instead of 'sharing' the same image, is because you'll be 'resizing' each image once you upload it... unless you've resized or cropped your images ahead of time, your image ONLY need to meet the minimum image dimensions. Once you upload your images you can resize them to meet the minimum dimensions.

For example, these 2 images displayed above are currently identical except for the image names. The Portfolio component image dimensions may be 400 pixels wide by 175 pixels high, while the Primary Rotator image dimensions, which are usually larger, could be something like 700 pixels wide by 350 pixels high. Once you upload the 'portfolio1.jpg' image, you will then 'edit' the image and resize it, or crop it to fit the 'minimum dimensions' of 400x175 pixels. When you upload it's copy, the 'primary-rotator1.jpg' you'll be editing this image to fit a different minimum dimension, in this case, you'll resize or crop the image to fit the 700X350 pixels required by the component.

We may be getting a bit ahead of ourselves as we have a couple of chapters on resizing image a bit later on.

Continue to Exercise 6-2: Uploading Image / Media Files