Hostinger AI Builder: How to create an image gallery in agentic mode

Create a dynamic image gallery for your Hostinger AI Builder agentic mode website, managed directly from the Data tab. This setup works well for portfolios, product showcases, or event photos, since your website updates automatically whenever you add or replace an image in the Data tab.

Step 1 – Prompt AI Builder to create the gallery

In the Hostinger AI Builder chat, use a specific prompt to generate the gallery structure and the backend collection.

1. Open the Hostinger AI Builder chat interface.
2. Enter a prompt that defines both the design and the data source, such as: “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”

Step 2 – Access the Data tab

Once Hostinger AI Builder builds your gallery, you must access the data to manage the content.

1. Open your project in Hostinger AI Builder.
2. Click the Data toggle at the top of the preview screen.
3. Locate the Gallery collection in the left panel.
   

Step 3 – Add images to the gallery

You can now populate your gallery without editing the website design.

1. Select the Gallery collection and click Add record.
   
   
2. Upload your file in the image field.
   
   
3. Add a caption in the caption field if desired.
4. Click Create.
   
   
5. Repeat these steps for each photo you wish to display.

Step 4 – Edit or remove gallery images

Manage your existing records to keep your gallery up to date.

1. Replace an image: Click the specific record, update the image field, and save the changes.
   
   
2. Delete an image: Select the image and click “Delete selected”.
   
   

Ensure you publish the changes if you want to see the images on the live website. Once done, your image gallery will be fully functional and easy to update.