We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.

Image

A container for responsive images

Features

Supports warehoused images
Placeholder image for page layout
Horizontal alignment
Easy drag-and-drop or browse-to source image
Use Unsplash images directly
Add a link to the image

Fixed size, ratio or default size with maximum width
Rounded corners with advanced settings for special looks
Instagram-style filters for on-the-fly styling
Drop shadow
Responsive: provides three different image sizes

Examples

Size Default

Width 100%

Size Thumbnail

Rounded Corners Advanced Mode

Shadow 20px blur

Filter Appenzell

Filter Waterloo

Filter Wensleydale

Image

NEW 1.2.0

Responsive Images

There are entry fields for three different image sizes:

one for mobile devices
one for desktop-sized devices
one for full-hd-capable devices

The browser will automatically load the appropriate image, which means that images with less resolution/size can be loaded for smaller screens.

Only Mobile Size is mandatory, the other image sizes can be used optionally.

For warehoused images, you can select the Warehoused Image option and provide a link to the image via the standard Link Dialog.
Additionally, you can add an Alternative Text.

You can either browse to the particular picture or drag and drop it onto the image-well. Additionally, you can add an Alternative Text.

Layout

There are three layout options available: Default, Fixed and Ratio:

Default
No changes are done to the geometry of the picture. The only way to modify its size is through the Width slider.
Images in Default layout can be marked as Thumbnails.

Fixed
This layout presses the picture into the corset of the sizes given in the adjacent drop-down. If the proportions of the source image are not the same as in the selected size, distortion will occur.

NEW 1.2.3

If you require an individual width setting, choose Custom from the drop-down; now you can set the maximum width of the image (height will be calculated automatically).

Ratio
This layout presses the picture into the corset of the ratios given in the adjacent drop-down. If the proportions of the source image are not the same as in the selected ratio, distortion will occur.

Alignment

Horiz. Align - to align the contents, use the "left", "center", "right" options

Adding a Link

Use the standard dialog to add a link to the icon

Rounding

Rounding offers two modes: simple and advanced for more intricate designs.

Simple Mode

Units - enter the unit type here. Allowed types are the common CSS units
Rounded - use this slider to set the corner radius

Advanced Mode
This mode provides dual settings for each radius, which are used to define - in order - the horizontal and vertical radii of a quarter ellipse, which in turn determines the curvature of the corner of the outer border edge.

Units - enter the unit type here. Allowed types are the common CSS units
Radius - enter the values to set the corner radii

Filters

The Image stack provides more than 20 filter types. They use modern CSS technique and therefore are compatible with most browsers.

Shadow

Add Shadow - this turns the shadow option on or off
Shadow - enter the X and Y offset (negative values are allowed here, the blur radius and the spread
Color - choose a color for the shadow; opacity is supported