Pages 2.0 | Image Widget

This article details what the Image Widget is and how to manage it.

Pages 2.0 refers to the new version of Happeo Pages, released on April 2, 2025. All Happeo accounts created from this date onward use the new page editor by default.

What is the Image Widget?

The Image Widget is a new widget exclusively in Pages 2.0 that allows you to display images within your page, enhancing your content's visual appeal and engagement. It provides options to customize the appearance and behavior of the image, such as scaling, adding links, rounding corners, and adjusting the background. By using the image widget, you can convey information more effectively and elevate the overall look and feel of your page.

For more information about adding widgets to your page, please see this article.

How to manage the image widget

To manage the image widget:

1. Navigate the page group where the widget resides
2. Click the pencil icon at the top right of the page to open the page editor
3. Hover your mouse over the widget until it is highlighted in blue, and click on it
4. Select the settings (gear) icon at the top right of the widget
5. A new window will open where you can adjust the widget's settings. You can switch between the Configure and Styles tabs to adjust what is displayed and how the content is displayed

Configure

• Selected image – When you click Select source, you can choose between the following options:
  • Recommend an image – Choose from a selection of AI-generated images. You can click Regenerate to get a new set of images and Refine to specify what kinds of images you want to be generated. Remember to click Confirm once you are done
  • Select image – Choose an image from Google Drive, SharePoint, or OneDrive
  • Upload from computer – Upload an image file from your computer
  • Browse Unsplash – Select an image from Unsplash
• Edit image – Click the pencil icon on the image preview to open an image editor. You can find more information in this article
• Replace image – Click the rotation icon on the preview of the image to replace the image
• Delete image – Select the trash icon on the preview of the image to remove the image
• Zoom to fit – When enabled, the image will be scaled to fill the entire widget area. This may result in zooming in on the image to accommodate the widget's dimensions
• Round corners – Round the corners of the widget between the values 0px and 100px. A larger value will make the widget corners appear rounder whereas a lower value will make them appear sharper
• Add link – Add a link to the image. This means that when users click on the image, they will be redirected to the link attached
• Alt text – Provide an alternative text to make functional images more accessible
• Widget header – Add a header to the widget. Once toggled, you can type the widget’s header in the text field that appears above the widget

Styles

• Background color – Select the background color of the section. The colors available to you will depend on what the system default is and the brand style you are using
• Padding – Adjust the amount of background visible behind the widget. You can set a value between 0px and 100px. A larger value will show more of the background, making the section header and content appear smaller. A smaller value will minimize the background visibility, making the widget appear larger. Adjust the slider to fine-tune the amount of padding
• Round corners – Round the corners of the widget between the values 0px and 100px. A larger value will make the widget corners appear rounder, whereas a lower value will make them appear sharper

More information about widgets

To read more about what widgets are and how to resize, copy, and delete them, please refer to this article.

FAQs

Can I crop images within the widget?

Yes, you can use the image editor or the image widget’s cropping tool. You can find steps on the latter below:

1. Hover your mouse over the widget until it highlights blue, then click on it
2. Click the crop icon
3. Drag the crop frame using the scale at the bottom
4. (Optional): Use the other icons to rotate, mirror, or undo/redo changes
5. Click Done to apply the changes

Can I add multiple images to a single widget?

The image widget is designed to display a single image. To display multiple images, you can add multiple image widgets within a section.

How can I make my images accessible to users with visual impairments?

• Alt text – Provide descriptive alt text for each image. This text will be read aloud by screen readers and can help users understand the image content
• Image contrast – Ensure sufficient color contrast between the image and its background to improve visibility for users with low vision. You can edit image contrast using the image editor

What image formats are supported?

Common image formats like JPEG, PNG, and GIF are supported.