Tag: Bootstrap

HOWTO: Simple Bootstrap 4 WordPress Gallery

If you are looking for a simple way to have your WordPress inserted galleries use the Bootstrap 4 layout – look no further. Just drop this code into your theme’s functions.php file and any WordPress gallery you insert when selecting media ([ gallery ids=”” ]) will then use the Bootstrap layout.

Code Needed for the WordPress Gallery

/**
 * Bootstrap 4 gallery
 */
add_filter( 'post_gallery', 'lucidity_bootstrap_gallery', 10, 2);
function lucidity_bootstrap_gallery( $output = '', $atts, $instance ) {
    if (strlen($atts['columns']) < 1) $columns = 3;
    else $columns = $atts['columns'];
    $images = explode(',', $atts['ids']);
    
    // Set the # of columns you would like
    if ( $columns < 1 || $columns > 12 ) $columns == 3;
    
    $col_class = 'col-lg-' . 12/$columns;
    
    $output = '<div class="row text-center text-lg-left gallery">';
    $i = 0;
    
    foreach ( $images as $key => $value ) {
       
        $image_attributes = wp_get_attachment_image_src( $value, 'thumbnail');
        $output .= '
            <div class="'.$col_class.'">
              <a data-gallery="gallery" href="'.esc_url($image_attributes[0]).'" class="d-block mb-4 h-100">
                    <img src="'.esc_url($image_attributes[0]).'" alt="" class="img-fluid img-thumbnail">
                </a>
            </div>';
        $i++;
    }
    
    $output .= '</div>';
    
    return $output;
}

A few things to note:

  1. This example uses the image size “thumbnail”. If you want to use something different – you can change that here on this line: $image_attributes = wp_get_attachment_image_src( $value, ‘thumbnail’);
  2. This example uses 3 columns. Depending on the size of your images – you may also what to change that. You can make the change by changing the two references to “3” in the code above ($columns == 3, $columns = 3)

You can see the gallery in action here: http://www.jappler.com/2014/07/25/recent-visit-911-memorial/

Structured Data with Bootstrap

Perhaps you used Bootstrap for your web site and are excited that you have a responsive web site with all the bells an whistles. You were hoping that would help your SEO ranking, but you should know there is more to be done! Enter “structured data“. Structured data can help differentiate a recipe from an article from an event – all things that Google supports and will display depending on how the structured data is set up.

Not sure where to start?

Navigation

The differences are not too much but can make a big difference.

Simple Default Bootstrap Navigation
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
Simple Default Bootstrap Navigation with Structured Data
<ul itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"class="navbar-nav mr-auto">
<li itemprop="name" class="nav-item active"><a itemprop="url" class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li itemprop="name" class="nav-item"><a itemprop="url" class="nav-link" href="#">Link</a></li>
</ul>

Breadcrumbs

By adding a little code to your already existing breadcrumbs – you will provide structured data that search engines can understand.

Simple Default Bootstrap Breadcrumbs
<ol class="breadcrumb">
<li class="breadcrumb-item"><a itemprop="item" href="/"><span itemprop="name">Home</span></a></li>
</ol>
Simple Default Bootstrap Breadcrumbs with Structured Data
<ol itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb ">
<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">Home</span></a></li>
</ol>

Once you add in structured data to your site you can then use the Google Structured Data Testing Tool to make sure everything is set up and configured correctly. Not sold? Check out: The Beginner’s Guide to Structured Data for SEO: A Two-Part Series

Note: This is based on Bootstrap 4.