Developer › Tutorials for Web Developers & Designers › Galleries & Images

Controlling Image Resizing

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

Using the <standard:image /> control

This <standard:image> control is invaluable for generating appropriately sized images. Use of this control can drastically reduce account bandwidth usage, and help to improve website page speed.

This control can be used as a general replacement for the standard HTML <img /> tag, and introduces some extra functionality.

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

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 <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

When the image is being resized, the maintainAspect attribute can be used to control 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.

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>

100% Width Images

Your generated thumbnail image often needs to be shown at 100% width, rather than the width you define to generate a thumbnail. So in that case, you just need to add a 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:

<div style="width: 100%; background: url([? \Components\Website\Media::getImageAtSize($post['post_icon'], 300, 300, true) ?])"></div>

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.