Resizing images for use in your Concrete5 website

Warning! This tutorial is for deprecated Concrete5 versions 5.6 and below. Many of the examples and methods are no longer relevant to modern Concrete5.

A common tasks I find myself doing while building up my customers websites is building them a nice image slideshow. Invariably, my customers always want to go back later and add more images to these slideshows. Often times, the slideshows I build require all the images to be of the same dimensions. This can be very tricky, but hopefully with the use of this tutorial, you will find yourself resizing images properly, in no time.

Step 1. Access your Concrete5 File Manager

In order to access the Concrete5 image editing capabilities you must be logged in to your website with administrative permissions, and access the file manager. If you haven't already done so, upload the images you wish to edit into the file manager. Always remember, the bigger the image the better.

Step 2. Setup the file manager to display image dimensions

In order to figure out exactly what image dimensions we want to match on our new photo, we need an easy way to see image height and width. For some of you, these steps may have been previously performed. If there is no column for height and width within the file manager. Select the small icon just below the "Upload Multiple" button on the far right of the File Manager.

Step 3. Add the Height and Width Columns

Tick the boxes for both the image height and width, as shown in the image at right. Then choose save.

Step 4. Determine your desired height and width

Now that we can see all the different image heights and widths, we can find out what our new image will need to be to fit seamlessly into our slideshow. I have filtered the file manager view to display only images within the "SlideShow Images" set, which is the source of my slideshow. You can see that all the other images in the set are right about 400 pixels wide by 200 pixels tall. This will be our goal in the proceeding steps.

Step 5. Access your images edit window

Now go ahead and click on the image you want to resize. On the resulting context menu select the "Edit" option. This will load up some 3rd party software known as Picnik. Picnik allows you to do various image editing proceedures, and has all kinds of tools for sprucing up images.

Step 6. Access the Crop tool

When picnik finally loads, you will see your image within the editor. The toolbar along the top displays the various tools available for you to use. Select the "Crop" tool.

Step 7. Setup the tool properties

Now is when the magic begins. After selecting the Crop tool, you should see the various tool properties along the top. What we want to do is crop and resize the image to specific dimensions and proportions without distorting the image. Setup the tool as follows:

  • No Constraints
  • Desired Image Width (400 pixels in our case)
  • Desired Image Height (200 pixels in our case)
  • Tick the "Scale Photo" option

Step 8. Crop your photo

After you setup the crop tool options, you can go ahead and choose what part of the photo you will keep in your new resized version. Simply click and drag the corners of the box overlay on your image. You will notice that the box proportions will remain the same at all times, this is what we want, in order to keep the photo from being distorted when we are finished. After you have the overlay in your desired position, click the "OK" button to crop the photo.

Step 9. Export your image back into the Concrete5 File Manager

When your crop is complete you will be able to see the new dimensions at the bottom right of the window. If everything looks like it went right, go ahead and click the "Export" button near the top right of the window. This will overwrite your existing image with the new cropped one. Now you are ready to update your concrete5 slideshow!