How to create an image gallery in Hostinger Horizons

Create a dynamic photo gallery using Hostinger Horizons

Updated 5 days ago

Creating an image gallery allows you to manage your photos directly from the data section. This setup is ideal for portfolios, product showcases, or event photos, as it ensures your website updates automatically whenever you add or replace an image in the data section.

Step 1: Prompt Horizons to create the gallery

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

  1. Open the Horizons 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”
Be specific about your preferred layout, such as grid or masonry, and the number of columns to get the best result.

Step 2: Access the Data tab

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

  1. Open your project in Horizons.
  2. Click the Data toggle at the top of the preview screen.
  3. Locate the Gallery collection in the left panel.
If the Data toggle is unavailable, re-send the prompt from Step 1 to ensure Hostinger Horizons creates the collection correctly.

Step 3: Add images to the Hostinger Horizons 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.