photo display options

Preparing & Displaying Photos

Photo Display Options

Last Updated 2/2010


IntroductionPhotos are one of the most commonly used content types. There are two general types of photos you might add to your website:

1. Showcase or view book photos: You might use these photos on the homepage, for the campus tour, or as sidebar or accent images.

2. Candid photos: You might use these photos to exhibit events such as an alumni reunion or pep rally.

The type of photos you upload may determine where on your website they appear. It may also dictate which display format you use.


Display FormatWhen you first add a photo category to a page (or portal), you will need to choose a display format using the Channel Options.

There are 5 display formats to choose from:

- Embedded Player (HTML)- Embedded Player (Flash)- Gallery View- List View- Thumbnail View


Embedded Player (HTML) Displaying a Single Photo

Many times a single accent photo is added to the sidebar of a page. The Embedded HTML Player is an ideal format for displaying these photos.

Tip: Don’t forget to set the Channel Style by going to the Channel Options.


Embedded Player (HTML) Displaying Stacked Photos

You can also stack multiple photos in the sidebar of a page using the Embedded HTML Player.

Tip: To create stacked photos, each photo must be in its own album in the photo category.

Also under Channel Options > Embedded Player, make sure “Multiple Item Display Mode: Stacked” is selected for the HTML Player Options.


Embedded Player (HTML) Displaying Photos in a Gallery

Another way to display multiple photos is in a click-through or rotating gallery. The Embedded HTML Player can be used in this way to display showcase photos (such as for a campus tour) or for candid photos.

Tip: The Embedded HTML Player will expand to fit the tallest and widest photo in the gallery. To avoid blank space around smaller photos, make sure all photos are cropped to the same dimensions.


Embedded Player (Flash)Displaying Photos in a Gallery

Similar to the Embedded HTML Player, the Embedded Flash Player allows you to display photos in a click-through or rotating gallery. This display format is useful for showcase photos (such as for a campus tour) or for candid photos.

When you add the Embedded Flash Player to a page, it will automatically resize itself to fit in the page column (or you can enter a custom height and width). The photos will also automatically be centered in the player. Because of this, it is not as important that you crop all of the photos to the same dimension like you would with the Embedded HTML Player.Tip: To find a page’s column widths, go to Edit Page. Your standard-sized photos should not be wider than the column widths.


Embedded Player (HTML & Flash) Displaying Zoom Photos

Each photo you upload can have three versions: thumb, standard and zoom. When you add an Embedded Player to a page/portal, it will display the standard version of the photo. However, users can opt to view the zoom version by clicking on the photo in the Embedded HTML Player or by clicking the Full Screen icon in the Embedded Flash Player.

Tip: To create zoom photos, make sure the zoom option is enabled in the photo category. Also, the photo you upload must be the zoom-sized photo (for example, upload a photo that is 800 x 800px instead of a photo that is 200 x 200px). Podium will then automatically create the standard-sized photo based on the specified dimensions.


Embedded Player OptionsWhether you use the Embedded HTML Player or the Embedded Flash Player, you will be able to set display features for the player itself. Your selections will have an important effect on how your photos are showcased on the page.

Go to Channel Options > Embedded Player.

Among your options for the HTML Player are:– Manual or automatic photo rotation– Next & Back button appearance

Among your options for the Flash Player are:– Manual or automatic photo rotation– Transition style and length– Photo caption appearance– Navigation (play, pause, etc.) appearance


Gallery View

The Gallery View format is ideal for displaying multiple albums on a page, especially of candid photos. Users can click through the individual album photos or click Play to view the zoom photos in the flash player.

Tip: Mark albums as “Featured” to highlight new or important photos.


Thumbnail ViewSimilar to Gallery View, Thumbnail View is ideal for displaying multiple albums on a page. Users can click through the individual album photos or click Play to view the zoom photos in the flash player. Tip: Give users the ability

to download photos. On the album details page, users can download individual photos or the entire album.


List ViewSimilar to Gallery View and Thumbnail View, List View is ideal for displaying multiple albums on a page. Users can click through the individual album photos or click Play to view the zoom photos in the flash player. Tip: For every photo you

upload, you can enter a title, caption and long description. You can also enter an album description.


Media Gallery Master PageThe Media Gallery Master Page is a photo library where users can browse through multiple photo categories and albums. This page can be public or private, and can display user associated content. Managers will determine which categories display and set the default display settings.

The Media Gallery Master Page can be accessed from your left-hand Podium navigation.

Tip: Allow users to search for specific photos in the Media Gallery by tagging them with keywords such as “athletics” or “graduation.”


Photos in a Text CategoryThe five display formats previously mentioned can be used when photos are added to a Photo category. However, photos can also be added to a Text category. This allows you to wrap text around the photo(s).

Tip: Use the Channel Options to determine where the photo(s) appear in relation to the text (on the left, on the right, etc).


Preparing Photos for PodiumCropping & Saving Images for the Web


Introduction & FAQBefore you upload photos to your website, it is important that you prepare them for the web. This includes cropping and saving the photos for the web.

This document provides instructions on how to crop and save photos for the web using Photoshop Elements. If you are using different photo editing software, please reference that product’s documentation.

Why should I crop my photos and save them for the web?

Oftentimes, when a raw photo is downloaded from your camera directly to your computer, the file dimensions and file size are fairly large. For example, the photo you took at the varsity football game could be 5MB and 3000 pixels wide by 3000 pixels high. By cropping the photo and saving it for the web, you can drastically reduce the file dimensions (so the 3000px photo will display nicely in your sidebar that may only be 250px wide), and you can drastically reduce the file size (so 5MB becomes 70KB). With smaller file sizes, your website visitors will have a much faster load time and a much easier time viewing your photos.


Introduction & FAQWhat dimension should I crop my photos to?

Your photo dimensions will vary, depending on where the photos are going to appear on your site (in a sidebar, on the homepage, in the embedded flash player, etc). Your Project Lead (or a Support Representative) will provide you with your Site Specs document, which will contain the exact photo dimensions for your site.

If you use the Embedded HTML Player (such as if you add photos to a sidebar), it is important that you crop your photos to the dimensions specified in your Site Specs document. This will help prevent the photos from appearing too small or from “spilling” off the page. If you use the Embedded HTML player for a photo gallery, make sure all of the photos are cropped to the same dimension. This will provide for consistently sized photo galleries and prevent white space from appearing around your photos (as you can see in the example to the left).

If you use the Embedded Flash Player, the photos will automatically be centered in the player and the player will automatically resize itself to the width of the page column. Therefore, it is not as important that you crop all of the photos to the same dimension. However, all photos should be saved for the web, regardless of their dimension.


Introduction & FAQWhat are the Max Width and Max Height options in the photo category?

Podium has its own default dimensions for the thumbnail, standard and zoom versions of a photo:

Thumbnail: 80 x 80 pixels Standard: 320 x 320 pixels Zoom: 800 x 800 pixels

These maximum dimensions will automatically be applied to the photos you upload, unless you override them by entering a custom max width and max height in the photo category (such as from your Site Specs document).

This is especially important to do when using the Embedded HTML Player. For example, let’s say you need to add a photo to the sidebar of a page, which is only 190px wide. You would not want to use the default width of 320px because the photo would be too wide for the sidebar. Instead, you would enter 190 for the max width in the photo category. Your photo would then never be wider than 190px and would fit nicely in your sidebar.

Even if you enter a custom max width and height, it is still recommended that you crop your images to the correct dimension and save them for the web to ensure that you get the best quality and file size.


Initial Photoshop Setup1. Open Photoshop Elements

2. On a Mac, go to Photoshop Elements > Preferences > Units & Rulers

On a PC, go to Edit > Preferences > Units & Rulers

3. In the Rulers dropdown, select Pixels

In the Type dropdown, select Points

Set the Screen Resolution to 72 pixels/inch


Cropping PhotosStep 1

Open your file in Photoshop

a. Go to File > Open

b. Locate the desired file

c. Click Open or double click the file name



a. Select the Crop Tool (located in your Tools Palette)

b. On the Crop Tool Options Bar (at the top of the screen), enter the width and height values (in pixels [px]) and the resolution (72 pixels/inch)



a. Drag the marquee tool on the image until the desired area is selected

b. Press Enter/Return or double click inside the marquee to crop the photo

Notes:

To resize the marquee, drag any handle on the box.

To reposition the marquee, place your pointer inside the marquee and drag it to the desired location.


Saving Photos for the Weba. Go To File > Save for Web

b. In the Save for Web dialog box:

- Select JPEG for the format - Select High or Very High for the quality

c. Click OK

d. Choose where to save the image and click Save

Notes: In the bottom left-hand corner of the Save for Web

dialog box, you will see the file format (jpeg) and the file size. First instinct may be to set the image at the highest quality, but this will increase the file size and consequently increase the load time. While you are in the Save for Web dialog box, you can select different quality settings to view the result and the subsequent file size. The key is to find the most acceptable quality at the smallest size. “High” is a safe setting in most scenarios.


Additional Resources

Adobe Photoshop Elements Help and Support:http://www.adobe.com/support/photoshopelements/

http://www.adobe.com/support/photoshopelements/



photo display options

Documents

embedded html player

multiple photos

showcase photos

candid photos

embedded flash player

html player options

smaller photos

type of photos