Image

The Image block is a quick way to add images to your page. You can add images to your page using the Content block, but if you want more controlled image placement the Image block can be very powerful.

image-v8.3.1.png

Files

image_initial_form-v8.3.1.png

Image

This will be the image you add to the page. You can add JPG, PNG, SVG, or non-animated GIF images. Clicking "Choose Image" opens the file manager.

Image Hover

The optional Image Hover allows you to select a second image to create a hover effect. When the image is hovered, the on-state image will be displayed. You can add JPG, PNG, or non-animated GIF images. Clicking "Choose Image On-State" opens the file manager.

The image hover effect requires constraining the image size (either resizing or cropping) and only works with JPG, PNG, and non-animated GIF images as the primary and on-state images.

HTML

Image Link

None - the image will not have a link set.

image_link_none-v8.3.1.png

Page - link the image to another page within your site. Clicking "Choose a Page" opens a sitemap for page selection.

image_link_page-v8.3.1.png

External URL - link the image to an external URL (commonly starting with http or https).

image_link_external_url-v8.3.1.png

File - link the image to a file. Clicking "Choose File" opens the file manager.

image_link_file-v8.3.1.png

Open link in new window - When this option is checked, image links will open in a new window or tab.

Alt Text

Set the alt attribute of the image. The alt text should describe the appearance and function of the image on the page. For SEO and accessibility, it is highly recommended to set alt text.

Title

Set the title attribute of the image. The title attribute will be displayed as a tooltip when hovering over the image.

Resize Image

image_resize_image-v8.3.1.png

Images can be optionally resized or cropped. Unconstrained images are displayed as picture elements. Constrained images are displayed as img elements. SVG images cannot be constrained.

Constrain Image Size - resize an image while maintaining its aspect ratio. Constraining an image requires setting a Max Width, Max Height, or Max Width and Max Height.

Crop Image - resize and crop an image from the center. Cropped images require a Max Width and Max Height set. Setting a Max Height or Max Width of 9999 will prevent that dimension from being resized.

Max Width - the maximum image width in pixels.

Max Height - the maximum image height in pixels.