Accessibility

Dynamic Media

Overview

This component displays images in a variety of ways using image modifiers

Single image

Original Image

Extended Image

Adds margins to a layer or crops the layer rectangle.

extend=0 (left),0 (top),0 (right),0 (bottom) for no change of the layer rectangle. Depending on the pixel width and height, you can subtract or add to each side to show or hide more of a section of the image.

For example this image uses:
Image Preset= smallprod
extend=0,-1500,-800,0.

Original Image

Rotated Image

Rotates the image, text, or solid color layer by the specified angle.

Rotate=10 will rotate the image 10 degrees to the right
Rotate=-10 will rotate the image 10 degrees to the left

For example, this image uses:
Image Preset= smallprod
Rotate=90

Original Image

Cropped Image

Specifies a rectangular crop region, expressed either in pixels or normalized relative to the full source image

crop= * coord *, * size *

cropN= * coordN *, * sizeN *

coord: Pixel offset from the top-left corner of the source image to the top-left of the crop rect (int, int).

coordN: Normalized offset from the top-left of the source image to the top-left of the crop rect (real, real).

size: Size of the crop rect in pixels (int, int).

sizeN: Normalized size of the crop rect relative to the size of the source image (real, real).

For example, this image uses:
Image Preset= smallprod
Crop 20% off the left and 20% off the right:
cropN=0.2,0,0.8,0.8

Original Image

Flipped Image

Flip the layer horizontally, vertically, or both

flip=lr|ud|lrud

lr: Flip layer horizontally (left-right).

ud: Flip layer vertically (up-down).

lrud: Flip both horizontally and vertically.

For example, this image uses:
Image Preset= smallprod
flip=lr

Original Image

Fit Image

Specifies how the scale factor is calculated, which is used to scale the composite image to the response image when the response size is specified with wid= and hei= and scl= is not present.

fit=crop,1 - Scales the composite image so that it fills the entire response image, with minimal cropping and no whitespace. The larger of xScale and yScale is applied.

fit=hfit - Applies xScale to tightly fit the image horizontally, with likely cropping or whitespace at the top and/or bottom. Useful for special applications.

fit=vfit - Applies yScale to tightly fit the image vertically, with likely cropping or whitespace at the left and/or right. Useful for special applications.

For example, this image uses:

Image Preset= smallprod
fit=crop,1

Image Modifiers Commonly used on banners

Using Flip puts the point of focus on the right side, when text is on left.

flip=lr 

Using Extend helps to move the image up or down, left or right, to bring the focus in the right place.

extend=0,-300,0,0

Guidelines

Use When

  • An image or video is needed to support content on the page
  • Image or Videos need to fit a certain size container and highlight a specific area

Content

  • Images should always be in RGB format, otherwise the contrast will be very dark
  • Images and videos should all live inside the Web image library and are organized based on product shown 

Additional Notes

Authoring

Component

  • Add Dynamic Media Component on the page
  • Drag and drop image from Side Panel
  • Add image Preset and Image Modifiers

Do not

  • Leave the image present empty otherwise the image may be pixelated

author dialog box

Original Image

new Image