/
Editing the Slideshow – Older Templates

Editing the Slideshow – Older Templates

Owned by Dawn Brunke (Unlicensed)
Last updated: Jun 25, 2020
5 min read

If your WebPRISM site has a slideshow, you will probably want to update it from time-to-time, to show new information and pictures.  You can add new slides or update the existing ones by adding new images and editing the code for the slideshow.

Tip:  For a slideshow to be effective, it should only contain up to 5 slides, with the most important slides at the beginning and least important ones at the end. 

About the Slideshow Code

Slideshow code is located in the Slideshow folder, and the code to customize the slideshow can be found in the slideshow.asp file.  The slide images are located in the Slideshow > Images folder.

There are two main components to the slideshow.asp code: images and captions. 

Images are listed first in the code, in the order that they appear in the slideshow.  By default, each image is also a link. You can delete the <a> tag from around the <img> tag to remove the link.

Captions are listed after the images in the code, in the order that they appear in the slideshow.  Each caption is also a link.

Each <img> tag has a title attribute that matches with a corresponding caption’s <div> tag with an id attribute.  For example, an <img> with a title attribute of #htmlcaption1 has a matching caption with a <div> tag with an id attribute of #htmlcaption1. 

Editing Existing Slides

  1. Log into your staging website through your HTML editor Upload a new slide image to the Slideshow > Images folder.
    Note:  All slide images should be the same size.  On newer templates, they should be 1300 x 650 pixels, or you can look in the code comments in the slideshow.asp file for the correct dimensions.

  2. In the Slideshow folder, double-click the slideshow.asp file to edit it.

  3. Decide what position in the slideshow you want the image to appear, and find the appropriate <img> tag for that position in the code.

  4. Change the path (src attribute) of the current slide image to the path of the new image, e.g., slideshow/images/new_image.jpg.

  5. Change the alt attribute of the <img> tag to provide a short description of the new image.

  6. If you want to make the new image a link to a page, edit the href attribute of the <a> tag that wraps around the <img> tag.

  7. Find the matching caption for the slide you edited.

  8. If you want to make the caption a link also, edit the href attribute of the <a> tag that wraps around the caption text.

  9. Edit the first line of the caption text, within the beginning and last <p> tag before the <br> tag.

  10. Edit the second line of the caption text within the <p> tag after the <br> tag.

  11. Save the file.

  12. Verify that the new slide image, caption text, and links are working correctly by opening the homepage of your staging site in your browser.  
    Note:  If you already have the page open in your web browser, you will need to refresh the page in your browser. 

  13. If you are done with making changes to your site, you will need to deploy the content to your live website.

Adding New Slides

  1. Log into your staging website through your HTML editor.

  2. Upload a new slide image to the Slideshow > Images folder.
    Note:  All slide images should be the same size.  On newer templates, they should be 1300 x 650 pixels, or you can look in the code comments in the slideshow.asp file for the correct dimensions.

  3. In the Slideshow folder, double-click the slideshow.asp file to edit it.

  4. Decide where in the slide order you would like the new slide to be placed.  Highlight and copy the code for one of the existing slide images.

  5. Paste the copied code where you would like the new slide image to be located.

  6. Change the path (src attribute) of the copied slide image to the path of the new image, e.g., slideshow/images/new_image.jpg.

  7. Change the title attribute of the <img> tag to something unique that will match the new caption you will create.  For example, if you are adding a fourth slide, you could make the title attribute #htmlcaption4.

  8. Change the alt attribute of the <img> tag to provide a short description of the new image.

  9. If you want to make the new image a link to a page, edit the href attribute of the <a> tag that wraps around the <img> tag.

  10. Highlight and copy the code for one of the existing slide captions.

  11. Paste the copied code in the appropriate order of the slide captions.

  12. Change the id attribute of the new <div> tag you pasted to match the title attribute of the new image above, minus the # sign.  For example, if your title attribute was #htmlcaption4, your id attribute would be htmlcaption4.

  13. If you want to make the caption a link also, edit the href attribute of the <a> tag that wraps around the caption text.

  14. Edit the first line of the caption text, within the beginning and last <p> tag before the <br> tag.

  15. Edit the second line of the caption text within the <p> tag after the <br> tag.

  16. Save the file.

  17. Verify that the new slide image, caption text, and links are working correctly by opening the homepage of your staging site in your browser.   
    Note:  If you already have the page open in your web browser, you will need to refresh the page in your browser. 

  18. If you are done with making changes to your site, you will need to deploy the content to your live website.

 

First Published 06/25/2020

Edited 06/25/2020

© 2020 Nebraska Book Company, Inc.  All rights reserved.