Images bring your pages to life. Whether you're showcasing products, setting the mood with a hero background, or building a photo gallery, Giant Context gives you flexible tools for adding, managing, and optimizing images across your website.

Giant Context offers two primary ways to display images on your pages. Image blocks are perfect for standalone visuals—like product photos or infographics—giving you full control over sizing, alignment, and accessibility through alt text. For more structured layouts, image boxes combine an image, heading, and descriptive text into a single, cohesive unit, making them ideal for feature sections or service overviews.

Giant Context block editor displaying an Image Box block with a side-by-side image and text layout.

Build Engaging Layouts with Image Boxes

Pair your visuals with compelling copy to guide visitors through your page. The visual builder gives you fine-grained control over image positioning, responsive spacing, and alignment to ensure your content looks perfect on any device.

Rule of Thumb

If your image needs accompanying text directly attached to it, use an image box. If the image stands alone (with at most a caption), use a standard image block.

Uploading Images

There are several ways to get images into your pages:

Central File Manager

Manage all your media in one place. Upload images, organize them into folders, and access them from any block's media picker.

All uploaded images are stored securely in your project and can be reused across pages, headers, footers, and emails.

AI image generation

Giant Context can generate custom images directly from text descriptions using AI. To create a new image, use the Generate Image feature in the file manager or ask the AI assistant. Simply describe what you want in plain language—for example, "a modern office with floor-to-ceiling windows overlooking a city skyline." You don't need to include style directions like "photorealistic" or "3D render," because your project's branding context automatically controls the visual style to ensure every image complements your page design.

AI-Generated Hero Backgrounds

When you set a hero block's background type to "image", the system automatically generates background images using your branding context to complement your page design.

Image settings

Image optimization

Upload High-Quality Originals

Upload the highest-quality image you have (aiming for at least 2000 pixels wide) and let the platform handle the rest. There is no need to manually resize or create multiple versions.

Hero background images

Hero block settings panel showing background configuration options

Master Your Background Styles

Take full control of your block's appearance with the Advanced Styles panel. Easily switch between image, video, color, or gradient backgrounds, and upload mobile-specific images to ensure your hero sections look perfect on any screen size.

Use an overlay for readability

When using a background image, add a semi-transparent dark overlay between the image and your text to ensure it remains legible. An opacity of 40 to 60 percent usually works best.

Gallery blocks arrange your images in a clean grid layout. You have full control over the presentation, including the number of columns, the gap between images, and the aspect ratio (choose from auto, 1:1, 4:3, 16:9, or 3:2). Enable the lightbox feature to let visitors click any image to view it full-screen, and choose whether to show or hide captions below each image.

Carousel blocks display images one at a time in a slideshow. Visitors navigate with arrows or dots, or you can enable autoplay to cycle through automatically. You can also set the interval between slides, enable looping, and adjust aspect ratios. Both blocks accept multiple images, each with its own alt text, caption, and optional link.

Giant Context block editor showing carousel settings and advanced styles panel.

Fine-Tune Galleries and Carousels

Take full control over how your images display. Select a carousel block to adjust navigation arrows, dots, and autoplay behavior. Use the Advanced Styles panel to set responsive margins, padding, and border radius that cascade perfectly from desktop to mobile.

Logo blocks

The Logo block displays your brand logo by pulling it directly from your project's branding settings. This ensures your logo remains consistent across headers, footers, and other placements throughout your site. You can easily control the logo's height and add a link, which is typically used to direct visitors back to your homepage.

Best practices and tips

Organize with folders

Set up folders in your file manager early to group images by page, campaign, or product line. Dropping files into the right place from day one saves you from untangling a messy library later.

Built byHuman

This content was designed and written by a human.