Templated Slider With Info Box

This Templated Slider displays custom slides along with an info box along the right side that will display custom static content.

ET_Lineberger_02.jpg

The red box in the above image highlights the Templated Slider With Info Box.  

Even though you create custom slides with this slider, the code for this slider is different from the Templated Slider with Custom Slides.  As such you can not easily switch between the two.

 

Add a Templated Slider to Your Site

Setting up a Templated Slider requires some customization.  As such, the OIS web team will need to create the landing page that will display the slider.  Please fill out the form to request this slider be added to your site.


Static Content Box

In the above image of the Lineberger web site, the orange box is the static content box.  This box requires customized HTML based on the content you wish to display.  Someone from the OIS web team will set this up for you.  This content is not intended to changed on a regular basis unless you (the department/center/program site manager or editor) are comfortable editing HTML.  The color of the static content box can be changed on a per-slider instance.


Where to Put The Slides

Before you begin creating slides you will need to create a place to store them.  More specifically, you will need to create a folder at the root of your site named slides.

  1. Navigate to your sites home page.
  2. From the Add new drop-down menu on the green bar, select Folder.
    Add a Folder 
  3. Name the folder slides.
  4. To prevent the folder from showing up in your navigation, click on the Settings tab.
    SettingsTab.png 
  5. Add a check next to Exclude from navigation.
  6. Click the Save button.

 

Creating Slides

You must create a page for every slide.  All slide pages must reside in the slides folder (that was explained above).  Only published pages will display in the slider.  There is no limit to the number of slides that will display in the slider.  If you don't want a slide to appear in the slider, simply delete it or make it private.

  1. Navigate to the slides folder.
  2. Click on the Add new drop-down menu in the green bar and select Page.
    Create a New Page 
  3. Give the page a Title (this will not display on the slide)
  4. Scroll down to the Body Text area and click on the HTML button.
    HTML_Button.png 
  5. Copy the following code and paste it into the HTML Source Editor box that appeared when you clicked on the HTML button.
     
    <p><img alt="Image Alt Text" src="http://link-to-image" /></p>
    <div class="carousel-caption">
    <h3><a href="http://link-to-feature-story">Title Text</a></h3>
    <p>Description Text </p>
    <a class="more" href="http://link-to-feature-story">(Read more)</a> 
    </div>
    
  6. You will need to replace everything in the above code that is a bold red. 
  7. Scroll down and click the Save button.
  8. Don't forget to Publish the page when you are ready for it to display in the slider.

 

Slide Images

Images for your slides should be uploaded to your site prior to the slide page creation.  We suggest you put them in the Images folder found at the root of your site.  For organization sake you may want to create a subfolder to contain your slide images.  Don't forget to Publish your images!

Image Size

All images need to be a consistent size of 1,000 x 500 pixels.

Image Link (URL)

In the above slider page code, you need to replace the http://link-to-image.jpg with the actual url of the image.  Here is how you do that: 

  1. In a separate browser tab or window, navigate to the image you wish to add to a slide.
  2. Under the image you will see some "Available Sizes."  Click on the Large 768 x 384 size.  
    ET_LargeImageSize.png 
  3. Copy the URL in your browser's address bar and replace the http://link-to-image.jpg in the code. 

 

Specifying The Order In Which The Slides Are Displayed

The order of the slides in the carousel is determined by the page order in the slides folder.  

  1. Navigate to the slides folder.
  2. Click on the Contents tab in the green bar.
  3. The order in which the slide pages are displayed is the order in which they will appear in the slider.
  4. You can reorder the pages to customize the slide order.

 

Background Image

The Templated Slider sits on top of a Landing Page Graphic.  As such, you will need to request a landing page graphic with the templated slider.   Landing page graphics that are being used as a background image for a slider should be simple and not distracting.  An image that is too busy will make the text in the sliders illegible.  In general, avoid using photos of people and do not add text to the landing page graphic.

 

Adding Content To The Templated Slider/Landing Page

This is the landing page that displays the slider (not the individual slide pages).  Any content that you wish to display on this page needs to be placed in a portlet.  Content added to the Body Text area of the page (when editing it), will not display.   

ET_UsePortlets.jpg

 

How To Publish the Slider/Landing Page

You will notice that the Private/Publish button is missing from the green bar.  To publish the page, simply follow these steps:

  1. Navigate to the folder containing the Templated Slider page.
  2. Click on the Contents tab in the green bar.
    Contents Tab 
  3. Find the name of the Templated Slider page that you wish to publish and click the little box to the left of the name.  You should now see a checkmark in the box.
    PublishETSlider.png 
  4. Scroll to the end of the directory listing.
  5. Click on the Change State button.
  6. Scroll down to the Change State portion of the page and select the Publish radio button.
    PublishETSlider2.png 
  7. Click on the Save button.

 

Examples

UNC Lineberger

ET_Lineberger.png

 

Department of Urology

ET_Urology.png