Section 6: Working with Media (images, movies, audio, pdf)

Resizing an image (Scale Image)

The main instructions page includes an 'image dimension guide'. This guide provided the 'minimum to maximum' image sizes for the:

• Graphic Logo
• Themed Object
• Zoom Menu Icons
• Portfolio
• Image Rotator ( all versions )
• and any other Theme specific images

Once you've uploaded your images, you can then resize, crop or scale the images to fit the minimum or maximum dimensions.

• click on the Media menu
• locate the image you want to resize
• click on the 'thumbnail' or the 'edit' link

• click on the 'Edit image' button

• now you'll be looking at the Edit Media panel, which allows you to resize ( scale ) your image, or crop it ( use just a part of the image )
• the Edit Media panel requires a bit of a learning curve, don't expect to get this right first time so you may find that you need to practice on a couple of images, delete them from your Media Library, then 're-upload' them.

Let's try some real world examples next. In this example we have some images for our Portfolio component that we've uploaded, now we want to resize them to meet the minimum requirements, so the 'majority' of the image will be visible. You 'could' leave an image at it's original size, and the component will still display it, but the components are designed to 'mask' or cut off anything that doesn't fit. So for most images, it'll be best to get them as close to the minimum sizes as possible.

• we'll start by locating our 'portfolio1.jpg' image, in our Media Library

• we'll click on the thumbnail image, then on the Edit image button so the image will open in the Edit Media panel

• we know from reading our 'image dimension guide' that the minimum image width for the Portfolio component is 400 pixels, and the minimum height is 175 pixels.
• so we'll start with the 'Scale Image' option and try to resize what we have as this is the easiest sizing option, just click on the 'Scale Image' link to expand the Scale Image panel

• the Scale Image panel is kind enough to display the current image dimensions for us, and we're already pretty close. But we can get it even closer.
• let's start by changing the width ( 476 ) to our min width of ( 400 ), we'll just type the number 400 into the box that is displaying the 476

• when you type in a new width or height the Scale Image panel will automatically 'scale' the other dimension, in this example we replace the height of 476 with 400, so the 'Scale' Image' tool kicked into gear, and scaled the width for us.. from ( 238 ) to ( 200 ) .. NICE!
• Less work for us as we now know that the minimum width of 400 pixels brings the height of the image down to 200 pixels when scaled. Meaning the image is resized in proportion and it won't look stretch, squished or skewed.
• we also know that our minimum 'height' for the Portfolio image is 175. With the scaled image height being '200' we'll more than cover the required height of 175.
• we'll still lose a little bit of the total image, as the Portfolio will display 400 pixels wide, but only 175 of the 200 pixels in height.. but it's a good trade off as scaling the image was very quick and easy.

If we really want to control what part of the image is displayed we should use the 'crop' tool. This will allow us to select the exact area of the image that we want to display, and cut out the rest. Check out the next tutorial.