Field: Image

Image.

Ability to add an image to content block layouts, with desktop, tablet and mobile crops.


Category: Waterlogic Fields.
Content Blocks Documentation: https://docs.modmore.com/en/ContentBlocks/v1.x/Input_Types/index.html#page_Image+%28%2B+Image+with+Title%29


image-field.png

Settings

Show Image As A Circle: If set to yes then this will show as a circle. Default to no. (For this to work, image should have a square crop - see Image cropping below for best practices). 

Image Alignment: Where should the image align within the layout? Default to Align Centre.

Responsive Size: At tablet and mobile viewports should the size of the image be reduced? Default to reduced.

Image Cropping

There is the option to set up crops on images for mobile, tablet and desktop. When an image is selected the "popup" will appear to give you the option to set these.

image-field-crop.png

  • Free: This crop allows you the full flexibility of cropping around the image. 
  • Original: This crop takes the current aspect ratio of the image.
  • 1:1: This crop will provide a square image and should be used with circle images (see below).
Making images work with the "Show Image As A Circle" setting

For images with the setting Show Image As A Circle, the image crop needs to be 1:1 as this creates a square image and needs to be set for all viewports.

image-field-crop-circle.png