In this article you will learn how to create a custom image gallery to display any of your own images on your website. Often times this would be used in situations like showing off your own custom designed jewelry or items you've personalized using engraving techniques. If you want to show off more than just a few images at a time, we recommending creating a gallery to show off all of your beautiful, unique talent. 

To get started login to your site's Admin.


In This Article:

In the example below, we are working with a theoretical page showing some examples of custom jewelry. 

Create a Gallery

  • Start by creating a slideshow with the appropriate images included. We recommend that you optimize the size of these images before uploading so they are not large files that will slow down the load time of the site. 
  • Go to Content > Slide Shows 

  • Next, click add Slideshow:



  • Some options are for controlling the entire slide show (as opposed to individual slides). Many of these will likely not be used so in most cases you will only be using Status, Name and Type. The other options are optional and would only be used in particular cases.
    • You can set the Status of a slide show by marking the ENTIRE slide show as Active or Inactive (active shows on the site, inactive hides it from the site)
    • You can Name your slide show - if you are using multiples then we recommend being as specific as possible regarding what images are within that slide show and possibly where it will be used (ie, Home for the main homepage banner and maybe Custom Designs for one that showcases your custom design images).
    • You can choose by Type of banner you want it to be. Image Carousel is a simple set of slides, good for a quick carousel or gallery of images

Next, you need to add photos. There are 2 options for uploading your images.
The first option is to upload the images one at a time.
The second option is to upload all images at one time through a zip file.

Note: It is IMPORTANT to optimize your images before uploading them to the website to cut down on site load time. 

You can learn what size your images need to be before uploading by using the following instructions:

To upload your images one at a time: 

  • Scroll to the first Add New Slide and click to expand for options. 
  • Under Images & Video, you can upload an image from your computer. Click Choose File and then browse your computer files to find the image you want to upload. You can also drag and drop the image into the "no file selected" field.

To upload your images through a zip file: 

  • In the top right corner of the slideshow screen, click on Import Zip
    Note: You will need to create the zip file on your own computer before uploading to the Thinkspace admin. Depending on how many images you have, the page may take a while to load the images so please be patient and don't click off of the page while the images are loading.
  • Once you upload your images, you can add a few details to each image by clicking the slide name to expand for details. Note: Galleries do not require the details to be filled in so if you just want to show images with no extra details, you can skip the details and just Save.
  • From the Status dropdown select Active or Inactive for this one individual slide (active shows on the site, inactive hides it from the site). 
  • In the Order field, place a number to choose what order you'd like to this slide to sit in compared to your other slides. For example, the first slide can be set to Order 1 and the second slide can be set to Order 2. (Note: Lower numbers show up higher in the list, you can also use 0 and negative numbers).
  • In the Name field, place a name for the slide to help you find it more easily in the future.
  • In the Page Link field you can link the image to a separate page but in most cases, for galleries this will not be used.
  • If your Page Link goes to a page on your site then you can leave the Page Link Target set to Opens in Same Window. If your Page Link goes to a page off of your site then change the Page Link Target to Opens in New Window.
  • You can also add a Caption to the image if you have some more text you want to add outside of just a name for the image.
  • Once all of the images have been uploaded and details have been added, make sure to Save!


Add a Gallery to an Existing Page

  • Navigate to Content > Pages
  • Scroll down to the page you want to edit and click on the name of the page. In this example, we are using Custom Jewelry Designs.
  • Under Select a Dock click on Content.
  • In the Widget Library, click on the widget called Gallery and drag it into your Content dock.
  • Then click on the Gallery widget to edit the options.
  • Under Select a Gallery to Display, choose the slide show that you just created. In this case, we chose Custom.
  • Under Your Gallery Style, you can choose to show the images in a Grid style or in Masonry style.
    Note: The Masonry style tends to serve a better purpose for images of different shapes and sizes, while the Grid style is better for images that are very similar in shape and size. 
  • Under Clicking on an Image Will... you can either link to another page by choosing Link to a URL but in most cases we recommend choosing Open in Lightbox. When clicked, the Lightbox images will silhouette in the center of the screen and show a larger/zoomed version of the image. You are not required to use either option and can leave it blank if you prefer. 
  • You can add a border around each image by clicking the checkbox next to All styles: Add image border.
  • Under Grid Style: How to Display Image, you can choose Crop Image Size but it can only be used for the Grid style and will crop all images to be one uniform height. Note: The system will automatically crop the images so some may get cut off in awkward spots but right now there is no control over what portion of the image is cropped. 
  • Under Grid Style: # of Columns, you can choose how many images to display across the page. This will also determine how large the images are depending on how many are in a row. This option can also only be used with the Grid style.
  • Under Grid Style: Cropped Image Size, you can enter the height in pixels for each image if you've chosen to Crop Image Size. This option can also only be used with the Grid style. 
  • Under Masonry Style: Image Padding, you can choose how much space is between each image. This option can only be used with the Masonry style.
  • Custom Widget CSS Class(es) and Custom Widget Template Path will likely not be used. Please leave this spaces blank unless otherwise noted.
  • Then make sure to Save Widget and then reload your page to see the gallery.


Create a New Page for Gallery

  • From the Dashboard, navigate to Content > Pages
  • Click on Add Page
  • If you would like to start using this Page right away to check the box next to Published. If you want to use this page later, you can leave it as a Draft by leaving the checkbox unchecked.
  • You can choose a Category for this page to help you find it in the future. This is only used for your own admin organizational purposes and can be left blank.
  • In the Type/Template dropdown, choose General.
  • Choose the Title for your page. In this example we are calling it Custom Jewelry Designs. 
  • Leave the Page Slug field as is - it will fill in on its own as long as you check Unlock Slug.
  • Fill in the URL field with the link you'd like the customers to use to find the page. This often matches the slug but is not required to match. In this case we are including the broader category of Services so it displays as /services/custom-jewelry-designs/.
  • Click Save and Continue to continue editing this page.
  • From here, follow the instructions above to add the Gallery Widget and select photos to add.