Bates ICMS Webguide

Making Slide Shows

see also Renee's handout for slideshows for generic pages: http://abacus.bates.edu/ils/web/development/slideshow.html

The are two types of slideshows in use on the Bates College Website, namely;

Item	Thumbnail	Description
Generic Slide Show:
1.		This is mainly used mainly on subsite home pages on the Bates Website. Click on the thumbnail to view its location on the site
Home Page Slide Show:
2.		The use of this Slide Show is reserved exclusively for the Bates Home Page. Click on the thumbnail to view its location on the site

Step	What to do	Details
Prepare your images
1	Select your images, and scan them if necessary. Then size your images	The horizontal dimension should be 500 px wide and 331 px in height. Switch the dimensions for vertical pictures. It helps if your filenames indicate the sequence of the slideshow, ie: convocation-01.jpg, convocation-02.jpg, etc.
2	Thumbnails	For horizontal pictures, these should be 156px wide and 103px in height. Siwtch dimensions for vertical pictures. t helps if your filenames indicate the sequence of the slideshow, ie: convocation-01-th.jpg, convocation-02-th.jpg, etc.
3	Add the Bates watermark	This is not absolutely essential, but it is nice to identify each image as coming from Bates with a watermark of the Bates logo. You can pick up the watermark from the Belfast server: "\\Belfast\departments\College Relations\WEB-reference files\slideshow sample"
		1) Build two layered PSD's. One horizontal, one vertical. The top layer should contain the watermark layer.
		2) Show all layers. Save as JPG.
		3) Hide the top visible photo layer (not the watermark layer). Save as JPG.
		4) Repeat step #3 until you have saved off all the images.
		5) Note that thumbnails do not have watermarks.
4	Put the images on A4811	Import each image using FILE/IMPORT in publisher. Or, Create a subdirectory "slideshows" within your department directory and copy the images if you have filesharing priveledges (preferred method)
a. Generic Slide Show - directions link to visual instructions: http://abacus.bates.edu/ils/web/development/slideshow.html
b. Home Page Slide Show
The steps outlined below will outline the processes required to make changes to the existing Home Page Slide Show.
1	Go to the Bates Home Page.	This is located under "Bates Web Site Primary Pages". View an example Under the "SlideShow-Images" field read off the xNumber of the Update file View an example Search for the update file View an example
2	Create a new update page for the new month	The simplest way to do this is to copy and paste from the previous update file. To do this, click on the previous update page and drag it onto the "Images of Bates College" page while holding down on the ctrl key. View an example You may need to unassign the page and then check it out so as to be able to make changes to it.To do so, right-click on the newly created update page. View an example Be sure to rename it to match the new slide-show update month and year. View an example
3	Create a new folder to store the new image components	Go into the "Images" folder and open the relevant year. Only in the absence of the relevant year will you need to create a new folder and name it appropriately. To create a new folder, right-click the "Images" folder and select New>Folder. View an example The simplest way to create a new image components folder is to drag an existing image components folder onto the relevant year folder while holding down on the ctrl key. View an example Then unassign, unmark for publish, check out and rename the folder and all its contents accordingly. View an example
4	Edit the informtion contained in the image components	For each component, provide the path to the thumbnail file, the large image, the description (text to describe the text) and finally, the dimensions of the thumbnail as given from step 1. View an example It will be easier in step 6 iif the images and components are named and arranged in the order in which they will appear in the slideshow. To create new image components, you may drag existing image components onto the parent image component folder. View an example Alternatively, you may right-click on the parent image component folder and create a new component of type "Image-Slideshow". Name it accordingly. View an example
6	Linking the image components to the new update page	Drag all the image components into the fields titled "SlideShowImage" in the order in which they ought to appear on the slideshow. View an example
7	Images of Bates College	Insert the new update page into the Slideshow field of the Images of Bates College file. View an example
8	Preview the Images of Bates College page	Preview the changes made to the Images of Bates College page. Be sure to correct any mistakes make, and if necessary, return to step 6 to change the order of images on the slideshow. View an example Click on the thumbnails to make sure that the large files are loaded appropriately. View an example
9	Mark for publish and republish the images	To ensure that the slideshow goes live, be sure to check and mark all pages and components for publish and then republish all pages. The live version of the slideshow will appear on the Bates Homepage at http://www.bates.edu/pubbates/index.xml

Bates WebGuide

Basic Process: Slideshows

Sections:

Other elements:

Specialized pages:

Details

Making Slide Shows

glossary | support | reference | ©2005 Bates College