Working with images
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 suited to standalone visuals, like product photos or infographics, and give you 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 unit, making them suited to feature sections or service overviews.
Build engaging layouts with image boxes
Pair your visuals with copy to guide visitors through your page. The visual builder gives you control over image positioning, responsive spacing and alignment across devices.
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 also generate images from a text description using the Generate Image feature in the file manager, or by asking the Assistant. See Files and media library for how AI image generation works. You don't need to add style directions like "photorealistic" or "3D render" to your prompt, because your project's branding context controls the visual style automatically.
AI-generated hero backgrounds. When you set a hero block's background type to "image," the system 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 resize manually or create multiple versions.
Hero background images
Master your background styles
Take control of your block's appearance with the Advanced Styles panel. Switch between image, video, color or gradient backgrounds, and upload mobile-specific images so your hero sections display well 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 grid layout. You have 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.
Fine-tune galleries and carousels
Take 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 from desktop to mobile.
Logo blocks
The Logo block displays your brand logo by pulling it directly from your project's branding settings. This keeps your logo consistent across headers, footers and other placements throughout your site. You can control the logo's height and add a link, 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.