iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To create an image gallery in Hostinger AI Builder’s agentic mode, describe the gallery in a chat request and ask for two things at once: a gallery section on the page and a data collection named Gallery to hold the photos. The builder generates the section and the collection. You then add each photo as a record in the Data view. Records only reach the published site if they are placed in Live data, not Test data.
What agentic mode does for a gallery
Hostinger describes agentic mode as editing a website through chat, while Manual mode is drag-and-drop visual editing. In agentic mode, the gallery is not a single widget you style by hand. It is a visual section that reads from a collection of records, so the images you add in the Data view are the images the gallery displays. Hostinger’s AI Builder overview notes that agentic mode uses AI credits. The sources reviewed do not state how many credits a gallery request consumes, so check your account’s credit balance before you start a large build.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
How to Host your own Web Server | $15.60 | Buy on Amazon |
Before you start
- A Hostinger AI Builder project opened in agentic mode.
- The images you plan to use, ideally resized and named in the order you want them to appear. Hostinger’s instructions do not set a file-size or format limit for the image field, so check the upload dialog for any restriction it shows.
- A decision on layout. Hostinger recommends stating whether you want a grid or masonry layout and how many columns you want.
Step-by-step: building the gallery
- Open your project and switch to agentic mode, the chat-based editor.
- Send a request that describes the gallery’s page, layout, and data source. The prompt in the next section is a working starting point.
- When the builder finishes, open the Data control and locate the collection named Gallery. If the Data control or the collection is missing, resend the gallery prompt so the collection is created. If the Data area still reports that it is unavailable, Hostinger’s guide to managing files and data in agentic mode describes enabling integrated storage for the project.
- Select the Gallery collection and choose to add a record. Upload an image into the image field, enter an optional caption, and create the record. Repeat for every photo.
- To replace a photo, edit the existing record and update its image field. Keep the record so the gallery layout does not need to be rebuilt.
- To remove a photo, select the record or records and delete them.
- Confirm the records are in Live data, then publish the project. The next section explains why this step matters.
A prompt you can adapt
Hostinger’s gallery example uses a request along these lines. Change the page, layout, and column count to fit your site rather than expecting the builder to reproduce it word for word:
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteCreate a photo gallery section on my homepage. Store the gallery images in a data collection called "Gallery". Each entry should have an image field and an optional caption field. Display the images in a grid layout with three columns. The gallery should automatically show all images added to the Gallery collection.
#1 Best Overall
Naming the collection exactly “Gallery” and asking for the gallery to show all records in that collection makes the connection between the section and the data explicit. If the first result uses a different layout than you requested, send a follow-up message naming the layout and column count you want.
Test data and Live data
Hostinger’s gallery guide states the rule that matters most for publishing: publishing pushes structural changes only, not data rows. In practice, the section design and the collection setup travel to the live site when you publish, but the photos do not travel with them. Rows in Test data do not appear on the published site. Add the records you want visitors to see to Live data, and keep Test data for drafts you are still reviewing.
When you change a photo after launch, the same logic applies. Edit or delete the record in Live data for the change to show on the published site.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Agentic gallery or manual Gallery element
Hostinger also documents a Gallery element in its manual-mode Website Builder guide. The two workflows are related in purpose but are not the same process, and the manual guide’s editor controls should not be treated as the agentic-mode procedure.
| Aspect | Agentic mode (AI Builder) | Manual mode (Gallery element) |
|---|---|---|
| How you create it | Describe the gallery in a chat request | Add a Gallery element from the visual editor |
| Where images are stored | As records in a Gallery collection in the Data view | Not stated in the manual-mode gallery guide |
| Layout choices | Stated in the prompt, such as grid or masonry and column count; the builder may not match the request exactly | Grid or masonry, images per row, spacing, and click behavior |
| Test and Live separation | Applies to gallery records | Not stated in the manual-mode gallery guide |
| AI credit use | Agentic mode uses AI credits (amount per request not stated) | Not stated; the manual editor is drag-and-drop |
Choose agentic mode if you want the gallery to be driven by a managed collection that you can update by adding, replacing, or deleting records. Choose the manual Gallery element if you prefer to adjust its visual settings directly in the editor.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting
- The Data control is missing or the Gallery collection does not exist: resend the gallery prompt so the builder creates the collection. If the Data area still reports that it is unavailable, enable integrated storage as described in Hostinger’s file and data guide for agentic mode.
- Photos are missing from the live site: check that the records were created in Live data rather than Test data, then publish the project again.
- A photo is outdated or wrong: edit the record and replace the image in its image field instead of asking the builder to rebuild the gallery.
- The layout is not what you asked for: restate the layout and column count in a new chat message. Hostinger’s guidance recommends naming these settings but does not promise an exact match on the first attempt.
- You need a conventional visual gallery editor: use the manual-mode Gallery element. The sources reviewed do not establish that it works interchangeably with the agentic data-backed collection.
Current limits of this guide
This guide is based on Hostinger’s published help articles and product overview. It does not reflect a hands-on build of the workflow, and the interface labels and behaviors described may change as Hostinger updates AI Builder. If a menu name or button differs from the steps above, look for the closest equivalent in the Data view.
Hostinger’s help centre describes the gallery feature as “a dynamic image gallery for your Hostinger AI Builder agentic mode website, managed directly from the Data tab.” Use that as the reference point when the interface changes.
Recommended Free Tools
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
