SchoolFront Support

Online Help > SchoolFront Portal CMS > Help for CMS Admins > Splash Slide Shows > Make Changes

Make Slide Show Changes

Make Changes to the Splash Slide Show Images

Now you have completed the foundation work needed to either add to or edit the slide show images. You can also optionally delete slide show images, and this section will explain how.

Note: This process will require that you edit the underlying source code associated with your slide show. If you are uncomfortable doing this, please contact SchoolFront Support for assistance.

Step-by-Step Instructions

1. Login to the SchoolFront Portal CMS site as an administrator.

2. Go to the page with the slash slide show again--this is typically the home page.

3. Click the Edit link above the slide show. The WYSIWYG editor will open. Do not make any changes in this view.

4. Click the Source button in the WYSIWYG editor and the HTML and other scripting which makes the slide show operate will be revealed. It will look something like this:

<div class="slide">
<a href="http://schoolfront.com/academics.aspx" o
nclick="window.open(this.href,'_self');return false; ">
<img src="/Data/Sites/13/images/nivoslider/class34.jpg" /></a></div>
<div class="slide">
<a href="http://schoolfront.com/admissions.aspx" 
onclick="window.open(this.href,'_self');return false; ">
<img src="/Data/Sites/13/images/nivoslider/parents2.jpg" /></a></div>
<div class="slide">
<a href="http://schoolfront.com/athletics.aspx" 
onclick="window.open(this.href,'_self');return false; ">
<img src="/Data/Sites/13/images/nivoslider/gymnasium.jpg" /></a></div>
<div class="slide">
<a href="http://schoolfront.com/academics.aspx" 
onclick="window.open(this.href,'_self');return false; ">
<img src="/Data/Sites/13/images/nivoslider/theschool.jpg" /></a></div>
<div class="slide">
<a href="http://schoolfront.com/athletics.aspx" 
onclick="window.open(this.href,'_self');return false; ">
<img src="/Data/Sites/13/images/nivoslider/teachers_staff.jpg" /></a></div>

Click an option below for more instructions:

Delete a Slide Show Image

If you wish to DELETE an image from the slide show, determine the image name you wish to delete. Then delete all code from the "<div class="slide">" and "</div>" for the code associated with that image file name.

For example, if you wanted to get rid of the image with the file name "parents2.jpg," you would delete the underlined portion of the code below:

The updated code will look like this:

Change a Slide Show Image

If you wish to CHANGE an image from the slide show to a different image. Start by determining the name of the image you wish to change. Then change the part of the code for the image name and location to that of the location and name of the new image.

Note: The new image location is the place where you uploaded your image files: See here.

For example, if you wanted to change the image called "parents2.jpg," to a different image called "the school.jpg" which is located in the same folder as the original image, you would change this code:

<a href="http://schoolfront.com/admissions.aspx" onclick="window.open(this.href,'_self');return false; "> <img src="/Data/Sites/13/images/nivoslider/parents2.jpg" /></a></div> <div class="slide">

To this code instead:

<a href="http://schoolfront.com/admissions.aspx" onclick="window.open(this.href,'_self');return false; "> <img src="/Data/Sites/13/images/nivoslider/theschool.jpg" /></a></div> <div class="slide">

If the new image was uploaded to a different folder in the File Manger than the original image, make sure you update the whole file path appropriately.

Add a Slide Show Image

If you wish to ADD a new image to the slide rotation, ensure that you have an appropriately sized image file, uploaded to the same folder as the other slide show images in the File Manager, and then copy and paste the existing code to add another series of code below it and update the image name.

For example, if the code is like this to start and you want to add an image to the slide show called "ourstudents.jpg," copy the part that is underlined--what you copy should include all code from the "<div class="slide">" and "</div>":

Then paste the code snippet below the existing code (it is an addition to the code). Then change the image name to that of the added image, "ourstudents.jpg."

So the new code would look like this: