Tutorial 4: How to Add to the News Slider Page 1 of 5 Web Support Website: go.fresnou.org/websupport

Rev. 5/17/2018 9:32 AM Chau Bui

How to Add to the News Slider

Quick Start Guide

• The News Slider is a set of images that rotate one at a time. • To add an item, go to the Gear icon Site Contents News Slider. Click on + new item, fill out the form,

upload an image & use Image Rendition: News Slider Image (572 x 450) • To edit an item, click on the ellipsis (…) next to it Edit Item. • Don’t create more than 3 slides—too many images will slow down your homepage.

Detailed Steps

1. After logging in, on the top right of any page, click on the Gear icon and select Site Contents.

2. On the Site Contents page, scroll down and click on the News Slider icon.

1

2

News Slider

http://go.fresnou.org/websupport

Tutorial 4: How to Add to the News Slider Page 2 of 5 Web Support Website: go.fresnou.org/websupport

Rev. 5/17/2018 9:32 AM Chau Bui

3. On the News Slider list page, click on + new item.

4. The New Item form will appear. Fill out all fields then “Click here to insert a picture from SharePoint”. • Title – will display at the bottom of slide on homepage • URL – make the slide link to a webpage. It can be blank. • Display Toggle – Check it to display this slide on the homepage. Unchecking will hide it.

5. The Select an Asset window will appear. Click on add new item to upload a new image.

NOTES

• Look on the left hand side to see if the Images folder is selected (folder turns blue when selected). This ensures that Destination Folder for the image upload will be the Images folder.

• If the image you want is already on SharePoint, you can browse for it and skip to Step 9.

3

4

5

This is the webpage your image will link

to.

http://go.fresnou.org/websupport

Tutorial 4: How to Add to the News Slider Page 3 of 5 Web Support Website: go.fresnou.org/websupport

Rev. 5/17/2018 9:32 AM Chau Bui

6. The Add a document form will appear. Click Browse. A new window will open so you can find and select the image you want, and then click Open. After that, you’re back on the Add a document form. Click OK.

7. The Image properties form will appear. Give the image a meaningful filename. You don’t have to fill out the rest of the form. Click Save.

7

6

http://go.fresnou.org/websupport

Tutorial 4: How to Add to the News Slider Page 4 of 5 Web Support Website: go.fresnou.org/websupport

Rev. 5/17/2018 9:32 AM Chau Bui

8. The Select An Asset window will pop up again. Click on the image you just uploaded. Then click Insert.

9. The Edit Image Properties form will appear. The first 3 fields under General need to be filled out. Everything else should be left alone.

• Selected Image - file should already be there. If not, browse for it again. • Image Rendition - select News Slider Image (572x450) • Alternate Text - type in a short description of your image, to comply with Web accessibility law. Visually

disabled visitors use screen readers that read this information. • Click OK.

FYI: An Image Rendition is a basically a preset. Warning: Do not use an image that is smaller than the Image Rendition dimensions for that item. It will become stretched and pixelated. Using a larger image is fine.

9

8

http://go.fresnou.org/websupport

Tutorial 4: How to Add to the News Slider Page 5 of 5 Web Support Website: go.fresnou.org/websupport

Rev. 5/17/2018 9:32 AM Chau Bui

10. Now, you’ll be sent back to the Item form. When done, click Save.

Helpful Tips 3 is the recommended # of slides to use.

Having too many images will slow down your homepage. Studies show that 40% of users will leave if it takes longer than 3 seconds for a page to load. Test your website speed at tools.pingdom.com

How to replace an image for a slide: When you’re on the slide item form (see step 10), click on the image. Either handle bars will display or it will turn blue. Press the Delete key on your keyboard. Then insert a new image.

How to edit or delete a slide: Click on the ellipsis (…) next to your item title > then select Edit Item or Delete item

How to hide a slide: Uncheck the Display Toggle (see step 10). This is a good way to create a

slide for display later, or save one for repeated use.

Slides are ordered by the date created. You can edit an item to replace it.

10

http://go.fresnou.org/websupporthttp://tools.pingdom.com/

Helpful Tips

How to Add to the News Slider

News Slider

Quick Start Guide

· The News Slider is a set of images that rotate one at a time.

· To add an item, go to the Gear icon Site Contents News Slider. Click on + new item, fill out the form, upload an image & use Image Rendition: News Slider Image (572 x 450)

· To edit an item, click on the ellipsis (…) next to it Edit Item.

· Don’t create more than 3 slides—too many images will slow down your homepage.

Detailed Steps

1. After logging in, on the top right of any page, click on the Gear icon and select Site Contents.

2

1 -sITE

2. On the Site Contents page, scroll down and click on the News Slider icon.

3. On the News Slider list page, click on + new item.

3

4. The New Item form will appear. Fill out all fields then “Click here to insert a picture from SharePoint”.

· Title – will display at the bottom of slide on homepage

· URL – make the slide link to a webpage. It can be blank.

· Display Toggle – Check it to display this slide on the homepage. Unchecking will hide it.

This is the webpage your image will link to.

4

5. The Select an Asset window will appear. Click on add new item to upload a new image.

5

NOTES

· Look on the left hand side to see if the Images folder is selected (folder turns blue when selected). This ensures that Destination Folder for the image upload will be the Images folder.

· If the image you want is already on SharePoint, you can browse for it and skip to Step 9.

6. The Add a document form will appear. Click Browse. A new window will open so you can find and select the image you want, and then click Open.

6

After that, you’re back on the Add a document form. Click OK.

7. The Image properties form will appear. Give the image a meaningful filename. You don’t have to fill out the rest of the form. Click Save.

7

8. The Select An Asset window will pop up again. Click on the image you just uploaded. Then click Insert.

8

9. The Edit Image Properties form will appear. The first 3 fields under General need to be filled out. Everything else should be left alone.

· Selected Image - file should already be there. If not, browse for it again.

· Image Rendition - select News Slider Image (572x450)

· Alternate Text - type in a short description of your image, to comply with Web accessibility law. Visually disabled visitors use screen readers that read this information.

· Click OK.

9

FYI: An Image Rendition is a basically a preset. Warning: Do not use an image that is smaller than the Image Rendition dimensions for that item. It will become stretched and pixelated. Using a larger image is fine.

10. Now, you’ll be sent back to the Item form. When done, click Save.

10

Helpful Tips

· 3 is the recommended # of slides to use.

Having too many images will slow down your homepage. Studies show that 40% of users will leave if it takes longer than 3 seconds for a page to load. Test your website speed at tools.pingdom.com

· How to replace an image for a slide: When you’re on the slide item form (see step 10), click on the image. Either handle bars will display or it will turn blue. Press the Delete key on your keyboard. Then insert a new image.

· How to edit or delete a slide: Click on the ellipsis (…) next to your item title > then select Edit Item or Delete item

· How to hide a slide: Uncheck the Display Toggle (see step 10). This is a good way to create a slide for display later, or save one for repeated use.

· Slides are ordered by the date created. You can edit an item to replace it.

Tutorial 4: How to Add to the News Slider

Rev. 1/10/2017 2:25 PM Chau Bui

Page 5 of 5

Web Support Website: go.fresnou.org/websupport