{"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-10-16T02:42:41","modified_gmt":"2026-10-16T02:42:41","slug":"how-to-create-an-image-gallery-in-hostinger-ai-builder-agentic-mode","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/how-to-create-an-image-gallery-in-hostinger-ai-builder-agentic-mode\/","title":{"rendered":"Hostinger AI Builder: How to create an image gallery in agentic mode"},"content":{"rendered":"

Create a dynamic image gallery for your Hostinger AI Builder<\/a> agentic mode website, managed directly from the Data<\/strong> tab. This setup works well for portfolios, product showcases, or event photos. New images you add in Test data<\/strong> appear on your live website when you publish. Edit images that are already on your live website in Live data.<\/strong><\/p>

Step 1 – Prompt AI Builder to create the gallery<\/b><\/h2>

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

    \n
  1. Open the Hostinger AI Builder 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><\/h2>

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

      \n
    1. Open your project in Hostinger AI Builder.<\/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\"Hostinger<\/span><\/li>\n<\/ol>
      If the <\/span>Data<\/b> toggle is unavailable, re-send the prompt from Step 1 to ensure Hostinger AI Builder creates the collection correctly.<\/span><\/div>

      Step 3 – Add images to the gallery<\/b><\/h2>

      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\"Data<\/span>
        \n<\/span><\/li>\n
      2. Upload your file in the image field.
        \n\"Gallery<\/span>
        \n<\/span><\/li>\n
      3. Add a caption in the caption field if desired.<\/span><\/li>\n
      4. Click <\/span>Create<\/b>.
        \n\"Create<\/span>
        \n<\/span><\/li>\n
      5. Repeat these steps for each photo you wish to display.<\/span><\/li>\n<\/ol>