{"id":70281,"date":"2013-09-04T12:23:42","date_gmt":"2013-09-04T16:23:42","guid":{"rendered":"http:\/\/www.bu.edu\/tech\/?page_id=70281"},"modified":"2022-01-07T08:56:13","modified_gmt":"2022-01-07T13:56:13","slug":"create-slideshows","status":"publish","type":"page","link":"https:\/\/www.bu.edu\/tech\/services\/cccs\/websites\/www\/wordpress\/how-to\/create-slideshows\/","title":{"rendered":"Create slideshows with BU Slideshow plugin"},"content":{"rendered":"<div><div class=\"bu-slideshow-container slideshow-tutorial autoplay\" id=\"bu-slideshow-container-1\" data-slideshow-name=\"slideshow-tutorial\" data-slideshow-delay=\"5000\" style=\"width: auto; \"><div class='slideshow-loader active'><div class='loader-animation'><\/div><p>loading slideshow...<\/p><\/div><div class=\"bu-slideshow-slides\"><ul class=\"bu-slideshow transition-slide\" id=\"bu-slideshow-1\"><li id=\"bu-slideshow-1_0\" class=\"slide \"><div class=\"bu-slide-container \"><img src=\"\/tech\/files\/2013\/09\/bu-beach-timeline.jpeg\" alt=\"\" \/><div class=\"bu-slide-caption \"><p class=\"bu-slide-caption-title\">Artistic Inspiration<\/p><p class=\"bu-slide-caption-text\">This sculpture on the lawn at the \"BU Beach\" is one of many eye-catching pieces of art you'll see around campus.<\/p><\/div><\/div><\/li><li id=\"bu-slideshow-1_1\" class=\"slide \"><div class=\"bu-slide-container \"><img src=\"\/tech\/files\/2013\/09\/bu-bus-timeline.jpeg\" alt=\"\" \/><div class=\"bu-slide-caption \"><p class=\"bu-slide-caption-title\">Marsh Chapel<\/p><p class=\"bu-slide-caption-text\">Marsh Chapel is physically located near the center of the Charles River Campus, and also serves as the University's spiritual center as well.<\/p><\/div><\/div><\/li><li id=\"bu-slideshow-1_2\" class=\"slide \"><div class=\"bu-slide-container \"><img src=\"\/tech\/files\/2013\/09\/bu-class-timeline.jpeg\" alt=\"\" \/><div class=\"bu-slide-caption \"><p class=\"bu-slide-caption-title\">Classrooms<\/p><p class=\"bu-slide-caption-text\">BU classrooms bring together a diverse group of students from all over the world who are getting a world-class education.<\/p><\/div><\/div><\/li><li id=\"bu-slideshow-1_3\" class=\"slide \"><div class=\"bu-slide-container \"><img src=\"\/tech\/files\/2013\/09\/bu-flag-timeline.jpeg\" alt=\"\" \/><div class=\"bu-slide-caption \"><p class=\"bu-slide-caption-title\">Flag<\/p><p class=\"bu-slide-caption-text\">The BU flag - denoting the motto of Learning, Virtue, Piety - flies over Marsh Plaza.<\/p><\/div><\/div><\/li><li id=\"bu-slideshow-1_4\" class=\"slide \"><div class=\"bu-slide-container \"><img src=\"\/tech\/files\/2013\/09\/Commencement-timeline.jpeg\" alt=\"\" \/><div class=\"bu-slide-caption \"><p class=\"bu-slide-caption-title\">Commencement<\/p><p class=\"bu-slide-caption-text\">A packed house at Nickerson Field celebrates the commencement of another class of BU graduates.<\/p><\/div><\/div><\/li><li id=\"bu-slideshow-1_5\" class=\"slide \"><div class=\"bu-slide-container \"><img src=\"\/tech\/files\/2013\/09\/night-sky-timeline.jpeg\" alt=\"\" \/><div class=\"bu-slide-caption \"><p class=\"bu-slide-caption-title\">The Charles River<\/p><p class=\"bu-slide-caption-text\">The Law School tower features prominently in this beautiful photo of the Charles River near dusk.<\/p><\/div><\/div><\/li><li id=\"bu-slideshow-1_6\" class=\"slide \"><div class=\"bu-slide-container \"><img src=\"\/tech\/files\/2013\/09\/rock-wall-timeline.jpeg\" alt=\"\" \/><div class=\"bu-slide-caption \"><p class=\"bu-slide-caption-title\">Climbing the Wall<\/p><p class=\"bu-slide-caption-text\">BU's Fitness and Recreation Center features an indoor climbing wall, for both teaching and recreation.<\/p><\/div><\/div><\/li><\/ul><\/div><div class=\"bu-slideshow-navigation-container\"><ul class=\"bu-slideshow-navigation nav-icon\" id=\"bu-slideshow-nav-1\" aria-hidden=\"true\"><li><a href=\"#\" id=\"pager-1\" class=\" active\" aria-hidden=\"true\"><span>1<\/span><\/a><\/li> <li><a href=\"#\" id=\"pager-2\" class=\"\" aria-hidden=\"true\"><span>2<\/span><\/a><\/li> <li><a href=\"#\" id=\"pager-3\" class=\"\" aria-hidden=\"true\"><span>3<\/span><\/a><\/li> <li><a href=\"#\" id=\"pager-4\" class=\"\" aria-hidden=\"true\"><span>4<\/span><\/a><\/li> <li><a href=\"#\" id=\"pager-5\" class=\"\" aria-hidden=\"true\"><span>5<\/span><\/a><\/li> <li><a href=\"#\" id=\"pager-6\" class=\"\" aria-hidden=\"true\"><span>6<\/span><\/a><\/li> <li><a href=\"#\" id=\"pager-7\" class=\"\" aria-hidden=\"true\"><span>7<\/span><\/a><\/li> <\/ul><\/div><\/div><\/div>\n<h2><strong>Overview<\/strong><\/h2>\n<p>BU Slideshow is a plugin for creating and managing slideshows. It is designed to be simple enough for any site admin to use, and powerful enough to meet the needs of designers. The plugin has many optional functions that make it flexible enough for a variety of uses: slideshows, photo rotations, feature card decks in the sidebar, etc.<\/p>\n<p>The plugin is available for all BU websites that use a theme based on the <a href=\"https:\/\/sites.bu.edu\/rf\/\">Responsive Framework<\/a> theme. Please\u00a0<a target=\"_blank\" href=\"http:\/\/www.bu.edu\/help\/wordpress\/\" rel=\"noopener noreferrer\">submit a ticket to IS&amp;T<\/a> to request the BU Slideshow plugin to be enabled on your site. The BU Slideshow plugin is not available on\u00a0<a target=\"_blank\" href=\"http:\/\/blogs.bu.edu\/\" rel=\"noopener noreferrer\">blogs.bu.edu<\/a>.<\/p>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Getting Started with BU Slideshow<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\">\n<p>The plugin adds new items in the WordPress dashboard sidebar menu: <strong>Slideshows<\/strong> and <strong>Add Slideshows<\/strong>.<\/p>\n<p>To create a new slideshow:<\/p>\n<ol class=\"listScreenCap\">\n<li class=\"seeScreenCap\">Click <span class=\"howToRed\">Add Slideshow<\/span> in the WordPress dashboard sidebar.<\/li>\n<li class=\"seeScreenCap\">Enter a name for your slideshow.<\/li>\n<li class=\"seeScreenCap\">You start with an\u00a0Untitled Slide &#8212; <span class=\"howToRed\">Select Image<\/span> and enter a <span class=\"howToRed\">Title<\/span>\u00a0for each slide.<\/li>\n<li class=\"seeScreenCap\">Click the <span class=\"howToRed\">Add New Slide<\/span> button to add more slides.<\/li>\n<li class=\"seeScreenCap\">When working with multiple slides, click the\u00a0<span class=\"howToRed\">triangle icon<\/span>\u00a0to toggle the settings panel open\/closed for each slide.<\/li>\n<li class=\"seeScreenCap\">When you are finished, click\u00a0<span class=\"howToRed\">Create Slideshow<\/span>.<\/li>\n<li>You can always go back in to edit\/add slides and change options &#8212; you don&#8217;t need to finish it all at once!<\/li>\n<\/ol>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/slideshow-overview3.png\" class=\"alignnone wp-image-91712 size-full\" width=\"659\" height=\"510\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-overview3.png 659w, https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-overview3-636x492.png 636w\" sizes=\"(max-width: 659px) 100vw, 659px\" \/><\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Editing Slideshow<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<p>You can edit a slideshow at any time by going to the <strong>Slideshows<\/strong> admin page and then clicking the <strong>Edit<\/strong> button next to the specified slideshow name.<\/p>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/slideshow-edit.png\" alt=\"slideshow-edit\" class=\"alignnone wp-image-91663 size-full\" width=\"660\" height=\"194\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-edit.png 660w, https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-edit-636x187.png 636w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Managing Slides<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<ol class=\"listScreenCap\">\n<li class=\"seeScreenCap\">Whether creating a new slideshow or editing an existing one, you can always add a new slide by clicking the\u00a0<span class=\"howToRed\">Add New Slide<\/span>\u00a0button.<\/li>\n<li class=\"seeScreenCap\">When working with multiple slides, you can expand\/collapse the editing panel for individual slides by clicking on the arrowhead in the top right corner of the panel.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/managing-slides.png\" alt=\"managing-slides\" class=\"alignnone wp-image-91665 size-full\" width=\"677\" height=\"346\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2015\/04\/managing-slides.png 677w, https:\/\/www.bu.edu\/tech\/files\/2015\/04\/managing-slides-636x325.png 636w\" sizes=\"(max-width: 677px) 100vw, 677px\" \/><\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Deleting Slides<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<ol class=\"listScreenCap\">\n<li>When editing your slideshow, expand the panel for the slide you want to delete.<\/li>\n<li class=\"seeScreenCap\">Click the red\u00a0<span class=\"howToRed\">delete slide<\/span> link in the bottom right corner in slide settings panel.<\/li>\n<li>A dialogue box will pop up asking you to confirm deletion &#8212; click <strong>OK<\/strong>.<\/li>\n<li>Remember: your changes are not immediate &#8212; they will not take effect until you click the\u00a0<strong>Save Changes<\/strong>\u00a0button as well.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/sideshow-delete-slides.png\" alt=\"sideshow-delete-slides\" class=\"alignnone wp-image-91667 size-full\" width=\"660\" height=\"420\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2015\/04\/sideshow-delete-slides.png 660w, https:\/\/www.bu.edu\/tech\/files\/2015\/04\/sideshow-delete-slides-636x405.png 636w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Reordering Slides in a Slideshow<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<ol class=\"listScreenCap\">\n<li class=\"seeScreenCap\">After selecting a slideshow to edit, simply click and drag the titlebar for any slide panel to reorder it in the slideshow.<\/li>\n<li class=\"seeScreenCap\">Remember: your changes are not immediate &#8212; they will not take effect until you click the <span class=\"howToRed\">Save Changes<\/span> button for your overall slideshow.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/slideshow-reorder-slides.png\" alt=\"slideshow-reorder-slides\" class=\"alignnone size-full wp-image-91669\" width=\"660\" height=\"347\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-reorder-slides.png 660w, https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-reorder-slides-636x334.png 636w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Adding Images to a Slide<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<p><strong>IMPORTANT NOTE:<\/strong> For best results, use consistent image sizes. <strong>Sizing\/cropping all images to the same dimension works best.<\/strong> The\u00a0Responsive Framework theme works well with large images, but it is generally unnecessary to upload images wider than 2000 pixels. Larger images will make page loads slower &#8212; especially on mobile devices.<\/p>\n<p>You can add an image that is already in your Media Library, or you can upload a new image.<\/p>\n<h3>Adding an Image Already in your Media Library<\/h3>\n<ol class=\"listScreenCap\">\n<li>When adding\/editing a slide, click the <strong>Select Image<\/strong> button.<\/li>\n<li class=\"seeScreenCap\">From the Select Image box, click the <span class=\"howToRed\">Media Library tab<\/span> at the top of the screen.<\/li>\n<li class=\"seeScreenCap\"><span class=\"howToRed\">Click the thumbnail<\/span> for the image you wish to add. The selected image will display a checkmark in the top right corner.<\/li>\n<li class=\"seeScreenCap\">Specify the image size you want from the <span class=\"howToRed\">Attachment Display Settings<\/span> at the bottom of the right sidebar menu.<\/li>\n<li class=\"seeScreenCap\">Click the <span class=\"howToRed\">Select Image<\/span> button after you&#8217;ve selected your image and it&#8217;s corresponding settings.<\/li>\n<\/ol>\n<p><a href=\"\/tech\/files\/2015\/04\/slideshow-select-image1.png\"><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/slideshow-select-image1.png\" class=\"alignnone wp-image-91673 size-full\" width=\"660\" height=\"460\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-select-image1.png 660w, https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-select-image1-636x443.png 636w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<h3>Adding an Image via Upload<\/h3>\n<ol class=\"listScreenCap\">\n<li>When adding\/editing a slide,\u00a0click the\u00a0<strong>Select Image<\/strong>\u00a0button.<\/li>\n<li class=\"seeScreenCap\">From the Select Image box, click the\u00a0<span class=\"howToRed\">Upload Files\u00a0tab<\/span> at the top of the screen.<\/li>\n<li class=\"seeScreenCap\"><span class=\"howToRed\">A:<\/span> Click the <span class=\"howToRed\">Select Files<\/span> button to locate an image on your computer to upload;<br \/>\n<span class=\"howToRed\">B:<\/span> Or <span class=\"howToRed\">drag-and-drop<\/span> from a folder on your computer&#8217;s filesystem (Explorer\/Finder) onto the Upload Files panel in your browser.<\/li>\n<li>Once the image file is uploaded, specify the image size you want from the\u00a0<strong>Attachment Display Settings<\/strong>\u00a0at the bottom of the right sidebar menu\u00a0<em>(same as step 4 above)<\/em>.<\/li>\n<li>Click the <strong>Select Image<\/strong> button <em>(same as step 5 above)<\/em>.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/slideshow-upload-files.png\" alt=\"slideshow-upload-files\" class=\"alignnone size-full wp-image-91675\" width=\"660\" height=\"582\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-upload-files.png 660w, https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-upload-files-636x561.png 636w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Removing Images from a Slide<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<ol>\n<li>Click the indicator arrow in the top right corner of a slide to expand and view all options\/settings.<\/li>\n<li>Click the <strong>Remove Image<\/strong> button.<\/li>\n<li>Click the <strong>Save Changes<\/strong> button.<\/li>\n<\/ol>\n<p><em>NOTE: Removing an image from a slide does <span style=\"text-decoration: underline;\">not<\/span> delete the slide itself.<\/em><\/p>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/slideshow-remove-image.png\" alt=\"slideshow-remove-image\" class=\"alignnone size-full wp-image-91700\" width=\"660\" height=\"326\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-remove-image.png 660w, https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-remove-image-636x314.png 636w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Editing Images in a Slide<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<ol class=\"listScreenCap\">\n<li>Open any individual slide panel to reveal settings.<\/li>\n<li class=\"seeScreenCap\">On the left side of the slide panel, under the image thumbnail, you will see the image filename and an <span class=\"howToRed\">Edit<\/span> link. Click this link to open the image in the WordPress image editor. Here, you can perform image editing functions such as crop and resize.<\/li>\n<li class=\"seeScreenCap\">Also below the image thumbnail, you will see the <span class=\"howToRed\">Image Size Options<\/span>\u00a0in a\u00a0drop-down menu. Select the appropriate image size for the slideshow you are editing.<\/li>\n<li>Click the <strong>Save Changes<\/strong> button to save the slideshow with your changes. (NOTE that the image size selector only appears after you have clicked the\u00a0<strong>Save Changes<\/strong>\u00a0button.)<\/li>\n<\/ol>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/slideshow-edit-image.png\" alt=\"slideshow-edit-image\" class=\"alignnone size-full wp-image-91677\" width=\"547\" height=\"493\" \/><\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Change the Title of a Slide<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<ol>\n<li>Click the indicator arrow in the top right corner of a slide to expand and view all options\/settings.<\/li>\n<li>If it&#8217;s a new slide, delete the default text &#8212; &#8220;Untitled Slide&#8221; &#8212; and type the desired slide title into the <strong>Title<\/strong> field.<\/li>\n<li>If you do not want a title on the slide, leave the Title field blank.<\/li>\n<li>Click the <strong>Save Changes<\/strong> button.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/slide-edit-title.png\" alt=\"slide-edit-title\" class=\"alignnone size-full wp-image-91703\" width=\"660\" height=\"307\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slide-edit-title.png 660w, https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slide-edit-title-636x296.png 636w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Placing and Styling Captions<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<p>Editors can easily set the location of the caption on a per-slide basis, with advanced options for custom styling.<\/p>\n<ol class=\"listScreenCap\">\n<li class=\"seeScreenCap\">When placing a caption, you can choose from <span class=\"howToRed\">7 caption position options<\/span> simply by selecting from the menu. The options include any combination of top\/bottom for vertical placement, left\/center\/right for horizontal placement, and middle\/center.<\/li>\n<li class=\"seeScreenCap\">For advanced styling options, you can now <span class=\"howToRed\">add your own CSS class name(s)<\/span> on a per-caption basis. Along with the Custom CSS plugin, you can then write CSS style definitions to control fonts, font colors, font sizes, background color, etc.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/slideshow-caption-settings.png\" alt=\"slideshow-caption-settings\" class=\"alignnone size-full wp-image-91679\" width=\"652\" height=\"323\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-caption-settings.png 652w, https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slideshow-caption-settings-636x315.png 636w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Link a Slide to Another Page<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<p>Links, when specified, are applied to the caption and the image.<\/p>\n<ol>\n<li>Click the indicator arrow in the top right corner of a slide to expand and view all options\/settings.<\/li>\n<li>Copy\/paste the destination URL into the <strong>Link<\/strong> field.<\/li>\n<li>Click the <strong>Save Changes<\/strong> button.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/slide-edit-link.png\" alt=\"slide-edit-link\" class=\"alignnone size-full wp-image-91704\" width=\"660\" height=\"307\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slide-edit-link.png 660w, https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slide-edit-link-636x296.png 636w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Editing a Slide's Caption<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<ol>\n<li>Click the indicator arrow in the top right corner of a slide to expand and view all options\/settings.<\/li>\n<li>Type the desired text into the Caption\u00a0field.<\/li>\n<li>Click the <strong>Save Changes<\/strong> button.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/slide-edit-caption.png\" alt=\"slide-edit-caption\" class=\"alignnone size-full wp-image-91707\" width=\"660\" height=\"307\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slide-edit-caption.png 660w, https:\/\/www.bu.edu\/tech\/files\/2015\/04\/slide-edit-caption-636x296.png 636w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Adding a Slideshow to a Page<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<ol>\n<li>Navigate to, and enter the WordPress editor for,\u00a0the page where you&#8217;d like to add a slideshow.<\/li>\n<li>Click the <strong>Add Slideshow<\/strong> button directly above the content editing window.<br \/>\n<img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/add-slideshow-to-page.png\" alt=\"add-slideshow-to-page\" class=\"alignnone size-full wp-image-91682\" width=\"660\" height=\"277\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2015\/04\/add-slideshow-to-page.png 660w, https:\/\/www.bu.edu\/tech\/files\/2015\/04\/add-slideshow-to-page-636x267.png 636w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/li>\n<li>A popup window will allow you to define several options for embedding the slideshow on a web page:\n<ul>\n<li><strong><strong>STANDARD OPTIONS<img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/insert-slideshow-reg-options1.png\" class=\" wp-image-91686 size-full alignright\" width=\"206\" height=\"330\" \/><\/strong><\/strong>\n<ul>\n<li><strong>Select Slideshow<\/strong>: Select the title of the slideshow you wish to display on this page.<\/li>\n<li><strong>Select transition type:<\/strong>\u00a0Slide is the default type (images slide out of frame as the next image slides into the frame). You also have the option of fade transition.<\/li>\n<li><strong>Display Navigation<\/strong>: Check this box to display slide navigation; turn the check box off to embed a slideshow without slide-by-slide navigation.<\/li>\n<li><strong>Navigation style<\/strong>: On-slide navigation can be set to appear as icons or as sequential numbers.<\/li>\n<li><strong>Automatically play slideshow<\/strong>: Turn on the check box for the slideshow to begin playing automatically when a visitor loads the page. Un-check the box to require the user to navigate between slides.<\/li>\n<li><strong>Shuffle slides:<\/strong> Turn this on to have the slides display in a random order.<\/li>\n<\/ul>\n<\/li>\n<li><b>ADVANCED OPTIONS\u00a0<a href=\"\/tech\/files\/2015\/04\/insert-slideshow-adv-options.png\"><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/insert-slideshow-adv-options.png\" alt=\"insert-slideshow-adv-options\" class=\" size-full wp-image-91684 alignright\" width=\"206\" height=\"328\" \/><\/a><\/b>\n<ul>\n<li><strong>Fixed width<\/strong>: Specifies a fixed width, in pixels, for the slideshow.<\/li>\n<li><strong>Alignment<\/strong>: If your slideshow is not the full width of the available content area on the page where it is embedded, you can set the horizontal alignment of the overall slideshow here.<\/li>\n<li><strong>Custom Transition<\/strong>: Overrides transition selected under &#8220;Select Transition Type.&#8221; You must provide custom CSS transition code if you enter a value here.<\/li>\n<li><strong>Slide transition delay<\/strong>: Slow down or speed up your slideshow by setting the number of seconds between slide transitions.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Once you&#8217;ve specified your desired options, click <strong>Insert Slideshow<\/strong>.<\/li>\n<li>The single line of code that appears holds information for your specified options. When you next update and view your page, the slideshow will appear.<\/li>\n<\/ol>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Adding a Slideshow in a Widget<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<p><em>NOTE: This capability only works in the <strong>BU Text widget<\/strong>.<\/em><\/p>\n<ol class=\"listScreenCap\">\n<li>Perform the steps above to add a slideshow to a page.<\/li>\n<li class=\"seeScreenCap\">After you insert the slideshow into the page, highlight and <span class=\"howToRed\">CUT<\/span>\u00a0the shortcode from the visual editor.<\/li>\n<li class=\"seeScreenCap\">Click your cursor into a BU Text Widget, and <span class=\"howToRed\">PASTE<\/span> the code into the widget.<\/li>\n<li>Click <strong>Save Draft<\/strong>, <strong>Publish<\/strong>, or <strong>Update<\/strong> (depending on the status of the page) to save the page and widget.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/slideshow-into-widget.png\" alt=\"slideshow-into-widget\" class=\"alignnone size-full wp-image-91688\" width=\"636\" height=\"534\" \/><\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Advanced Options<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<p><em>The information below is for users who have some experience with manipulating code (particularly HTML and CSS) and want even more customizable options.<\/em><\/p>\n<h3><strong>Slideshow Shortcode and Support Attributes<\/strong><\/h3>\n<p>Slideshows are displayed with the shortcode <code>bu_slideshow<\/code>. The attributes supported are:<\/p>\n<ul>\n<li><strong>show_id<\/strong>: The numeric ID of the slideshow to be displayed.<\/li>\n<li><strong>show_nav<\/strong>: Whether to display slideshow navigation. Defaults to &#8220;true.&#8221;<\/li>\n<li><strong>nav_style<\/strong>: Style of the slideshow navigation. Defaults to &#8220;icon.&#8221; Currently &#8220;icon&#8221; and &#8220;number&#8221; are supported.<\/li>\n<li><strong>transition<\/strong>: Name of transition type to use. Currently the plugin offers &#8220;slide&#8221; and &#8220;fade,&#8221; with &#8220;slide&#8221; being the default. Any value can be entered here, and it will be output as a class in the slideshow with a prefix of &#8220;transition-,&#8221; e.g. &#8220;transition-mytransition.&#8221; This allows for the support of custom transition as defined via CSS.<\/li>\n<li><strong>autoplay<\/strong>: Whether the show would automatically animate on a timed interval. Defaults to &#8220;true.&#8221;<\/li>\n<li><strong>show_arrows<\/strong>: Whether arrows should be displayed on either side of the slideshow, allowing user to move backward and forward in show. Defaults to &#8220;false.&#8221;\u00a0<em>This is the only attribute that cannot be edited in the UI.<\/em><\/li>\n<li><strong>width<\/strong>: Either a numerical value (in pixels) or &#8220;auto,&#8221; which allows the slideshow to fill its container horizontally. Defaults to &#8220;auto.&#8221; Slides are set to the height of the tallest slide. Images have &#8220;max-width: 100%&#8221; applied and will scale down to the slideshow width as necessary (which may affect slideshow height). The slideshow resizes with the page, so it plays nice with device orientation changes.<\/li>\n<\/ul>\n<p><em>If &#8220;autoplay&#8221; is set to false, the plugin will set &#8220;show_arrows&#8221; to true, unless &#8220;show_arrows&#8221; has been explicitly set to false in the shortcode. This is to help ensure that visitors always have a clear way of moving through the show.<\/em><\/p>\n<h3>Advanced Height Option<\/h3>\n<p>Depending upon how and where you embed a slideshow on a page, you may wish for the page to hold a space for the height of the slideshow while the slides are loading. This prevents the content from &#8220;jumping&#8221; on the page after the slides load and slideshow begins.<\/p>\n<p>You can set this option individually on each slideshow. Just edit your slideshow, scroll to the bottom of the editing window, and set the <strong>Default Height<\/strong> option in pixels.<\/p>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2015\/04\/slideshow-default-height.png\" alt=\"slideshow-default-height\" class=\"alignnone size-full wp-image-91692\" width=\"564\" height=\"354\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>Slideshow Custom CSS<\/strong><\/h3>\n<p>Slideshows are given a CSS class created from the name you give the slideshow. You can target your slideshow &#8211; and individual slides &#8211; by using this CSS class and your own CSS classes. Browse the page that contains your slideshow, and view page source in your browser to determine your slideshow&#8217;s CSS class name.<\/p>\n<p><em>In order to use custom CSS, you must first <a href=\"https:\/\/www.bu.edu\/tech\/comm\/websites\/www\/wordpress\/how-to\/use-custom-styles\/\">enable the Custom CSS plugin<\/a>.<\/em><\/p>\n<p><strong>Example 1)<\/strong> If you want to put a solid, BLACK\u00a0border of 2 pixels around your slideshow, add the code below to your Custom CSS window, replacing &#8220;mySlideshow&#8221; with the CSS class name of your slideshow:<\/p>\n<pre class=\"code-block\"><code><span style=\"padding-left: 30px;\">.mySlideshow {<\/span>\r\n<span style=\"padding-left: 60px;\">border: 2px solid black;<\/span>\r\n<span style=\"padding-left: 30px;\">}<\/span>\r\n<\/code><\/pre>\n<p>Each caption is given a class name of &#8220;.bu-slide-caption.&#8221; You can add other custom class names via the settings box for each individual slide.<\/p>\n<p><strong>Example 2)<\/strong>\u00a0If you want to put a solid, RED\u00a0border of 2 pixels around <em>just one of the slides in the same\u00a0slideshow<\/em>, add the code below to your Custom CSS window, replacing &#8220;mySlideshow&#8221; with the CSS class name of your slideshow and &#8220;myCustomSlideClass&#8221; with the name of your custom-created CSS class name:<\/p>\n<pre class=\"code-block\"><code><span style=\"padding-left: 30px;\">. mySlideshow .bu-slide-caption .myCustomSlideClass {<\/span>\r\n<span style=\"padding-left: 60px;\">border: 2px solid red;<\/span>\r\n<span style=\"padding-left: 30px;\">}<\/span>\r\n<\/code><\/pre>\n<h3><strong>Custom Slideshow Transitions<\/strong><\/h3>\n<p>Sequence.js uses CSS 3 transitions that must be defined by the developer (<a href=\"http:\/\/www.w3schools.com\/css\/css3_transitions.asp\">if CSS 3 transitions are not supported in the browser<\/a>, it falls back to a js-based slide animation). BU Slideshow defines transition states for slide and fade animations. When the slideshow markup is output, the transition type is added a class (e.g., &#8220;transition-slide&#8221;) and the relevant CSS is declared as descendants of this class.<\/p>\n<p>Custom transitions can be defined using the Custom CSS plugin or within a theme&#8217;s CSS. The relevant styles should descend from a \u00a0&#8220;transition-mytransition&#8221; class, where &#8220;mytransition&#8221; is the name you want to give it. Users can then enter &#8220;mytransition&#8221;\u00a0as a custom transition in the modal form (or directly as the &#8220;transition&#8221; option in the shortcode) and your custom transition CSS will be used.<\/p>\n<p>For more on how to write animations for sequence.js, see the <a href=\"http:\/\/www.sequencejs.com\/developers\/documentation\/\">Sequence documentation<\/a> and BU Slideshow&#8217;s CSS files. The use of CSS allows for great flexibility in animations.<\/p>\n<p><\/div>\n<\/div>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h2 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Using BU Slideshow in the Content Banner<\/h2><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<p>BU Slideshow does not work in the &#8220;Content Banner&#8221; section for sites using Responsive Framework version 2.<\/p>\n<p>Older sites (Responsive Framework v.1) can still use BU Slideshow as a content banner, but some themes may require a bit of Custom CSS to prevent the dropdowns of your primary navigation menu from displaying behind the slideshow. To use the BU Slideshow as a content banner:<\/p>\n<ol>\n<li>Embed the BU Slideshow shortcode onto your page.<\/li>\n<li>Change your content banner settings to use the &#8220;hand-crafted HTML&#8221; option.<\/li>\n<li>Cut\/paste the BU Slideshow shortcode from your page into the content banner code section.<\/li>\n<li>If your dropdown menus from the primary navigation display <em>behind<\/em> the slideshow, add this code in your Custom CSS: <code>.banner-container &gt; div { z-index: 1; }<\/code><\/li>\n<\/ol>\n<p><\/div>\n<\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview BU Slideshow is a plugin for creating and managing slideshows. It is designed to be simple enough for any site admin to use, and powerful enough to meet the needs of designers. The plugin has many optional functions that make it flexible enough for a variety of uses: slideshows, photo rotations, feature card decks&#8230;<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":304,"menu_order":52,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/70281"}],"collection":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/comments?post=70281"}],"version-history":[{"count":50,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/70281\/revisions"}],"predecessor-version":[{"id":138412,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/70281\/revisions\/138412"}],"up":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/304"}],"wp:attachment":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/media?parent=70281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}