Built with Readz
LEARN MORE

Images, Styling Settings & Zooming

Images are an essential part of your content. This article will explain some of the fundamental concepts for images, and will show you how to scale and position your images.

Images: 'image' element or a 'box' with an image background?

There are two options in html/css for you to add images to your page. We will not jump into the code (it is our goal to save you from code) but we will show you when you would use which.

Have a look at the image below. Visually, there is no difference. Yet, one is an 'image' element; and one is a 'box' element with an image background.
Differences between an image element and a box element with an image background
Here are the differences between both: a) Adding other elements You cannot place other elements into an Image element. But you can place other elements onto a Box element, whether it has an image background or any other background.
b) Adding Tags (<a> tags)
Tags, or <a> tags, are additional information which you can add to visual elements. Searchbots and screenreaders can identify image elements as an image, but they don't see the image's content. Tags are used by searchbots and screenreaders to identify what the image is about.
Boxes with an image background do not offer you this, for screenreaders and searchbots a box is a box, independent of what background it may have.
You can add tags to images by opening the SEO tab from the menu at the top of the canvas.
c) Filters & Backgrounds
Image elements do not allow for background fills. Boxes with a background fill allow for more background fills to be added.
For images, a number of filters are available which can be applied to the image. See below for more information.
Here is an example of an image with a reduced brightness filter added:

Image Elements - Styling Options

When you add an image element and open the Styling panel from the panel to the left of the canvas, the panel below will open up, offering you the following options:
  • add or replace an image
  • set the Display or scaling properties
  • set the Position of the image
  • select more Image Properties - or filters
Display options
For image elements, you have three display (or scaling) options available to define how the image will interact with its container, which is the actual media element. In all three options, the image's aspect ratio is maintained.
  • fill: the image will stretch to completely fill its container. Some parts of the image can be hidden.
  • fit width: the image will stretch to fit the width of its container, and the container will stretch to show the image completely.
  • contain: the image will stretch up to the available height or width of the container, whichever is smallest. Some negative space can occur in the container.
Position Options
With the position options, you can move the image around within its container (the image element). You can either move the blue dot around or enter the desired position values directly.
The example below shows how position affects your design:
For images with a 'Fill' display, this will affect what part of the image is visible.
For images with a 'Contain' display, it will determine how the image fits into the container.
Images that have a 'Fit width' display are completely shown, so the position option will have no effect.
The example for 'Contain' below shows how the image moves to the right of its container when you change the position accordingly, creating some white space on the left.

More Options: Filters

You can add filters to your images. These are available under the 'More Image Options'. Clicking the arrow will open up the panel and show you these options:
Here are some examples for these filters:
You can add multiple filters on a single image, you can save these onto a style sheet, and as shown below, you can add these filters to your hover effects:

Zoom

Allowing users to zoom in an image is really easy.
  1. Double click the image to open the Media Library,
  2. Select the image in the Media Library, and check zoom on the bottom right side of the image properties.
For mobile, the user will need to pinch the image with two fingers to zoom in. For desktop, readers will need to click on the image. Labeling the image with a small text or icon to signify that one can zoom in the image, for example, “Pinch to zoom” is recommended.
If you only want to allow zooming on one of the variants you'd need to use two separate image elements, one for desktop and one for mobile in the Media Library and corresponding variants. In that case one of the images will have the zoom checked and the other unchecked.
The mobile image on desktop can be hidden by shutting the eye down in the Index panel and the same for the desktop image on mobile. I would also suggest to group these two images.
Contact Support
Need more help? Get in touch!
Contact support
We're available 6 a.m. to 6 p.m. PST
© 2020 Readz All Rights Reserved