The Zentools module uses our own image resizer that can be found in the JB Library plugin and the Zen Grid Framework plugin. It is a powerful resizing tool that has the ability to resize and cache images and is used extensively in the zentools module.

Resize Options

The resizer resizes and caches the images in the module based on the following optiheightons and resizing methods:

• Image height
• Image width
• Smart resize and crop
• Portrait resize and crop
• Landscape resize and crop
• Auto resize and crop
• Exact resize
• Exact crop from top left
• Exact crop from center

Image Resize Settings

Image Caching

The are resized once and then cached in the respective media folder. When any image is resized by the Zentools module or any other of our modules the new image is stored in media/zengridframework/imagecache folder or in the case that you are using the JB Library plugin - media/plg_jblibrary/imagecache folder.

Resized file names

Each time a file is resized a unique file name is generated to avoid conflicts when testing the ideal image size for your page. File names are calculated based on the following formula:

• imagename-md5hash(image name + height + width + resize option + last modified date)
• adventure-9b9d9baf523d9615fb98a3f8e618745e.jpg

If you want to take a closer look at how we do this you can see the image resize script in the media/zengridframework/helpers/image.php or the media/plg_jblibrary/helpers/image.php folder.

Examples of resized images.

The following examples highlight the various resizing options available. The resize technique that is right for you depends on the aspect ratio of the image/s you are using. In most cases the smart crop will be the best or most consistent option although in some cases you may need to go for one of the more specific resizing options.

The examples below show you the effect on three different images with three different aspect rations.

Butterfly - Original image dimensions 800 by 533.

Honey Bee - Original dimensions 672 by 978

Sunrise - Original dimensions 1200 by 471

Smart Crop and Resize

Using a width of 400 and height of 300.

Thi smethod renders evenly resized and cropped images regardless of the original dimensions. All images are resized into 400 by 300px images.

{loadposition resize1}

Lanscape Crop and Resize

Using a width of 400 and height of 300.

This option places more emphasis on the landscape (horizontal) px value so all images are resized with a maximum width of 400px. The height of the rendered image differs according to the dimensions of the original image.

{loadposition resize2}

Portrait Crop and Resize

Using a width of 400 and height of 300.

This option places more emphasis on the vertical dimensions and as you can see render images that have the same height although varied widths.

{loadposition resize3}

Auto Resize and Crop

Using a width of 400 and height of 300.

This method places emphasis on both the width and the height of the image and the aspect ratio of the original image is maintained.

{loadposition resize4}

Exact Resize and Crop

Using a width of 400 and height of 300.

This method renders an image that is 400 by 300px in dimensions but skews images that have a large variation in the width and height.

{loadposition resize5}

You could adjust the settings for the sunrise photo so that the rendered image achieves a more reliable result by adjusting the width and the height in the settings. The ratio of the original sunrise image is in the vicinity of 3:1 so to attain a more reliable result here you could set the width and height to a width of 600 and a height of 200. This would achieve the results as seen below.

{loadposition resize8}

Crop from top left

Using a width of 400 and height of 300.

This option crops the original image from the top left corner and results in an image that is 400 by 300 px in dimensions.

{loadposition resize6}

Crop from center

Using a width of 400 and height of 300.

This option crops the image from the center and results in the image being 400 by 300 px in dimesnsions.

{loadposition resize7}

blog comments powered by Disqus