Fluid images » Glasshouse documentation

Overview

A fluid image (also called a responsive image) is an image that automatically adjusts its size to fit the screen or browser window. This means the image will shrink or grow depending on the device or window size, so it always looks balanced on the page.

You can adjust how images display in Glasshouse pages by setting their width. This allows you to make images appear larger or smaller on the page while keeping them responsive.

How to set image width

Upload your image. See steps in How to upload and add images on this page.
Open the page editor and place your cursor where you want the image.
Select Insert image, choose the file you uploaded, then select Original and click Insert file.
In the Formats dropdown, choose Image width.
Select a percentage (for example, 50%) to set how wide the image should appear.
Publish the page to apply the changes.

Options

Image width (percentage) – choose how wide the image appears relative to the text area (e.g. 25%, 50%, 75%, 100%).
Responsive resizing – images automatically resize when learners adjust their browser window.
Image quality – upload a high-resolution file. Low-quality images may look blurry when displayed at larger sizes.

Best practices

Use 50% width for medium images that sit beside text.
Use 100% width for banners or full-page visuals.
Always upload a crisp, high-resolution file so images stay sharp at different sizes.
Preview the page before publishing to check how the image responds when you resize the window.