ITS

Information Technology Services
Information Technology Services

Creating and Editing a Slideshow


Creating a Slideshow

  1. Open the Content menu 
    • Click the Add content button

    screenshot illustrating above step

  2. The Add content screen will open 
    • Click the Slideshow button

    screenshot illustrating above step

  3. The Create Slideshow screen will open 
    • Enter a Title for your slideshow
    • To add an image click the Browse button
    • Your hard drive will be displayed.  Select the file to upload to your slideshow

    screenshot illustrating above step

  4. Click the Upload button
    • The selected file will be uploaded

    screenshot illustrating above step

  5. The Image will be uploaded to the server 
    • A thumbnail of the image will be displayed
    • Enter the Alternate text for the image
    • Enter a Title for the image
    • Enter a caption for the image.  It will appear under the image in the slideshow. 
    • To add another image to the slideshow click the Add another item button
    • Repeat this process for each of the images that you wish to appear in your slideshow until all the images have been added
    • Click the Save button

    screenshot illustrating above step

  6. The slideshow will open in the View draft tab
    • From the Set moderation state: drop down menu select Published
    • Click the Apply button
    • The slideshow is now ready to be embedded in a new page or an existing page

    screenshot illustrating above step

Back to Top


Embed The Slideshow Into A New Page

screenshot illustrating above step

  • The Node Embed screen will open
    • From the Type drop down menu select Slideshow
    • Click the Apply button
    • Only the slideshows will be displayed 
    • Select the slideshow to be embedded by clicking on it
    • Click the OK button 

    screenshot illustrating above step

  • The Create Basic page screen will re-open
    • In the body area will be the code to embed the slide show
    • Check the box beside Provide a menu link
    • Select the Parent item for your slideshow
    • Click the Save button

    screenshot illustrating above step

  • The page will be saved
    • The slideshow will be visible  on the View Draft tab
    • From the Set moderation state: drop down menu select Published
    • Click the Apply button
    • Your slideshow will now be live on your website.

    screenshot illustrating above step

Back to Top


Embed The Slideshow Into A Region On The Home Page

  1. To embed a slideshow into a region of the home page 
    • Go to the Structure  menu
    • Select Blocks

    screenshot illustrating above step

  2. The Blocks Administration screen will open 
    • Click the Add Block button

    screenshot illustrating above step

  3. The Blocks page to create a new custom block will open
    • In the Block title field enter a title for your slideshow.  The Block Title will be displayed above the slideshow.  This is optional
    • In the Block description field enter a description of the slide show.  This will be displayed in the Blocks Administration page.  This field must be completed
    • Click the Node Embed button

    screenshot illustrating above step

  4. The Node Embed screen will open
    • From the Type drop down menu select Slideshow
    • Click the Apply button
    • From the list of slideshows click the slideshow you wish to embed
    • Click the OK button

    screenshot illustrating above step

  5. The Blocks create a new custom block  screen will re-open  
    • The node ID is embedded into the Block body
    • In the Region Settings areas from the Site WebPublish drop down menu select the region you want your slideshow to be displayed in
    • From the Show block on specific pages click the radio button beside Only the listed pages
    • in the text box enter front (enclosed in angle brackets) 
    • Click the Save Block button

    screenshot illustrating above step

  6. The Blocks Administration screen will re-open 
    • The message The block has been created will be display at the top
    • Click the to close the overlay box, or click the home button to return home

    screenshot illustrating above step

  7. The slideshow is now displayed on the home page 
    • Note the Title for the Slideshow.  The Title will only be displayed if one was provided.

    screenshot illustrating above step

Back to Top


Editing The Slideshow

  1. From the Management menu select Content
    • From the type field select Slideshow
    • Click the Filter button

    screenshot illustrating above step

  2. Only the slideshows will be displayed 
    • Click the Title of the slideshow you want to edit or
    • Click the edit button

    screenshot illustrating above step

  3. The Slideshow page will open on the View published tab 
    • Click the New draft tab

    screenshot illustrating above step

  4. A new draft of the slideshow will open 
    • Note the Hide row weights button.  This is a toggle between hide and show. 
    • Images can be re-order by changing their weight

    screenshot illustrating above step

  5. Toggle to the Show row weights
    • Now to the left of each slide is a crosshair
    • To move an entire image grab the crosshair and move to the preferred location
    • To remove the image but not the slide, click the Remove button.  You will be able to Browse to a new image and upload it.  The new image will replace the removed image on the slide
    • To remove the entire slide click the Remove button at the bottom of the slide to be removed

    screenshot illustrating above step

  6. To add another slide, click the Add another item button 
    • When all the changes have been made click the Save button.
    • Publish the slide show

    screenshot illustrating above step

Back to Top


Edit How The Slideshow Is Displayed

To change the way the slideshow appears

  1. Open the page that your slideshow is displayed on 
    • If the slideshow is on the home page, click the cog in the upper right corner of the slideshow display
    • Select Configure block from the drop down menu

    screenshot illustrating above step

  2. The page where the slideshow is displayed will open 
    • In the Block body section add/delete attributes
    • Note:  the only space is between the number of the Node ID (nid) and the first attribute.  Each attribute is separated with an & symbol. Do not leave any other spaces.
    • See below for Attributes and Preset Slideshow Sizes available

    screenshot illustrating above step

Attributes

Attribute Description Allowed Values Required
nid The node id for the slideshow number Yes
width The desired width (in pixels) number No
Size The desired size (if not specified, default is m) s, m, l No
Float The desired float left, right, none No

Preset Slideshow Sizes

Size Code Width Height
Small s 300 auto
Medium m 450 auto
Large l 600 auto
Full f 100% auto

    Back to Top