Images

Images are a special type of syntax in your template code.

You are free to insert an external syntax as a variable but you can also utilize MOMENTVMs image engine we call Dynamic Images.

This enables your content editors to upload an image in a big format which then can be resized dynamically.

MOMENTVM will create these images on publishing.

Setup Image sizes

Since Dynamic Images are optional, there is a custom setting you need to create.

Choose Settings in the sidebar and then click Image Sizes.

In the setting editor enter your image settings like so:

## Image sizes that can be used
# You can add new sizes here.
# The first is the name and the body of
# it are the modifications that will be applied
large:
  resize: '800x800'
pdpFullScreen:
  resize: '1600x1600'
verylarge:
  resize: '1600x1600'
  colorspace: Gray
verysmall:
  resize: '100x100'

Note that the format here is YAML, so spaces and tabs matter.

In the above example we create mutliple image sizes.

For example large will resize the image to a maximum of 800 by 800 pixel.

Using Dynamic Images in Templates

In your template code, the syntax for dynamic images is

dynamicimage::large:#(image.image_name)::

Where large is the image size and image.image_name is the variable.

Note that in this case image is an object which contains a string image_name

You can wrap it but its not neccessary. It could as well be a simple variable called image_name.

The Schema for this looks like this:

image:
  type: object
  title: Image
  properties:
    image_name:
      type: string
      title: Some Image
    image_alt_text:
      type: string
      title: Image alternative text
      format: localized
    image_unique_id:
      type: string
      title: Image unique ID

Note that image_name is not localized. We recommend not localizing images since this makes it harder to identify the module.

Call your tile “Image … name” so MOMENTVM will show the image search.