Adding a Photo Gallery

Getting Started Guide

Adding Photo Galleries

The OpenScholar software we use for Research Profiles includes a basic photo gallery tool, but you can do more if you use an embedded photo slideshow such as the ones you can create with Google's free Picasa service. (See a good example on Dave Hilton's profile page.) You also can use Flickr or other online services, but they may not support displaying captions along with your photos in embedded slideshows.

Using the built-in gallery tool

  1. Prepare your images
    • Files must be no larger than 2 MB and saved in either the jpg, png or gif format.Images will be dynamically resized to the available display area for online use, but the maximum display is 1024x768 pixels, so you may want to save them that size or smaller.
  2. Turn on your gallery option
    • While logged into Research Profiles, go to Site Building >> Features and turn your "Image gallery" option from "disabled" to "public," then hit "Save for [your name]" at the bottom of the page.
    • This will create an Images page to host your galleries and put that page into your left-hand navigation menu as "Images." (To change that name, go to Site Building >> Menus and type the new name into the Images item, then hit "Save" on the bottom of the page.)
  3. Create a gallery
    • From your Scripps Scholars home page or from the Images page itself, select "Add Gallery" from your green menu of "Add..." options. This will open up a form where you can name and describe your gallery, which will have its own page, but which will have its thumbnails displayed on the Images page.
  4. Add images
    • You can add images to a gallery from either the Images page itself or the individual gallery page. In either case, you can only add images one at a time by clicking on the "Add Image" link and providing a title while navigating to the file to be uploaded. (Note that the title only displays above the thumbnail of the image on the gallery page, not on the Images page.)
    • Clicking on the displayed images in either case will open them in up a slideshow window superimposed over the page. That slideshow won't display the title and will display all the images on the page you start from -- so if you click on an image on the Images page, the slideshow will include all the images from all the galleries.

Using the embedded gallery approach

    1. Prepare your images
      • Google will take files of any size, but the free account will only let you store up to 5 GB of material -- unless the files are 2048 pixels or smaller. If you don't think you'll have hundreds of photos, go ahead and upload them at full size. Otherwise, resize them to 2048 pixels width or height and Google will let you upload as many as you like. (If you use photo management software such as Lightroom or Adobe Bridge, any captions you add will be imported by Google.)
    2. Create a Picasa gallery
      • If you have a Google apps account through SIO, you can access your photos account by going to, selecting the "More" option from the menu and choosing Photos.
      • Select "Upload," name your album with whatever public name you wish it to have and add photos by browsing to them or dragging them onto the dropbox and hitting "Save" when done.
      • Add captions (if needed) by opening each photo individually and clicking on the "Add a Caption" link below the image and saving.
    3. Get your embed code
      • From your gallery's main page -- accessible by clicking on the gallery's name -- look all the way to the right of the screen for the gallery thumbnail and a little lock icon next to the words "Only you (edit)." This means only you can see these images and we need to change that before you can share the gallery.
      • Click on "edit" and wait for the Edit album information box to pop up. Look to the bottom where it says "Visibility" and change that to "Public on the web," then hit "Save changes."
      • Click on the "Link to this album" link below to reveal new options, including "Embed Slideshow."

    • Click on "Embed Slideshow" to get another pop-up window labelled "Create a portable slideshow for your website, blog, Myspace, etc." Here you can customize your slideshow by setting the size -- Medium (400px) or Large (600px) will fit our pages well -- and clicking the boxes to "Show captions" or "Autoplay" when users come to your page. When ready, click or double-click the yellow field below "Embed slideshow" to select your embed text, then copy it. (You may want to paste this into a text document for safekeeping.)
  1. Create your gallery page
    • Back at your Scripps Scholars home page, click on the green "Add New" menu and choose the "Add Page" option to get the "Create Page" form. Add a name for the page and any introductory text you would like to use for the gallery.
    • Click on the "HTML View" link to change the Body field to the raw HTML view. Don't be afraid - just paste the embed code in below your introductory text and click on "Rich-text Editor View" to go back. The body field should now display the slideshow.
    • Don't hit "Save" yet! If you want this page to have its own link in your left-hand navigation, click on "Advanced Options" and in the "Menu Settings" box that is revealed change the "Choose a menu" settings from "Not in a menu" to "Primary menu" and then type the link name you'd like to use in the text box that shows up below.
    • Then hit "Save."