Site Editor: Creating An Automated Gallery Page

It is possible to add images to a page and have those images show up automatically inside an attractive, clickable gallery.

  • If your site has already gone live and you'd like to add an automated gallery after the fact, contact client support and make a request for a developer to add the automated gallery code to the page.cfm layout file.

If the automated gallery code has been added, you can follow the steps below to create an automated gallery page within your site.


To set up an automated gallery page:

  1. In the left menu, click on Site Editor, and select Pages from the dropdown menu.

  2. If you are adding a new page to your navigation menu, create the page and drag and drop the page into the place you'd like it to display in your menu. If you are turning an existing page into an automated gallery, open the page you would like to use.

  3. Click on Page Properties in the left tab menu. Enter "Gallery" in the Page Keyword box.

  4. Scroll down to the bottom of the screen and click the Save button.

  5. Within the Page Content tab, you'll want to add the images you'd like in your gallery. To do so, click on the small "Image" icon to open the Image Selector.

  6. Within the Image Selector, you can access the File Navigator by clicking the little icon of a magnifying glass cuddling up to a folder.

  7. Once in the File Navigator, locate and enter the Image folder by clicking on the Image folder icon. If there already a folder called "gallery" inside the Image folder, click on it to enter it; if click on New Folder and name your new folder "gallery," then click on it to enter it.

  8. Using the Image Uploader, add all of the images you'd like to use in your gallery to the "gallery" folder discussed in the previous step.
  9. If you have made thumbnails (condensed versions of your gallery images), you can create a new folder, kept within the "gallery" folder, and name it "thumbs." Then, just like step #7, upload your thumbnail images to the "thumbs" folder.

    IMPORTANT: Each thumbnail image must have the same filename as its corresponding full-size image. For example, in the case of a large image file called "vineyard003.jpg" within the "gallery" folder, you'd include a smaller version, also called "vineyard003.jpg," inside the "thumbs" folder.

    ALSO IMPORTANT: Thumbnails aren't a must, but using thumbnails will make your gallery page load faster for the end user, so they're recommended.


  10. Once all of your gallery images have been uploaded into the "gallery" folder using the Image Uploader, add the images into the Page Content in the order you'd like them to appear on the Gallery page. You can include some text at the top of the page if you wish, but don't add anything else like text or spaces between the images; just add the images all in a row.


  11. Scroll down to the bottom of the screen and click the Save button.

  12. Test the page on the front end of your site to make sure the gallery is functioning correctly. If the gallery is not functioning correctly, here are some things you can check:
    • Have you confirmed that a vinSUITE developer has added the automated gallery code to your page.cfm layout file?
    • Did you put "Gallery" into the Page Keyword box within Page Properties?
    • Did you put the images you want to use in your gallery into the Page Content?
    • Is the "gallery" folder properly named, and contained within the Image folder? (And if necessary, is the "thumbs" folder properly named, and contained within the "gallery" folder?


Congratulations! You have successfully created an automated gallery page.


Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Powered by Zendesk