{"id":10173,"date":"2026-04-29T16:20:31","date_gmt":"2026-04-29T16:20:31","guid":{"rendered":"https:\/\/www.hostinger.com\/support\/?p=10173"},"modified":"2026-04-29T16:23:55","modified_gmt":"2026-04-29T16:23:55","slug":"how-to-create-an-image-gallery-in-hostinger-horizons","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/how-to-create-an-image-gallery-in-hostinger-horizons\/","title":{"rendered":"How to create an image gallery in Hostinger Horizons"},"content":{"rendered":"

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.<\/span><\/p>

Step 1: Prompt Horizons to create the gallery<\/b><\/h3>

In the Hostinger Horizons chat, use a specific prompt to generate the gallery structure and the backend collection.<\/span><\/p>

    \n
  1. Open the Horizons chat<\/strong> interface.<\/span><\/li>\n
  2. Enter a prompt<\/strong> that defines both the design and the data source, such as:<\/span> “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”<\/span><\/i><\/li>\n<\/ol>
    Be specific about your preferred layout, such as grid or masonry, and the number of columns to get the best result.<\/div>

    Step 2: Access the Data tab<\/b><\/h3>

    Once Hostinger Horizons builds your gallery, you must access the data to manage the content.<\/span><\/p>

      \n
    1. Open your project in Horizons.<\/span><\/li>\n
    2. Click the <\/span>Data<\/b> toggle at the top of the preview screen.<\/span><\/li>\n
    3. Locate the <\/span>Gallery<\/b> collection in the left panel.
      \n\"\"<\/span><\/li>\n<\/ol>
      If the <\/span>Data<\/b> toggle is unavailable, re-send the prompt from Step 1 to ensure Hostinger Horizons creates the collection correctly.<\/span><\/div>

      Step 3: Add images to the Hostinger Horizons gallery<\/b><\/h3>

      You can now populate your gallery without editing the website design.<\/span><\/p>

        \n
      1. Select the <\/span>Gallery<\/b> collection and click <\/span>Add record<\/b>.
        \n\"\"<\/span>
        \n<\/span><\/li>\n
      2. Upload your file in the image field.
        \n\"\"<\/span>
        \n<\/span><\/li>\n
      3. Add a caption in the caption field if desired.<\/span><\/li>\n
      4. Click <\/span>Create<\/b>.
        \n\"\"<\/span>
        \n<\/span><\/li>\n
      5. Repeat these steps for each photo you wish to display.<\/span><\/li>\n<\/ol>

        Step 4: Edit or remove gallery images<\/b><\/h3>

        Manage your existing records to keep your gallery up to date.<\/span><\/p>

          \n
        1. Replace an image<\/b>: Click the specific record, update the image field, and save the changes.
          \n\"\"<\/span>
          \n<\/span><\/li>\n
        2. Delete an image<\/b>: Select the image and click “Delete selected”.
          \n\"\"<\/span>
          \n<\/span><\/li>\n<\/ol>

          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. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

          Create a dynamic photo gallery using Hostinger Horizons<\/p>\n","protected":false},"author":591,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[293],"tags":[],"class_list":["post-10173","post","type-post","status-publish","format-standard","hentry","category-hostinger-horizons"],"hreflangs":[],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/10173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/591"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=10173"}],"version-history":[{"count":5,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/10173\/revisions"}],"predecessor-version":[{"id":10184,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/10173\/revisions\/10184"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=10173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=10173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=10173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}