Photo Galleries - Using Embed Codes

They say a picture speaks a thousand words, a photo gallery speaks a thousand pictures (but you can use less).

Showing the success of a recent event, or adding the finishing touches to a news article. Photos can be used to help convey your message. The Schudio system makes it really easy to add a gallery of multiple images to your content. Create it, then embed it.

Creating Your Photo Gallery 

To add a new photo gallery go to the "Embed Codes" menu on the left hand side of the page. Select the submenu item "Photo Galleries" 

Then click the green "+ Create Gallery" button. A new page to add the details of your new gallery will appear.

The title of your gallery, and the description (optional). 

Then click save. 

The gallery is then saved and images can be added. The progress bar will indicate an image is uploading, and once it has completed thumbnails of the image will be shown. 

Images can be uploaded from your local computer using the purple "Upload Images" button, or from files already uploaded to the website by clicking "Select Images". Multiple files can be uploaded using either method. (Images can also be uploaded from your local computer into photo galleries using 'drag and drop')

To add a caption to an image, click the pencil icon next to the caption text at the bottom of the image.

As soon as an image is uploaded it is saved to the gallery, there's no additional save button to click to add them to the gallery.

Images can be edited directly within photo galleries by clicking the blue pencil. Changes saved here will replace the file used in the photo gallery. (The original isn't deleted, it's just removed from the photo gallery)

The gallery can be inserted into your page using the embed code for the photo gallery displayed at the top of the page or in the list of galleries.

Updating Your Photo Gallery

Galleries can be edited or updated at any time. Any changes to a gallery will be reflected on any pages they are displayed on. 

To add new images to an existing gallery click the gallery name in the list of photo galleries. New images can be added using the "Upload Images" (for images from a computer) or "Select Images" (for images already uploaded) buttons.

A caption can be added to the image using the pencil icon in the caption line.

Images can be re-ordered using the left and right arrows in the bottom right corner of each image.

If you would like to remove a photo from your photo gallery you should hit the red bin on the image you wish to delete. You will be asked to confirm your decision and be presented with two options:

Yes, delete it too - this option will delete the image from your file manage

No, just remove the image - will remove the image from the photo gallery but it will be stored in the file manager

Inserting Your Photo Gallery

Copy the embed code from the top of the page for the photo gallery or go back to the list of galleries and select the embed code from there. 

{gallery:Example Gallery}

Copy this embed code and paste it into the content box for the page you want to display the photo gallery. The photo gallery will then appear on the page of content.

To view all photo galleries on one page, go to your.domain//photo-galleries (replacing your.domain with your website address)

Display Options

It's great to add your photos in different ways to make your content varied and interesting.

To do this you should go to the content box where you would like to add the photo gallery. This could be a news article, event, blog or page. You will see under the content box there is an expandable box called Embed Codes. If you click on the box and select the "Photo Galleries" tab you will see a list of all the photo galleries that have been created. 

There are two embed codes for each of the galleries. The first one will display them as a grid down the page (If you have over 10 photos in your gallery, it may make your page a bit long) The second option will display them as a slideshow when you add it into your content. 

If you wanted to go an extra step and change the height, you can do so by adding |height:X to the end of your Gallery name. X being the number of pixels height you want.


{gallery-slideshow:Ski Trip|height:400}

Please note the separator between the embed code and the height is a pipe character. This is normally found by pressing shift and the button above enter.

Still need help? Contact Us Contact Us