• Hi,

    I create my own gallery shortcode using bootstrap 3 layout.
    I want to share it, but also need more cleaner way since I just modify some code I found to create this shortcode.

    The code consist of 3 functions:

    /* Bootstap Gallery
     * Usage:
     * [btgalleryStart class='for first row only - leave empty for else']
     *		[btgallery-item col="4" src="image url" alt=""]
     *		[btgallery-item col="4" src="image url" alt=""]
     *		[btgallery-item col="4" src="image url" alt=""]
     * [btgalleryEnd]
     */
    function lmd_btGalleryTop($atts, $content = null) {
       extract(shortcode_atts(array(
        'bg_class' => 'btgallery'
       ), $atts));
       return '<div class="row btgallery '.$bg_class.'">';
    }
    add_shortcode("btgalleryStart", "lmd_btGalleryTop");
    
    function lmd_btGalleryBottom() {
       return '</div>';
    }
    add_shortcode("btgalleryEnd", "lmd_btGalleryBottom");
    
    function lmd_btGalleryItem($atts, $content = null) {
       extract(shortcode_atts(array(
        'col' => 4,
    	'src' => '',
    	'alt' => ''
       ), $atts));
       return '<div class="col-md-'.$col.'"><img src="'.$src.'" class="img-responsive" /></div>';
    }
    add_shortcode("btgalleryItem", "lmd_btGalleryItem");

    and the usage:

    [btgalleryStart]
    [btgalleryItem src="https://amrinz.files.wordpress.com/2015/04/gili-trawangan-island.jpg" col=4 alt="just example"]
    [btgalleryItem src="https://amrinz.files.wordpres.com/2015/04/gili-trawangan-island.jpg" col=4 alt="just example"]
    [btgalleryItem src="https://amrinz.files.wordpress.com/2015/04/gili-trawangan-island.jpg" col=4 alt="just example"]
    [btgalleryEnd]

    Its working but I think there is another way to join those functions and make it more efficient. Help me to make it look like this:

    [btgallery class="myClass" col=2]
      [btgalleryItem src="" alt=""]
      [btgalleryItem src="" alt=""]
    [/btgallery]

    Thanks for your help

The topic ‘Cleaner Bootstrap Gallery Shortcode’ is closed to new replies.