- Exercise 2.1: The Dashboard
- Exercise 3-2: Site Settings
- Exercise 3-3: Custom Logo's
- Exercise 3-4: Themed Object
- Exercise 4-1: Edit Page Panel
- Exercise 4-2: Adding Pages
- Exercise 4-3: Product Catalog
- Exercise 4-4: FAQs module
- Exercise 4-5: Sidebar Widget
- Exercise 4-6: Content Panel
- Exercise 5-1: Page Orders
- Exercise 6-1: Media Library
- Exercise 7-1: The Portfolio
- Exercise 7-2: Image Rotator
- Exercise 7-3: The MP3 Player
- Exercise 8-1: Learning to Blog
- Exercise 8-2: Editing the Blog
- Exercise 9-1: Authors Users
Section 6: Working with Media (images, movies, audio, pdf)
Exercise 6-3: Resizing an 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
- 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
- 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.
Continue to Exercise 6-4: Cropping an Image