The dimensions of digital photos are getting bigger and bigger. Because of mobile surfing download size matters even more. Nobody wants to load 5 or 6 megabytes for just a teaser image of 300 pixels. Modern css makes images responsive so you only recognize the slow loading effect. But google downgrades Sites with many oversized images.
Although it can be frustrating if your stylish, modern css -layout requires teaser images of the exact size (dimensions) for teaser or product images. Joomla has no automatic mechanism for resizing and cropping images.
Magic image resize is a simple Joomla content plugin for automatic scaling content images to a web friendly size. Magic image resize does not work destructive. It stores the resized images into .thumb folders inside your image directories.
<img src="/images/myLargeImg.jpg" class="img-fluid" data-resize="crop" width="250" height="128" />
This will crop a image to exactly 250 x 128 pixels and put it into images/.thumbs/250-128/myLargeImg.jpg. The data-resize attribute does the trick. The html Image src attribute will be replaced with the urls to the scaled version in the .thumbs - folder.
Images can be scaled, cropped or filled
- data-resize="scale" - Scale the Image and keep aspect ratio. (default value)
- data-resize="crop" - Crop the and center the image to the exact size. Ignore aspect.
- data-resize="fit" - Fit image to size and fill the rest with background color.
If no special width or height attributes are provided MIResize uses the plugin default width and height. You can change default resize mode and dimensions by editing the plugin options. The options provide also a mechanism to clear the thumbs cache. Use the clear-tumbs function with care!
Only the image source is replaced. This means can still use responsive classes like img-fluid or img-responsive.
The plugin will be activated automatically during installation.
Examples
Original
Large image with responsive class.
Click on image to see real size!
Cropped
Image cropped to 480 x 200 with responsive class.
Click on image to see real size!
Scaled
Image scaled to maximum 140x140. Without width and height attribute miresize uses the plugin defaults .
Click on image to see real size!
Fit
Image fit to 240 x 240. You can set the background-color with the plugin settings.
Click on image to see real size!
Scaled
Semi tranparent PNG Image scaled to maximum 140x140.
How to get the data-resize Attribute into the image tag?
Joomla has a built in code editor called codemirror. But many users are lost if they see HTML-Code. So we have two alternatives.
JCE
JCE is the most popular editor. Unfortunately the free version has no real code editor anymore. But there is a easy way. Click on the Insert/Edit Attributes Icon and add the data-resize attribute.
With the JCE-Pro you have a comfortable template snippet system. You can make yourself templates with dummy images and simply replace the image.
TinyMCE
TinyMCE is Joomlas default editor. It also has a basic code editor. But the code editor has no hi-lightning or syntax check. The best solution is to click on the toggle editor button in the lower right corner and edit the code directly.
Future Ideas
We use this plugin for some of our customers projects. Here are some ideas for future enhancements.
- Automatically watermark the scaled images
- Implement a lazy loader function which loads the images asynchronously as soon as they are visible.
Meanwhile visit our GitHub page for issues, ideas and forks.
