dominican logo top
 

Picasa

How to set up and embed a Picasa slideshow on the Dominican website.

Example Embedded Slideshow

 

Creating a Slideshow on Picasa

To create a slideshow you'll access Picasa Web Albums from Google and upload photos into an album. From there, you can create a slideshow and use the embed code on the Dominican website to display your slideshow.

  1. Sign into your departmental (preferred) or individual Google account 
    1. For example, you can do this by signing in to your Dominican Gmail in a web browser
  2. Now navigate to http://picasaweb.google.com
    1. Note: If prompted, you don't need to download the Picasa application in order to create a slideshow
  3. Click on the "Upload" button to pick and upload your photos
  4. Once the photos have uploaded, click on each one to add a caption as needed
    1. (The caption will display in the slideshow if you enable captions when creating the slideshow)
  5. Once your photos are all uploaded, navigate into your new album
  6. Click on Actions > Album Properties 
    1. Make sure the visibility is set to Public
    2. Give your album a Name
  7. On the right hand side of the screen, click on "Link to this album"
    1. Click on the option to "Embed Slideshow"
    2. Select appropriate options for your slideshow and then copy the embed code
    3. A width of 600px will work well on most pages
  8. Now that you have copied the embed code, you can paste it into your webpage

Options for Embedding Picasa Slideshows on Pages

Adding the embed code itself is straightforward. Go into the HTML view of the page editor and paste the embed code where you would like your slideshow to appear on the page.

After that, you can add some styling if you would like. To have the slideshow float in a light grey box that is the width of your page add this code before embed code:

<div class="row">
<div class="span9" style="background-color:#eeeeee; text-align:center; ">

After your embed code, end the row and span divs:

</div>
</div>

To change the background color of the slideshow itself, replace "RGB=0x000000" (which is black) in the embed code with the code for the color you'd like to use. For example, #eeeeee is a light grey that will match the div you made above, so you could do the following:

RGB=eeeeee

Below is the the complete embed code and wrapper row and span divs for reference. Make sure to use the correct embed code for your slideshow!

Screen Shot 2013-01-31 at 2.25.14 PM.png


Common Sites & Pages


Students

Faculty & Staff

Alumni/Parents