DeveloperTutorialsGalleries & Images

Controlling Image Resizing

Controlling Image Resizing

Take advantage of Synergy 8's automatic image resizing, cropping and thumbnail generation.

Using the <ss:standard:image /> tag

The <ss:standard:image> tag is a replacement for the standard HTML  <img /> tag.

When it's src attribute is referenced to an image stored on the website, it will automatically generate a thumbnail at the dimensions of the width and height attributes specified.

Standard html <img> tag attributes all work with the <ss:standard:image> tag (eg. class, style), with the addition of a few extra attributes:

Src - The location of the image. This should be referenced relative to the website root domain. For example; src="/media/website_pages/about-us/img1.jpg".

Width - The width of the image in pixels. Do not include 'px'. For example; width="200", rather than width="200px".

Height  -  The height of the image in pixels. Again, do not include 'px'.

MaintainAspect - When the image is being resized, this attribute determines whether or not the aspect ratio is maintained. The available values are "crop", "true" and "false" (default: true). When this attribute is set to crop, the image will be cropped to that of the smallest dimension while maintaining aspect ratio.

AutoHiDPI - When served on HiDPI / retina devices, automatically serve a higher resolution image. Enabled by default. 

All other attributes of the <img> tag also work - such as alt and title.

Refer to the  api documentation for more information.

Basic Example:


Use with Posts Example:

Using the API - Background Images

You can also generate an image thumbnail using the API, for those times when an <img /> tag is not appropriate. For instance, you might want to generate a thumbnail for use in a style attribute or custom jQuery gallery.

Use with Posts Example:

MaintainAspect Examples

In the below examples, the image  boat.jpg  is being resized with width="300"height="300" using the different aspect ratio settings.

MaintainAspect="true"
The image is scaled down proportionally.
MaintainAspect="false"
The image is squished to both dimensions.
MaintainAspect="crop"
The larger dimension is cropped.

Share This Tutorial: