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 its 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, 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. 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.
  • 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.

Other Related Tutorials