Experiencing an issue?

Editing and Formatting Images

You can change the way an image displays and behaves on a webpage. Reduce its size, insert captions, add links, and more.

 

1  Placing an Image Component

Begin with an Image Component on a page and a picture in the component. If you have that content on a page, then move to Step 2. If you don't know how to place an image in an Image Component, see:

2  Using the editing and formatting tools

  1. Hover the mouse pointer on the Image Component. The toolbar displays.
  2. Click the Settings button. The Settings panel displays.

The Image Settings panel has many tools to configure the appearance and behaviour of an image.

e-1.png

 

Alignment

Adjust the position of the image. Choose align left, align centre, or align right. The image is aligned inside the Image Component, not across the screen.

Width

Change the size of the image. Click the plus (+) or minus (-) boxes to increase or decrease the image width. Changing the width does not alter the image’s original aspect ratio. The maximum image width is the width of the Image Component.

Alt Text

Add a few words to describe the image. Alt Text has two functions:

  • Help people with visual impairment understand what is on your page (via screen readers).
  • Improve your site’s search engine optimization (SEO). 

Alt Text words appear on your website only when the image is not available.

Use the built-in translator to add languages based on your locale. Delete text in the Alt Text field and type an English word or phrase. Click the translator icon.

trans-btn-1a.png

Lightbox

A large version of an image opens in a new tab when a visitor clicks the image. The lightbox feature is active when the option box is checked. Image links do not work if the lightbox feature is activated. Clear the checkbox if you want to add an image link.

Lazy Loading

Load images only when they become visible on the screen. This improves page performance by reducing the initial loading time.

You can select No Set, Yes, or No.

  • Yes: Images load only when they are visible.

  • No: All images load immediately when the page loads.

Caption

Use this feature to place a descriptive word or phrase at the top or bottom on an image.

  1. Click Captions to open the settings panel.
  2. Check the Visible box to activate the caption feature.
  3. Enter an English word or phrase into the Text field.
  4. Click the translator icon to change English to languages based on locale.

The present text position is at the bottom of the image. Check the Position on Top box to change the location. There are options to configure text alignment, size, and colour, as well as padding and the background colour of your caption.

orange-2j.png

Alternate Image

Display a new image when the mouse pointer hovers a picture. Images with an aspect ratio (height-width ratio) similar to the base image produce the best display results.

  1. Click the Alternate Image tab on the settings panel. 
  2. Click the Cloud button to upload an image from your computer.
  3. Click the hand icon to insert an image from your File Manager. (optional)
  4. Check the Visible box to activate the Alternate Image feature.
  5. Click OK.

Text Overlay

Add a layer of text to an image. This text is visible when the mouse pointer hovers the image. The panel has several options, including horizontal and vertical alignment, text size and colour, and padding. 

Image Overlay

Display an image over an image. The second image is visible when the mouse pointer hovers over the base image. The Text Overlay panel has several options, including horizontal and vertical alignment, text size, colour, and padding. Check the Visible box to activate this feature.

Image Effects

Adjust the visual appearance of an image using various effect controls.

Drag the sliders sideways to modify each effect:

  • Opacity

  • Blur

  • Brightness

  • Contrast

  • Grayscale

  • Hue

  • Saturate

  • Sepia

  • Invert

You can also remove all effects and discard any changes by clicking on the option, restoring the image to its original state.

Link

Add a link to the image. When the image is clicked, the link opens. To open the Link Picker panel:

  1. Click the pencil button and then choose the type of link to add: a named section on the same page (if available), a different website page, or a Custom URL. 
  2. Check the Open in New Tab box to open the link in a new window. Image links do not work if the Lightbox feature is active.

e-2.png

  • Use the Section link to create an anchor link. When selected, the Section link jumps to a different place on the same page. 
  • If you enter a custom URL, include the http:// or https:// prefix.

Border

Place a border around the image. Several formatting options are available, including border width and rounded corners (i.e. border radius).

Spacing

Adjust padding around the image and margins around the Image Component.

  • Padding is the space between the outside edge of an image and the inside walls of the Image Component.
  • A margin is the space between the outside edge of the Image Component and adjacent components.

Font Scaling

Adjust the font size automatically based on the device type to ensure optimal readability.

Check the Enable Font Scaling box to activate this feature.

You can scale the Font Size for each device: (Up to 100%)

  • Mobile

  • Tablet Vertical

  • Tablet Horizontal

Advanced

To learn about custom styling with ID and Class Name selectors, see:

Component Visibility

Configuring visibility lets you control which devices display the content. The default is all devices. To learn about visibility settings, see:

 

Other information

If you find this article useful, you may also be interested in the following: 

Related articles