Remove HTML content if attribute is not set / variable attributes

by

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]

1 Answer
1

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.

Leave a Comment