Controlling Image Resizing

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

Using the <standard:image /> control

The <standard:image> control can be used as a general replacement for the standard HTML <img /> tag in most situations, to introduce some additional functionality.

Using the <standard:image> control to generate appropriately sized image thumbnails can drastically reduce account bandwidth usage, and help to improve website page speed.

When the src attribute of this control references an image uploaded to the website, Oncord will generate a thumbnail at the dimensions of the width and height attributes specified. So where an admin has uploaded overly large images to the website, a smaller thumbnail can be generated and used instead.

Common 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'.

All other attributes of the standard html <img> tag also work - such as alt, title, class, id and style.

Refer to the api documentation for more information.

Maintain Aspect Ratio, or Crop Images

Where an image thumbnail is generated, the maintainAspect attribute controls whether the aspect ratio of the image 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.

Basic Example:

<standard:image src="/media/website_pages/about/boat.jpg" title="Boat Sailing" alt="A boat sailing on the open sea" width="300" height="300" maintainaspect="true" />

Use with Posts Example:

<data:repeater datasource="\Components\Website\Posts::getAll()" datalimit="1"> <standard:image alt="[? $post['post_title'] ?]" src="[? $post['post_icon'] ?]" width="160" /> </data:repeater>

MaintainAspect Examples

In the below examples, the 1459px by 1094px image boat.jpg is being resized with width="245"height="245" 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.

100% Width Images

Images often need to be shown at 100% width, overriding what has been set within the width attribute in order to generate a thumbnail. In that case, you can use the style attribute to set the width or height appropriately:

<standard:image src="/media/website_pages/about/boat.jpg" width="400" height="300" style="width:100%; height:auto!important" maintainaspect="true" />

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.

Refer to the \Components\Website\Media::getImageAtSize() function.
Method Signature: getImageAtSize($strFile, $iWidth, $iHeight, $bMaintainAspect=true, $bSupportsHiDPI=true)

Use with Posts Example: