<standard:image />

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:

Use with Posts Example:

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:

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:

Oncord's UI Controls API includes a pre-built rotator, which helps reduce development time, while providing users with an improved experience updating content via the visual editor.  

Some notable features of the Oncord rotator:

• May be placed and configured via the visual page editor. 
• Supports html content and other Oncord UI controls such as sections, not just images. 
• Supports YouTube videos, where videos are stopped between slides.
• Customize the rotator controls with your own images or icons.
• Supports responsive content. 
• Customize the transition time and effect to be used between slides (slide or fade). 
• Show multiple content items per slide (eg. 4 testimonials per slide). 

Introducing The Rotator UI Control

You can add a rotator to a website page or design through use of the <layout:rotator> UI Control.

Alternatively, a rotator can be added to the page via the visual editor. Click "Insert" on the left-hand side of the screen while editing a website page, and drag-and-drop a "Rotator" element into position on the page.

In order to take advantage of all the features and possibilities of the rotator UI control, take note of all the "Attributes" available in the API reference here. 

The <layout:rotator> control can handle any standard content. Each direct child of the rotator will be turned into its own slide.

<layout:rotator id="featured_rotator"> <standard:image width="100%" height="500" maintainaspect="crop" src="https://images.unsplash.com/photo-1543575172-e1033f739205?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8NXx8YWJzdGFjdHxlbnwwfHx8fDE2MzE1MTQxMjQ&" /> <standard:image width="100%" height="500" maintainaspect="crop" src="https://images.unsplash.com/photo-1544438825-f1222acc39dc?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Mjd8fGFic3RhY3QlMjBzbGlkZXxlbnwwfHx8fDE2MzE1MTQyMTg&" /> </layout:rotator>

Custom Next / Previous Links

The rotator includes standard next / previous controls, however you can alternatively add custom links instead.

Place your custom navigation elements within links that are assigned with unique IDs.

Add the attributes moveNextId and movePreviousId to the <layout:rotator> control, where the IDs that you provide correlate to the IDs used by your next / previous buttons. 

Set the attributes arrowVariant="none" minimapVariant="none", to remove Oncord's default rotator navigation elements.