Custom Slideshow

The Steps

  1. Activate the plugin Logged in AND Logged out Shortcodes
  2. Activate the plugin WPAUTO P
  3. Select Page for the slideshow
  4. Page must be a 1 column layout
  5. Copy the code needed for the slideshow
  6. Copy the html needed for the content below or above the slideshow
  7. Download and export the gravity form used to create the slides
    • Select the category us wish to us when creating slides and apply it to the gravity form setting
  8. Start creating content

*optional request the plugin taxonomies-for-pages to be activated. This will allow pages to have categories.


Logged in AND Logged out Shortcodes Plugin

The purpose of activating this plugin is so that logged in users will see an edit content button for each slide. This will allow quick and easy management of the slides. Please see more on this plugin here.

WPAUTO P Plugin

The purpose of activating this plugin is so that the page with the slideshow, WordPress won’t add random line breaks. To use this feature, create a Custom Field named WPAUTOP and give the field a value of false.

The Code and Recommendations

Recommendation

It is recommend to place the custom slideshow code into a "Section Widget" in the "Before Content" widget area, and to check off which page the slideshow goes.

Screen Shot 2014-05-13 at 2.37.35 PMSection Widget Example

The Html should go into the section widget:


<div id="myCarousel2" class="educ-dynamic carousel slide">
<ol class="carousel-indicators">[loop query="post_type=any&category_name=custom-slider&post_per_pag=5"]<li class="slide-orb" data-target="#myCarousel2" data-slide-to=""></li>[/loop]</ol><div class="carousel-inner">[loop query="post_type=any&category_name=custom-slider&post_per_pag=5"]
<div class="item [odd-even]"><div class="custom-slider"><div class="custom-slider-image"><a class="custom-slider-link [cf video-slide]" href="[cf custom-slider-link]" title="[the_title]">[the_post_thumbnail size=full]</a></div><div class="custom-slider-content"><div class="custom-slider-content-inner"><div class="custom-slider-title"><h2 class="post-title"><a href="[cf custom-slider-link]" title="[the_title]">[the_title]</a></h2></div><div class="clear clearfix"></div><div class="custom-slider-excerpt">[the_excerpt][loggedin]<a style="color: #666" class="edit alizarin" href="/wp-admin/post.php?post=[the_ID]&action=edit">edit content <i class="icon-edit"></i></a>[/loggedin]
<a class="custom-slider-link read-more [cf video-slide]" href="[cf custom-slider-link]" title="[the_title]">[cf custom-slider-read-more]</a></div></div></div></div></div>
[/loop]</div>
<a class="carousel-control left" href="#myCarousel2" data-slide="prev"><i class="icon-chevron-left"></i></a>
<a class="carousel-control right" href="#myCarousel2" data-slide="next"><i class="icon-chevron-right"></i></a>
</div>

This can go in one of two places:

  • In the Custom CSS for the entire website *Recommended
  • or

  • The Custom CSS for the page

  • /* Custom SLider--------------------------------- */
    .home .full-width-container > #container { padding-top: 0!important }
    .custom-slider-container {
    margin-right: auto;
    margin-left: auto;
    }
    .educ-dynamic {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    display: block;
    height: 485px;
    width: 940px;
    }
    .educ-dynamic .carousel-inner .item {
    max-height: none;
    min-height: 0;
    height: auto;
    color: #FFF;
    line-height: 1.5;
    }
    .custom-slider {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: block;
    height: 100%;
    }
    .custom-slider img {
    max-width: none;
    height: 200px;
    width: auto;
    -webkit-filter: saturate(100%);
    margin: 0 auto;
    display: block;
    }
    .custom-slider:hover img { -webkit-filter: saturate(0%) }
    .custom-slider h1, .custom-slider h3, .custom-slider h3, .custom-slider h4, .custom-slider a { color: #FFF }
    .custom-slider-content, .custom-slider-title, .custom-slider-excerpt, .custom-slider-image, .educ-dynamic .carousel-inner {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .custom-slider-image {
    position: relative;
    display: block;
    margin: 0 auto;
    text-align: center!important;
    }
    .custom-slider-content {
    float: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    font-size: 16px;
    font-weight: 700;
    }
    .custom-slider-title, .custom-slider-excerpt {
    font-weight: 100;
    display: block;
    padding: 10px 15px;
    }
    .custom-slider-title {
    background-color: #3f7ea7;
    background-color: rgba(63, 126, 167, 1);
    margin-bottom: 0;
    height: 110px;
    }
    .custom-slider-title h2, .custom-slider-title a {
    line-height: 1.5;
    margin: 0;
    }
    .custom-slider-title a.fancybox-youtube:after, .custom-slider-title a.fancybox-vimeo:after {
    content: "\F01D";
    margin-left: 15px;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    }
    .custom-slider-title a.fancybox-youtube:hover, .custom-slider-image a.fancybox-youtube { text-decoration: none }
    .custom-slider-excerpt {
    background-color: #FFF;
    background-color: rgba(255, 255, 255, 1);
    color: #666;
    height: 150px;
    }
    .custom-slider-excerpt a.read-more {
    display: block;
    margin-top: 15px;
    color: #3f7ea7;
    text-decoration: none;
    }
    .custom-slider-content-inner { padding: 0 }
    .custom-slider .carousel-control { z-index: 50 }
    .educ-dynamic .carousel-indicators {
    top: auto;
    left: 15px;
    bottom: 0;
    }
    .educ-dynamic .carousel-indicators li {
    background-color: #ddd;
    margin-right: 30px;
    cursor: pointer;
    }
    .educ-dynamic .carousel-indicators .active { background-color: #999 }
    .educ-dynamic .carousel-control {
    top: 20%;
    color: #fff;
    }
    .educ-dynamic .carousel-control:hover { color: #999 }
    @media screen and (min-width: 767px) {
    .educ-dynamic { height: auto }
    .custom-slider img {
    max-width: none;
    height: auto;
    }
    .custom-slider-content-inner { margin: 100px }
    .educ-dynamic .carousel-inner .item {
    max-height: 300px;
    min-height: 300px;
    height: 300px;
    color: #FFF;
    line-height: 1.5;
    }
    .custom-slider-image {
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    margin-right: -50%;
    margin-left: -50%;
    }
    .custom-slider-content {
    position: relative;
    /* background-color: #000;*/
    /* background-color: rgba(63, 126, 167, 0.8);*/
    float: left;
    margin: 0;
    padding: 0;
    width: 800px;
    height: 100%;
    font-size: 16px;
    }
    .custom-slider-title, .custom-slider-excerpt {
    font-weight: 100;
    padding: 5px 15px;
    line-height: 1.6;
    display: inline-block;
    }
    .custom-slider-title {
    background-color: rgba(63, 126, 167, 0.9);
    margin-bottom: 2px;
    height: auto;
    }
    .custom-slider-excerpt {
    background-color: rgba(255, 255, 255, 0.9);
    color: #666;
    height: auto;
    }
    .custom-slider:hover .custom-slider-title {
    /* background-color: #000;
    background-color: rgba(63, 126, 167, 1);*/
    background-color: rgba(63, 126, 167, 1);
    }
    .custom-slider:hover .custom-slider-excerpt {
    /* background-color: #000;
    background-color: rgba(63, 126, 167, 1);*/
    background-color: rgba(255, 255, 255, 1);
    }
    .educ-dynamic .carousel-indicators {
    top: auto;
    right: 25px;
    left: auto;
    bottom: 5px;
    }
    .educ-dynamic .carousel-indicators li {
    background-color: #ddd;
    margin-right: 5px;
    }
    .educ-dynamic .carousel-control { top: 40% }
    }

    @media screen and (min-width: 979px) {
    .educ-dynamic {
    margin-top: 0;
    margin-right: -15px;
    margin-left: -15px;
    padding-left: 0!important;
    padding-right: 0!important;
    }
    .custom-slider-content { margin-left: 5% }
    .custom-slider-content-inner { margin: 100px 50px 30px 30px }
    }
    @media screen and (max-width: 979px) {
    .educ-dynamic {
    margin-right: -20px;
    margin-left: -20px;
    }
    }
    @media screen and (min-width: 1200px) {
    .educ-dynamic {width: auto; height: auto}
    .custom-slider { width: 100% }
    .custom-slider-content-inner { margin: 180px 50px 30px 30px }
    .educ-dynamic .carousel-inner .item {
    max-height: 400px;
    min-height: 400px;
    height: 400px;
    color: #FFF;
    line-height: 1.5;
    }
    .custom-slider-content {
    position: relative;
    /* background-color: #000;*/
    /* background-color: rgba(63, 126, 167, 0.8);*/
    margin-left: 10%;
    }
    .educ-dynamic .carousel-indicators {
    top: auto;
    right: 15%;
    left: auto;
    bottom: 5px;
    }
    }
    @media screen and (min-width: 1800px) {
    .educ-dynamic {
    max-width: 1800px;
    margin-right: auto;
    margin-left: auto;
    }
    }
    @media screen and (max-width:1800px) {
    .educ-dynamic {
    width: auto;
    height: auto
    }
    }

    This should go in the Custom JavaScript box located on the page with the slideshow.


    jQuery(document).ready((function($){
    $('.carousel').carousel({
    interval: 6000
    });
    $.each($(".slide-orb"), function(index, value){
    var num = index + 0;
    $(value).attr("data-slide-to", + num);
    });

    $( ".item" ).first().addClass( "active" );

    $("#myCarousel2").swiperight(function() {
    $("#myCarousel2").carousel('prev');
    });
    $("#myCarousel2").swipeleft(function() {
    $("#myCarousel2").carousel('next');
    });
    }));

    Download

    Download the entire combined code here.

    Full Width centred content

    If the Full Width layout is activated and centre alignment has been selected use this snippet of code below to centre the rest of the pages content.

    <div class="custom-slider-container container row-fluid"> <div class="hfeed content span12"> CONTENT GOES HERE </div></div>

    The Form

    You can use a form to create slides. Download and import the form in Gravity Forms.