Loading...
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 30px blur
Filter Appenzell
Filter Waterloo
Filter Wensleydale

Image

NEW 1.2.0
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