2

So I'm creating a shortcode that uses the standard bootstrap carousel.

It works completely fine as long as all the 3 slide attributes are entered correctly but obviously if only 2 are set and the forth is not it still creates the 3th div for the slide but just does not enter the image src url and therefore creates a blank slide. The thing is each time it will be used it will have a different amount of slides and I want it to work if only 2 image urls are passed or 4.

functions:

// Add Shortcode for single portfolio slider
function slider_shortcode( $atts , $content = null ) {

// Attributes
extract( shortcode_atts(
    array(
        'slide1' => '',
        'caption1' => '',
        'slide2' => '',
        'caption2' => '',
        'slide3' => '',
        'caption3' => '',

    ), $atts )
);

// Code
return '
<div class="col-lg-7">
    <div class="carousel slide padtop" data-ride="carousel" id=
    "carousel-example-generic">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
        <img src="' . $slide1 . '" class="img-responsive">
        <div class="carousel-caption">
                    ' . $caption1 . '
                    </div>
            </div>
            <div class="item">
        <img src="' . $slide2 . '" class="img-responsive">
        <div class="carousel-caption">
                    ' . $caption2 . '
                 </div>
            </div>
            <div class="item">
                <img src="' . $slide3 . '" class="img-responsive">
                <div class="carousel-caption">
                    ' . $caption3 . '
                </div>
            </div>
    <div class="item">
                <img src="' . $slide4 . '" class="img-responsive">
                <div class="carousel-caption">
                    ' . $caption4 . '
                </div>
            </div>
        </div><!-- Controls -->
        <a class="left carousel-control top20 transitionfast" data-slide=
        "prev" href="#carousel-example-generic" role=
        "button"><span aria-hidden="true" class=
        "glyphicon glyphicon-chevron-left"></span> <span class=
        "sr-only">Previous</span></a> <a class=
        "right carousel-control top20 transitionfast" data-slide="next"
        href="#carousel-example-generic" role="button"><span aria-hidden=
        "true" class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span></a>
    </div>
</div>
';

}
add_shortcode( 'slider', 'slider_shortcode' );

Shortcode:

[slider slide1="/img/img1.png" caption1="" slide2="/img/img2.jpg" caption2="test text 2"][/slider]
  • Fix the code for shrotcode callback. The function is missing some code. – Sisir Jan 31 '16 at 12:03
  • @Sisir sorry, my mistake updated – Mike Young Jan 31 '16 at 12:07
  • use conditional statements to check if the attributes are actually set, before you output each slide. – Michael Feb 1 '16 at 0:06
2

I would prefer two array of images, captions.

For example:

I have added comments on the code for better understanding.

function wpse216239_slider_shortcode( $atts , $content = null ) {
    // Attributes
    $atts = shortcode_atts(
        array(
            'slides' => '', // one master attribute for slides
            'captions' => '' // one master attribute for captions
        ), 
        $atts,
        'myslidershortcode' 
    );

    $slides = explode(';;', $atts['slides']); // slide urls separated by ;;
    $captions = explode(';;', $atts['captions']); // caption texts separated by ;;

    if(empty($slides)){
        return '<!-- no slides -->';
    }

    $html = '
    <div class="col-lg-7">
        <div class="carousel slide padtop" data-ride="carousel" id=
        "carousel-example-generic">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
    ';


    $active = 'active';
    $i = 0;

    foreach($slides as $src){
        $caption = isset($captions[$i]) ? $captions[$i] : ''; 

        $html .= "<div class=\"item " . esc_attr( $active ) . "\">";
        $html .= "<img src=\"" . esc_url( $src ) . "\" class=\"img-responsive\">";

        if($caption) // only add caption if available
            $html .= "<div class=\"carousel-caption\">" . esc_html( $caption ) . "</div>"

        $html .= '</div>';

        $active = '';
        $i++;
    }

    $html .= '</div></div></div>';

}
add_shortcode( 'slider', 'wpse216239_slider_shortcode' );

This code will only generate slider html if images are given to the shortcode. Separate image url and captions by ;;

Implementation

[slider 
    slides="http://example.com/image1;;http://example.com/image2"
    captions="My caption1;;Mycaption2"
]

Code is given for demonstration purpose. It is not tested and should not put in a production site without testing.

  • That is great thank you so much, I ended up doing it with a nested shortcode but this is probably a better alternative, thank you! – Mike Young Feb 4 '16 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.