Search code examples
wordpressshortcode

Content block shortcode plugin for Wordpress 3.9.x theme


I am developing custom shortcode wordpress 3.9.x plugin but code doesn't work properly. Code should change based on the parameter like media="image" or media="video" and css class should add based on parameter position="left" or position="right".

If image, value for path will be image url. If, video, value for path will be youtube embed code url.

Any help?

Shortcodes is as below:

[contentblock class="gray" position="left" media="video" path="....youtube video link...."]Video[/contentblock]
[contentblock class="gray" position="left" media="image" path="....image url...." alt="alter text" ]Image[/contentblock]

Code is as below:

function contentposFun( $atts, $content = null ) {
    extract( shortcode_atts( array(
        "class" => '',
        "path" => '',
        "alt" => '',
                "contentPos" => '', //Left, Right
                "contentLeft" => '',
                "mediaRight" => '',
                "mediaType" => '', // Image, Video
                "isImage" => '',
                "isVideo" => '',
                "imgCenter" => '',
    ), $atts, 'contentblock' ) );

        if($contentPos == "left"){
        $mediaRight = " col-md-push-7 ";
                $contentLeft = " col-md-upll-5 ";
    }
    else { 
        $mediaRight = " ";
                $contentLeft = " ";
    }

    if($mediaType == "image"){
                $imgCenter = ' img_center';
                $mediaType .= ' <img src="' .$path. '" alt="'.$alt.'" class="img-responsive"' . ' />';
    }
    else {
        $mediaType .= ' <div class="flex-video widescreen"><iframe width="560" height="315" src="' .$path. '" frameborder="0" allowfullscreen></iframe></div>';
    }

        return '<div class="container-fluid '.$class.'">
            <div class="row">
            <div class="container full_height">
            <div class="row full_height relative">
            <div class="col-md-5' .$imgCenter. '' .$mediaRight.'">' .$mediaType. '</div>
            <div class="col-md-7'.$contentLeft.'full_height absolute ">
            <div class="table full_height">
            <div class="table-row full_height">
            <div class="table-cell full_height valign_middle">'
            .do_shortcode($content).
            '</div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>';            
}
add_shortcode( 'contentblock', 'contentposFun' );

Solution

  • I am done with my code and it works well. This code can generate 4 types of shortcodes.

    Shortcode:

    [conblock class="gray" pos="left" media="image" path="img1.png" alt="image text"] Content[/conblock]
    [conblock class="white" pos="right" media="image" path="img1.png" alt="image text"] Content[/conblock]
    [conblock class="gray" pos="left" media="video" path="//www.youtube.com/embed/A2ojlR2Rxiw"] Content[/conblock]
    [conblock class="white" pos="right" media="video" path="//www.youtube.com/embed/A2ojlR2Rxiw"] Content[/conblock]
    

    Plugin code:

    function conblockFun( $atts, $content = null ) {
        extract( shortcode_atts( array(
            'class' => '', //white, gray
            'pos' => '', //left, right
            'media' => '', //image, video
            'left' => '', // true, false
            'right' => '', //true, false
            'path' => '', // image path or video path          
            'alt' => '', // if image add alt text
        ), $atts, 'conblock' ) );
    
        $output = '<div class="container-fluid '.$class.'">
                    <div class="row">
                    <div class="container full_height">
                    <div class="row full_height relative">';
        if($pos == 'left' && $media == 'image') { $output .= '<div class="col-md-5 col-md-push-7 img_center"><img src="' .$path. '" alt="'.$alt.'" class="img-responsive"' . ' /></div><div class="col-md-7 col-md-pull-5 full_height absolute">';}
        if($pos == 'left' && $media == 'video') { $output .= '<div class="col-md-5 col-md-push-7"><div class="flex-video widescreen"><iframe width="560" height="315" src="' .$path. '" frameborder="0" allowfullscreen></iframe></div></div><div class="col-md-7 col-md-pull-5 full_height absolute">';}     
        if($pos == 'right' && $media == 'image') { $output .= '<div class="col-md-5 img_center"><img src="' .$path. '" alt="'.$alt.'" class="img-responsive"' . ' /></div><div class="col-md-7 col-md-push-5 full_height absolute">';}
        if($pos == 'right' && $media == 'video') { $output .= '<div class="col-md-5"><div class="flex-video widescreen"><iframe width="560" height="315" src="' .$path. '" frameborder="0" allowfullscreen></iframe></div></div><div class="col-md-7 col-md-push-5 full_height absolute">';} 
        $output .= '<div class="table full_height">
                    <div class="table-row full_height">
                    <div class="table-cell full_height valign_middle">'
                    .do_shortcode($content).
                    '</div>
                    </div>
                    </div>
                    </div>
                    </div>
                    </div>
                    </div>
                    </div>
                    </div>';
        return $output;
    }
    
    add_shortcode("conblock", "conblockFun");