To create an image gallery in Hostinger AI Builder’s agentic mode, describe the gallery section in the chat and ask the builder to connect it to a data collection named Gallery. You then manage the photos as records in the Data tab. Before you publish, the images have to be added under Live data, because Hostinger’s help documentation says publishing pushes structural changes only, not data rows.
What you need before you start
- An existing AI Builder project opened in agentic mode. Hostinger describes Manual mode as drag-and-drop visual editing and Agentic mode as editing through chat. The gallery steps below apply only to agentic mode.
- AI credits. Hostinger’s AI Builder product guide states that agentic mode uses AI credits, so each chat request draws on your allowance.
- Image files ready to upload. The gallery is populated one record at a time, so it helps to have the final photos, and their order, prepared in advance.
- A layout decision. Decide between a grid and a masonry layout and how many columns you want. Hostinger’s gallery guidance recommends stating both in the prompt.
How the gallery is built
An agentic-mode gallery has two linked parts. The first is a visual section on a page of your site. The second is a collection in the project’s Data tab, named Gallery, which stores each image as a record with an image field and an optional caption field. The chat request creates both parts. After that, the photos are managed in the Data tab, not by rebuilding the page section. This separation is why you can add, swap, or remove a photo without redesigning the gallery.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
How to Host your own Web Server | $15.60 | Buy on Amazon |
As an Amazon Associate I earn from qualifying purchases.
Creating the gallery step by step
- Start a chat request in agentic mode. Describe the page, the layout, and the data source. Use the starter prompt below as a base and adjust the page and column count to your project.
- Check the generated collection. Open the Data tab and look for the Gallery collection. If the Data tab does not show it, Hostinger’s gallery article says to resend the prompt so the builder creates the collection.
- Add the first image. Select the Gallery collection, choose to add a record, upload an image into the image field, enter an optional caption, and create the record.
- Repeat for each photo. Each image is its own record, so a gallery of twelve photos means twelve records.
- Publish after the records are in Live data. Confirm the records appear under Live data, then publish the project. Records that exist only in Test data will not appear on the published site.
Starter prompt
Hostinger’s example prompt for this workflow reads as follows. Treat it as a starting point, not a guaranteed specification, because the builder’s output depends on your existing pages and wording.
Free tools Windows power users keep installed
One-click scans. No signup required.
Create 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. The gallery should automatically show all images added to the Gallery collection.
Adding, replacing, and deleting images
All image maintenance happens in the Gallery collection. The gallery section on the page does not need to be edited for these tasks.
#1 Best Overall
Adding an image
Create a new record in the Gallery collection and upload the file into the image field. Add a caption if you want one. The image should appear on the page once the record is in Live data and the project is published.
Replacing an image
Edit the existing record and update its image field. Changing the record keeps its position and caption settings, so you do not need to rebuild the gallery. Hostinger’s guidance treats image replacement as a record edit for this reason.
Deleting images
Select the records you want to remove and delete them. Deleting a record in the Gallery collection removes that photo from the gallery, not the section design.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Test data, Live data, and publishing
The Data tab keeps Test data and Live data separate, and this is the detail most likely to cause a gallery to look empty after launch. Hostinger’s guidance is explicit: publishing carries structural changes forward but does not copy data rows. In practice:
- Records you add while working in Test data stay in Test data.
- Only records in Live data are shown on the published site.
- Publishing alone will not move your photos into Live data, so check Live data before you publish.
Hostinger’s Help Center states the principle directly: “Publishing pushes structural changes only, not data rows.”
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Agentic-mode gallery or manual Gallery element
Hostinger also documents a separate Gallery element in manual mode, described in its Website Builder article “How to Add an Image Gallery”. The two workflows produce different kinds of gallery, so choose based on how you want to manage images.
| Aspect | Agentic mode (AI Builder) | Manual mode (Gallery element) |
|---|---|---|
| How it is created | Chat prompt that builds a section and a Gallery collection | Added from the visual editor |
| Where images are stored | As records in the Gallery collection in the Data tab | Managed within the Gallery element itself; storage location not stated in the manual-mode article |
| Layout options | Grid or masonry, plus column count, requested in the prompt | Grid or masonry, images per row, spacing, and click behavior set in the editor |
| Publishing images | Records must be in Live data before publishing | Not stated in the manual-mode article |
| Cost in AI credits | Agentic mode uses AI credits | Not stated in the manual-mode article |
Hostinger’s documentation does not say the two galleries are interchangeable, so avoid moving a gallery from one workflow to the other without checking how the images are stored.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Troubleshooting
- The Data tab does not show a Gallery collection. Resend the gallery prompt so the builder creates the collection. Hostinger’s broader guide on managing files and data in agentic mode also describes enabling integrated storage if Data is unavailable.
- The gallery is empty on the live site. Confirm the records were created in Live data rather than Test data, then publish the project again.
- A photo is wrong or outdated. Edit the record and replace the image field. Do not rebuild the section.
- The layout is not what you asked for. Restate the layout and column count in a new chat request. Hostinger’s guidance advises specifying these settings, but it does not promise that every requested layout will be generated exactly.
- You need manual control over the gallery design. Use the manual-mode Gallery element instead, and check that workflow’s own instructions.
This walkthrough is based on Hostinger’s published help documentation for AI Builder. Menu names and button labels may change as the product is updated, so if a label differs, look for the same action under the Data tab or in the chat. The steps above reflect the documented workflow rather than a verified test of every project configuration.
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.
