Before you can add an image to an article in Joomla, you have to make sure its dimensions fit the web page layout. Usually this means you’ll have to scale down images to an exact size. However, there’s an easier way: using the ImageSizer plugin images can be automatically resized. Here’s how it works.
How the ImageSizer plugin works
ImageSizer automatically creates two resized images for every image that's inserted into a Joomla article:
- a thumbnail image that will be shown in the article;
- a larger image that will be displayed in a lightbox when the visitor clicks the thumbnail.
As ImageSizer allows you to determine the “thumbnail” dimensions yourself, you’re not restricted to using the first image as a (very small) thumbnail. It’s also possible to the image width and height that perfectly fit your site layout. For example, if you want all inserted images to fit a column width of 450 pixels, you can set the maximum “thumbnail” image width to exactly that amount.
Another advantage of ImageSizer is that you don't have to worry about unexperienced content contributors inserting huge image files into articles and slowing down the site, as you can also set the maximum dimensions of the second image that ImageSizer generates. The default maximum width and/or height of the lightbox image is 800 pixels, but you can choose whatever values fit your needs.
Installing and enabling the ImageSizer plugin
- Go to http://www.redim.de/downloads/joomla-1-6/plugins. Here you’ll find the ImageSizer plugin for Joomla 2.5.
- Click the Download link and install the imagesizer-1-6.zip file through Extensions > Extension Manager > Upload & Install.
- Navigate to the Plugin Manager and locate the new plugin ImageSizer. Click its name to edit the plugin properties.
- In the Details section, make sure you set the plugin Status to Enabled.
- In the Basic settings panel, you’ll notice the Min Size dimensions are set to 120. This indicates that the plugin will resize all images to thumbnails with a maximum width of 120 pixels (Min Size X (Thumb)) and also a maximum height of 120 pixels too (Min Size Y (Thumb)). We’ll leave this unchanged for now.
- The values in the Max Size X and Max Size Y fields indicate the maximum dimensions of the images as they are displayed in a lightbox (that is, after the site visitor has clicked the thumbnail displayed in the article). The default setting (800 pixels) should be okay.
- Just one little change to be made: in the Functions panel, set Insert and Scale to Yes. This way, images will be scaled (resized) immediately when an image is inserted into an article. If you leave this option set to No, images inserted in the article editor keep their original dimensions and users will have to resize every image by hand. As we want to automate this process, we’ll use the Insert and Scale feature.
- Click Save & Close to find out the effect of the current settings.
- In the Article Manager, open an existing article of create a new one. In the article editor screen, place the cursor at the beginning of the text paragraph where you want to insert the image.
- Click the Image button below the editor screen:
- Upload an image file. Make sure its wider than 800 pixels. This way, you’ll be able to check if ImageSizer resizes the image as desired.
- You’ll immediately see the effect. It should look like the example below: in the article editor, the buttercup image has been reduced to the default thumbnail image width of 120 pixels. (In this example, I’ve set image alignment to Left.)
- Save the article and make sure it’s visible on the front end of your site. This is how the output should look:
- The thumbnail image is clickable. When the visitor clicks it, the full-size image is displayed in a lightbox. By default, the lightbox image dimensions are constrained to a maximum width and height of 800 pixels.
Adjusting Imagesizer settings
You may not want to display all article images on your site as very small thumbnails. Instead, let’s find out how we can get ImageSizer to resize all images inserted to articles to a maximum width of 450 pixels. This way, we can have a consistent size for all article images, still combined with the ability to display them in a larger lightbox version.
- In the Joomla backend, go to the Plugin Manager to change the ImageSizer default settings. In the Basic options panel, set Min Size X(Thumb) and Min Size Y (Thumb) to 450. Don’t let the label Min Size confuse you: this is not about the minimum image dimensions, it’s about the maximum dimensions of the “miniature” or “thumbnail” image. In other words, the maximum horizontal and vertical “thumbnail” dimensions will never be wider or higher than 450 pixels. Of course, you should choose another value here if that fits your site design.
- Now open the article you’ve created earlier again. Delete the image we inserted earlier (in our example that’s the buttercup picture) and re-insert the original image using the Image button. This will force ImageResize to create new thumbnail. In this case, this image is 450 pixels wide:
- On the frontend, things change accordingly: the image generated by ImageSizer is now 450 pixels wide:
- Again, the visitor can click the image to display a larger version in a lightbox. This is the default setting of ImageSizer. If you want to deactivate the lightbox for an article image, you should add the CSS class "nolightbox" to the image in the article editor code.
Adjusting the image size by hand
What if you need an image that’s different from the default dimensions you've set in the ImageSizer plugin options? Don't worry, it's also possible to resize any image by hand in the article editor screen. Just click the image and drag the resize handles. When you save the article, ImageSizer will create a new image to match the specified dimensions.
All in all, ImageSizer is a great plugin. It’s not perfect -- it would be even better if you could create and select different image size presets for different page types, comparable to the Image Styles function in Drupal. However, as it is ImageSizer is a great little tool and it can be a great timesaver. I hope this tutorial has got you going. Make sure to test all of ImageSizer's features and settings!