Skip to main content

Related links:

Data keys

data-dynamic-image​

<div data-dynamic-image id="an_editable_image"></div>

data-save-max-(width|height)​

<div data-dynamic-image id="{key}"
  data-save-max-width="1024"
  data-save-max-height="768">
</div>

By default, images are saved after cropping to the size of the image container. For example, if the above had css setting the div to 100x100, the saved image would be 100x100.

If save-max-width and save-max-height are set, the image will be uploaded after downscaling to the set size. Ie, the container might be 100x100, but the image inside would upload at 500x500.

note

If the image uploaded dimensions is under the max-width and height set, then no scaling occurs. It's up to the content developer to scale the image appropriately to fit.

caution

The data-companywide-dynamic-image container must be in the same aspect ratio as your max width and height. This is to prevent scaling the image incorrectly.

For example: You might want to set your container to be 256x192 to match the aspect ratio of 1024x768. Will fallback to container size on failure.