42315_111046_0.jpgThe Slideshow   42315_12910_0.jpg

The School's Slideshow is a great way to immediately draw attention to the big things that are happening in the school as well as the brand of the school.   It is important to use the slideshow feature wisely and to follow the guidelines below so that your page will load quickly and your presentation will be as effective as possible.

You access your School Slideshow by opening the School_Slideshow Container in the Root of your Website.  The image below shows its location and the numbers associated with the image of the open School_Slideshow indicate key areas that you need to understand. Explanations of each key aspect follow the image.

Click on the image if you need to see it full size
42315_115753_1.jpg





1  Import Document Button
If you click on the Import Documents Button a file picker will open so that you can access the images on your hard disk.  

Alternately, you can drag files from a folder in your file system right over top of the slideshow container and those files will be uploaded.



2 New Gallery or Site Object Button
This button allows you to create a sub gallery, or even a sub website within the container.  In the case of a slideshow, it allows you to add an object necessary for adding a YouTube Video to your site.  

IMPORTANT: For Slideshows, this functionality is ONLY useful when adding a YouTube video.

To Add a YouTube Video to your Slideshow, you will need to refer to the section below relating to Special Rules For YouTube Videos, but first, you need to add the YouTube object to your slideshow.  

To do this, follow the steps below:

Step 1) click on the new Gallery or Site Object Button and, when the pop up screen asking for a name appears, you can ignore it and simply click on the OK button
42315_31508_1.jpg

Step 2) When the object picker opens, select the YouTube Video option:  42315_32026_2.jpg
Step 3) This will add an object to which you can attach a YouTube video URL for your slideshow
file:///C:/Users/mdowdell/AppData/Local/Temp/SNAGHTML2bbe9e.png

Step 4) Refer to the Section below entitled "Special Rules For YouTube Videos" for the rest of the process.



3 Caption
This field contains the text that will be displayed on the web in the tab above the slideshow.  Use it to give users a brief summary of the image's content or meaning.  Keep words to a minimum so that they fit in the available space

To add or edit the caption area, in the list view of the slideshow container (as the image above shows), click ONCE in the caption area of the row you wish to edit, wait a moment, and then click ONCE more - the idea is not to double-click the item or it will just open the image.
If you do this correctly, you will be able to type into the Caption field




4 File Name
The file name of the image is normally not something you will concern yourself with.  You should NEVER need to change this value.  



5 Link To URL
The link to URL field is the field where you enter the URL that will open when someone clicks on the READ MORE  button that will appear in the slideshow on the web (when a Link to URL address is present).  

The address can be any valid web address, including places within your current site.  All links MUST be enclosed within a set of square brackets - [ ].

For example, if you wished to link a slide in the slideshow to the Athletics Department Home Page, your Link To URL would be as follows:

[/Departments/Athletics/Home Page/]

The first / is an indication to the browser that the path is starting from the root of the site.  Each container down the list has to be listed, in order, with another / separating them.  The last item in the link will be the name of the page you wish to open.  The final / in the example above is not required, however it is best practice to end with this / character in order to tell the browser to stop looking further.

Note: linking to any page in the site called "Home Page" does not require that you enter that page name as it will automatically open, however, it is best practice to specifically name all end points, including Home Page as performance is better when this is done.

Links to outside websites must have the entire web syntax:  Eg:  [http://www.google.com]



Special Rules for YouTubeVideos - sorry about this :0)

In order to make YouTube videos work with the RWD Slideshow, we have to do a little URL surgery.  

Step 1) Make sure you have added a YouTube object to your slideshow (See section 2 above for how to do this)

Step 2) Find your video on YouTube on YouTube.  

Step 3) Click on the Share Option on the YouTube screen, and then the Embed Sub Option.  You will see something like this:  

<iframe width="560" height="315" src="https://www.youtube.com/embed/087Bv3p4KLQ" frameborder="0" allowfullscreen></iframe>                                                          

Step 4) Select ONLY the URL of the video from the embed code and copy to your clipboard (just the URL, not the quotes):

 ...."315" src="https://www.youtube.com/embed/087Bv3p4KLQ" framebor.....                                                          

Step 5) Click ONCE on the Link To URL field of the row you wish to edit in your slideshow container, wait a moment, and then click again.  
Once the field turns to an editable state, Paste (or type) the extracted URL into your Link To URL field, remembering to put the square brackets on either side:

[https://www.youtube.com/embed/087Bv3p4KLQ]                                                       

as the image below illustrates:
42315_34658_2.jpg

Step 6) Give your video a short caption that will display in the tab above the video thumbnail when the video slide is current - see section 3 above





6 Open In
This field determines if the link will open in a new window / tab in the browser or if will replace the current page.  Generally, use the same window unless the link is to another website.
The options for this field are:



7 Size
There are two kinds of size that we have to deal with when talking about Slide Shows.  Both are REALLY important!  One is related to this field in the list of slides, and one isn't, but since we have your attention, we'll discuss both here.

Image size:  File Size on Disk

Even though, you CAN'T edit it, the size field tells you how big your slideshow picture is.  If it is above 100 kb, it is TOO  BIG!  Your page load time will really suffer if you have either too many images or images that are too large (or both).   How big a picture is on disk is a function of how much information is stored in the file.  The amount of information in a picture is a function of two things; its dimensions and its pixel density.  Small Images that are of very high resolution can be much larger in file size than large images that are of low resolution.  The trick for slideshows is to strike a balance between size and quality so that we have images that look good on the web, but that don't take too long to load.

Image size - dimensions

While a Slideshow can handle images with any proportions (aspect ratio), because YouTube thumbnail images are presented at an aspect ratio of 1.333:1 (meaning the width of the image is 1.333 times the height of the image), and because we can't control this, we recommend that you make your own pictures that aspect ratio as well.  

What that translates to practically is a picture that is 449 pixels wide by 337 pixels high.  Pictures this size tend to be small enough to load quickly (under 100 kb), while still looking good on the web.  

The reason we want to keep everything the same in terms of aspect ratio is that if we have differences in our slideshow, the web page will appear 'jumpy' when it adjusts to the different sized images as the slideshow progresses. This is annoying to your web visitors and should be avoided.