How to install the PortalFront SharePoint News Slider

What is provided

A zip file with the files needed

Instructions

Copying the files

1. Go to your root site collection where you wish to place the slider code base.
2. Go to Site Actions -> View All Site Content -> Style Library
3. Create a folder called "PortalFrontSlider"
4. Copy the contents of the zip file into the folder.

Create News Blog Site (Optional)

NOTE: If you don’t already have a list that you wish to use, proceed with creating a blog site per our recommendation here. If you have your own list you can customize the slider to use that list. You may skip to "Placing the slider in SharePoint"

1. Go to the root site collection where you wish to house the content of the slider.
2. Go to Site Actions -> New Site
3. Find and select the "Blog" template
4. Provide a name for the site such "News"
5. Provide "news" as the URL

Adding the columns to the blog List

1. Navigate to the Blog Site you created in the previous step.
2. Go to Site Actions -> View All Site Content
3. Click on Posts list
4. Add the following columns to the list

Ensure that the columns match this screenshot

    Add a few test items to the blog and include some pictures. Make sure the Published Date is set in the future of the items so that they appear on the slider once it is placed on the page.

Add Content to your Blog Posts

Make sure you add some content to the news list for the slider to show.

• Make sure you populate the Expires and Published Date. Expires Should be in the future and Published should be in the past.
• Make sure you include an image.

Placing the Slider in SharePoint

1. Navigate to the page where you wish to place the news slider web part
2. Add a Content Editor Webpart by clicking on Site Actions -> Edit Page
3. Click on "Insert Tab" in the Ribbon
4. Click on "Web Part"
5. Under Categories, click on "Media and Content"
6. Under Web Parts, click on "Content Editor"
7. Click "Add"
8. Once added, Edit the web part:
9. On the Content Editor Properties that appears on the right hand side of the page (you may have to scroll), type in the location of the sliderScript.js you uploaded earlier to the Styles Library folder.

   Note: It is preferred that you use a domain relative path. Here are some examples:
   

Warning: make sure you include the "/" at the beginning of the path.

/Style Library/PortalFrontSlider/sliderScript.js

1. Click ok and save the page.

The slider will not show until the settings have been applied. See next section.

Placing the Slider Settings on the page

[IMPORTANT: make sure you place this web part above the Content Editor Web Part you placed earlier]

The slider settings is what tells the slider what list and fields to use to pull data into the slider. They are stored in a file called settings.js

To place the slider setting on the page:

For SharePoint 2013 use the Script Editor Web part. Follow the instructions below. If you’re using SharePoint 2010 jump down to SharePoint 2010 instructions.

• Edit the page then insert the Script Editor Web part as follow:

• Edit the web part

  
  

• Edit Snippet and insert the code below

For SharePoint 2010, Insert the HTML Form web part

Make sure you modify the path in yellow below to your location. Copy and paste the code below. When copying include make sure to include <script> and then ending </script>

[IMPORTANT: When copying and pasting from the web, the single and double quotes may need to be fixed after pasting. Select all the double quotes and make sure you use your keyboard to type over the pasted version. Do the same with single quotes.]

<script src="/Style Library/PortalFrontSlider/settings.js"  />

[IMPORTANT Reminder: make sure you place this web part above the Content Editor Web Part you placed earlier]

• Save the page.

  At this point the slider configuration form will show.
  

  Customizing the slider list source

  You may want to customize the slider with your own list source. For example maybe the blog list is located elsewhere or you want to use a different list altogether. Maybe you already have some fields you want to use and show in the slider in your list. The Slider Configurations form will help you set all those parameters.
  

  
  

  As you update the configurations click save to see the changes. If you are using Sharepoint 2010, the save will not work because it doesn’t support the API, in that case please edit settings.js directly with your configurations.
  

  If the slider does not show, make sure you have items in the blog posts of the news site. Also make sure that the location of the sliderScript.js is correct. You may verify this location by navigating to http://[yoursite]/Style Library/PortalFrontSlider/sliderScript.js (if nothing loads or asks for download that is most likely the issue and you will need to find the correct path to the file.) For help or assistance reach us at support@portalfront.com     �
  

  Once you’re done with all the configuration, you can close the configuration box by selecting Hide form the Config Drop down.
  

  
  

  If you hid the configuration box and would like to show it again. Go to settings.js and set the variable config to 1.
  

  Troubleshooting

  If the slider does not load use this guide to identify the issue:
  

  Possible Issue	Verify that this is an issue	Resolution
  The content editor web part is not referencing the correct path of sliderScript.js	Copy the value in the content editor web part. Navigate to the path: [domain]/[value in content editor] Example: Value = /Style Library/PortalFrontSlider/sliderScript.js Domain = https://companysite.sharepoint.com Navigate to : https://companysite.sharepoint.com/Style Library/PortalFrontSlider/sliderScript.js If navigating to this location results in no page found, then there is a problem with the path inside the Content Editor link.	Navigate to library where the sliderscript.js file is located. Right click on the file and click "Copy link address" in Chrome or "Copy Shortcut" IE Copy the complete part right after the domain and paste it into the content editor content link field.
  There is no content in the lists	Navigate to the list and check to see if there is content.	Add content to the list.
  No Expires or Publish dates are set	Navigate to the list and the list item and make sure and check if those fields are populated.	Populate those fields and make sure that Publish date is less that today’s date and the expires field is greater than todays date.
  The Sliderscript.js is not referencing the list properly	Open up sliderscript.js using SharePoint Designer preferably. Look at the

   

  Modifying settings

  How to modify the duration of each slide?

  Edit the provided sliderScript.js file as follows: (you may use notepad to edit it then upload it or you may use SharePoint designer to edit it directly).
  

1. Locate the Slider Settings section
2. Locate the intDelay =6 line.
3. Change the number 6 to the new number you need. The units are in seconds.

How to modify the number of slides to show?

1. Edit sliderScript.js
2. Locate the Slider Settings section
3. Locate the intMaximumItems = 8 line.
4. Change the number 8 to the new number you need.

How to completely hide the thumbs?

1. Edit sliderScript.js
2. Locate the Slider Settings section
3. Locate the boolThumbs = true line.
4. Change true to false

How to change the format of the slider?

There are two formats for the slider to choose from.

Format 1 is an expanded format that shows the the thumbs and large images and titles.

Format 2 (compact) – that shows small image thumbs for each slide.

To change the view:

1. Edit sliderScript.js
2. Locate the DISPLAY STYLE section
3. Change the red text in the line below to either slider-style.css or compactstyle.css

<link rel="stylesheet" href="/Style Library/PortalFrontSlider/slider-style.css" type="text/css" media="screen" />

How change the number of thumbs per row?

To do this:

1. Edit the CSS of choice (if working with compact view its compactstyle.css)
2. Locate the lines:

   .anythingControls .thumbNav li{
   

   display:inline-block;
   

   width:12%; /*k pecentage for each thumb*/
   

   margin-right: 1.2%;
   

   margin-bottom: 2%;
   

   position: relative;
   

   vertical-align: top;
   

   }
   

   /*change the 8n+8 to 6n+6 if you wish to wrap the thumbs after the 6th item. */
   

   .anythingControls .thumbNav li:nth-child(8n+8){
   

   margin-right: 0;
   

   }
   

3. Change the 1.2% to 5.6% ( you may play with the number to find the best fit)
4. Change the 8 in the 8n+8 to 6 so it looks like 6n+6
5. Save the file