How do I add and manage a Home Page Slider Template?

About the Home Page Slider

The Home Page Slider template has been redesigned so that it is more accessible for visitors who use adaptive equipment to access site on the PSU Enterprise.

The Home Page Slider template is composed of three content slides. With this redesign, instead of the slides rotating, you will have one primary slide that takes up the bulk of the template space and two secondary stacked on top of each other to the right of the primary slide. Each slide is composed of an image, beneath which is a title followed by a small amount of explanatory text. Additionally, you can add a link to your slide which will link the title and the image.

Please remember, only one homepage template can be used (either the Home Page Slider or the Home Page Template), and that style of template can only be applied to the homepage for your enterprise site. If this template, and/or the Home Page template, is applied to more than one page it will negatively impact the functionality of your enterprise site.

If your site currently uses the Home Page Slider template the transition to this version will happen automatically. If your site does not use the Home Page Slider template, you are welcome to use the instructions below to transition your enterprise site's homepage to this template style. 

First Time Setup

There are two main steps for setting up the Home Page Slider template. The first is to create your three slides. Once you've made your slides, you can establish your template. 

Step 1: Create Slides

  1. Navigate to your site's content page: pdx.edu/YOURSITE/admin/content
  2. Click on "+Add content" in the top right corner of this page.
  3. From the list of content types, choose "Front Slide". 
  4. Complete the form: 
    • Title: This is the larger text that appears directly
      under the image; it should be short but descriptive.
      This text will become a link if you add a URL to the link field. Remember the title, you use it to add your slide to the template.
    • Image: This is the image that appears on the slide. Whether or not this slide is intended to be the primary slide, you should always make sure your image is 665x400 pixels so it fits into the size constraints. Images should not contain any text.
    • Link: You must add a link URL here, otherwise the formatting of the slide title will be off. 
    • Link Text: This will not display. 
    • Text: This is the smaller paragraph text below the title; the text is limited to 150 characters for the primary slide and 75 characters for the secondary slides. If your text extends beyond that limit, it will be truncated with an ellipsis.   
  5. Click Save. 
  6. Repeat these steps until you have at least three slides. 

Step 2: Establish the Template 

  1. Navigate to the edit tab for your enterprise site's homepage. 
  2. Click on "Template Settings" 
  3. Select the Home Page Slider template.
  4. If you followed the preceding steps and have already created three front slides, continue. If you have not, either follow the steps to create a front slide or click on "Add Front Slide" three times and create three front slides (using those instructions). 
  5. Click on "Manage Slide Positions". This will open a new window.  
  6. In the text box that says "Enter the title of a node to add it to the queue" start typing in the title of one of your slides. A drop-down will appear, from which you can click on the name of the correct slide.
  7. Once you've selected the appropriate slide, click on "Add Content". 
  8. Repeat steps 6 and 7 until you have three slides listed on this page. The top slide will be your primary slide, the lower two will be the secondary slides. If you need to reorder the slides, you can click on the cross-hairs to the left of a slide's title and drag it to reorder (see the Reorder Slides instructions for more information). 
  9. Click save then click back to your original tab (the one where you selected your template type). 
  10. Save your page. 

Modifying Your Slider

Editing a Created Slide

  1. Login to your site and navigate to the Content page.
  2. Use the options at the top of this page to filter your content so only Front Slide content shows. 
  3. Click on the title for the slide you want to work with.
  4. Click "Edit" on the new page you're taken to; this will allow you to edit the slide's text and replace the image as needed. 
  5. Click Save when done. 

Choose New Slides

  1. Follow the Step 1: Create Slides instructions to make one or more new slides.
  2. Navigate to the slider management page: pdx.edu/YOURSITE/admin/structure/nodequeue/1 
    • Once you save a new slide, a link will appear on the view tab for that slide to "Edit Slide Order". That link will also navigate you to this page. 
  3. Use the Reorder Slides instructions so the slide(s) you want removed to shift to the bottom of the listed slides. 
  4. In the text box that says "Enter the title of a node to add it to the queue" start typing in the title of your new slide. A drop-down will appear, from which you can click on the name of the correct slide.
  5. Once you've selected the appropriate slide, click on "Add Content". The bottom slide will drop off, and this new slide will be placed at the top of the list.
  6. Repeat steps 4 and 5 for any other slides you want added.
  7. Follow the Reorder Slides instructions to adjust your slides so they appear in your desired order. 
  8. Click "Save".  

Reorder Slides

  1. Navigate to the slider management page: pdx.edu/YOURSITE/admin/structure/nodequeue/1 
    • Alternatively, if you navigate to the edit tab for one of your slides and click on "Template Settings", there is a "Manage Slide Positions" link. That link will also navigate you to this page.
  2. To the left of each slide title is an image of crosshairs. When you hover over the image, your cursor will also turn into crosshairs, and the text "Drag to re-order" will appear. 
  3. Click on the crosshairs for the slide you wish to move, and drag the slide up or down as needed. Remember: the top slide will be your primary slide. The bottom two will be the secondary slides, appearing to the right of the primary slide (the middle slide will be on top, and the bottom slide will be beneath that one). 
  4. When done reordering your slides, click "Save".  

Tips and Tricks

  • Keep your titles short. If your title is too long, it will wrap to the next line, causing the paragraph text on the primary slide to move out of view, or causing the secondary slide boxes to lengthen and misalign with the primary slide. 
  • Make sure your title is descriptive. Since your title is a link, you want it to make sense out of context for accessibility purposes (read more about accessibility). 
  • Check your paragraph text length. If you paragraph text exceeds the allotted maximum, it will be cut off with an ellipsis. The missing text cannot be viewed, so it makes sense to stay within the limits. 
  • Check your links after saving. You don't want a link that goes to the wrong place or, worse, goes to a 404 error. 
  • Make sure your images are 665x400 pixels. That is the size of the primary slider's image, and the secondary sliders' images are scaled from those dimensions. You cannot adjust the image's size or relative position, so maintaining those dimensions ensures that everything you want displayed will show. Additionally, having the secondary sliders' images the same size allows you to reorder your slides as desired.  
  • Images should not contain text. To ensure accessibility requirements are met, images should not display any textual content.

For additional support, email ucomm-support@pdx.edu