Image Resizer
There are quite a few options that are available within the system that make it easy to crop, link, and show images in popups. All images are optimized as soon as they are uploaded into the admin whether it be through the file manager, CMS, Ecommerce, or any other module that allows one to upload images directly. There are some interesting features that you can use to display the images apporpriately based on the requirements of the page.
How to Create a Clickable Thumbnail Image
What if you want to place a cropped version of your image on your website, but have the original size show up when the image is clicked.
There is nothing easier. Just define width and height attributes in your WYSIWYG editor or in the source view and the system will crop the image for you automaticallly.
You can use both standard techniques:
1. "width" and "height" attributes
<img src="image" width="200" height="200"/>
2. Parameter of "style" attribute
<img src="image" style="width: 200px; height: 200px;"/>
width="260" height="260"
Keeping Original Proportions on Images
What if you want to keep the original proportions on your image and have it show as a clickable thumbnail?
It's even easier! Just keep only "width" OR "height" attribute/style parameter, depending on what is more important for you.
Crop Center Point
What if automatic crop doesn't work for you as the image and thumbnail proportions are not the same?
In this case, use "-a-pivot" parameter in "style" attribute to combine vertical and horizontal center point position.
- style="-a-pivot: center center" - default option, will center your cropped thumbnail.
- style="-a-pivot: left center" - will take left part of your image.
- style="-a-pivot: right center" - will take right part of your image.
- style="-a-pivot: center top" - will take top part of your image.
- style="-a-pivot: center bottom" - will take bottom part of your image.
<img src="image" width="300" height="300" style="-a-pivot: left center"/>
<img src="image" width="300" height="300" style="-a-pivot: center top"/>
horizontal image cropped at left
width="300" height="300"
style="-a-pivot: left center"
horizontal image cropped at center
width="300" height="300"
style="-a-pivot: center center"
horizontal image cropped at right
width="300" height="300"
style="-a-pivot: right center"
vertical image cropped at top
width="300" height="300"
style="-a-pivot: center top"
vertical image cropped at center
width="300" height="300"
style="-a-pivot: center center"
vertical image cropped at bottom
width="300" height="300"
style="-a-pivot: center bottom"
Popup Size
By default, the website will open the original image in a popup (you will see it as big as your window is).
What if you need to limit your popup size?
Use -a-preview
style="-a-preview: 300px auto"
style="-a-preview: 600px auto"
style="-a-preview: auto auto"
Make Images Not Clickable
If you don't want your image to trigger a popup, but you want to use the resizer, add class "nopopup"
<img src="image" class="nopopup" width="200" height="200"/>
clickable image WITH popup
width="260" height="260"
NOT clickable image WITHOUT popup
class="nopopup" width="260" height="260"
Disable Resizer
There are vary rare cases where you may want to disable the resizer completely. For instance on animated gifs. The system treats all image files the same way, so when you upload an animated gif, then too the system will resize the gif.
There are two ways to disable the resizer in such cases:
- Just don't define the "width" and "height"
- If you need "width" and/or "height" defined, add the class "noresize"
In most cases, however, you want to refrain from disabling the resizer as it may mean very big images (despite them looking small) that will eat up your site's bandwidth and the user's data plan.
Compare Results
ENABLED resizer (12 kb)
width="260"
DISABLED resizer (410 kb)
class="noresize" width="260"
When Resizer is Not Activated Automatically?
If an image is smaller than or the same size as defined "width" and "height" and matches proportions, it does NOT get resized.
How to Activate Resizer Without using "Width" and "Height"?
When you don't want to use "width" and "height", so it doesn't fight your styles or for any other reason, there are "style" parameters that will allow you to set crop factor for image resizer, which will not be recognized by browsers as standard "width" and "height".
It's "-a-width" and "a-height"
<img src="image" style="-a-width: 200px; -a-height: 200px;"/>
More Complex Rules for Image Size
How to Create a Thumbnail From a PDF
You can link a PDF file from within the img tag and the system's Image Resizer will generate a preview image for the PDF file. See a-page pseudo-CSS below.
If you wrap it with a link to your document, it will open the PDF
<a href="document.pdf">
<img src="document.pdf" style="width: 100px; height: 100px; -a-page: 1;"/>
</a>
If you don't wrap it with a link, it will open the preview image and will depend on "-a-preview" attribute value.
<img src="document.pdf" style="width: 100px; height: 100px; -a-preview: 800px auto; "/>
You can use another page than the first page for using as a preview thumbnail by setting "-a-page" attribute to the value that equals the page number whose preview you'd like.
<img src="document.pdf" style="width: 100px; height: 100px; -a-preview: 800px auto; -a-page: 2;"/>
Please send us suggestions regarding this documentation page
If you would like to recommend improvements to this page, please leave a suggestion for the documentation team.