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.

Remove Extra Spacing in Dropdown Menus (Bootstrap)

When working with Bootstrap dropdown menus – there is a gap when hovering over items in dropdown menus at the very top and very bottom of the menu. If it bothers you like it does me (when looking at a hover state of a menu item in the drop down), you can easily solve it by adding in one line of code:

nav.navbar-fixed-top .dropdown-menu {padding-top:0;padding-bottom:0}

Note: You may need to change the class of the navbar to match whatever you have in your code.

Before:

With that code – you can see the difference:

After:

Sometimes the extra/default spacing is fine – but there are other times where you need to get the hover state to go all the way to the top/bottom. With this simple CSS – you can easily make your designer happy.

HOWTO: Easily Create Custom Buttons for Bootstrap

Looking to create custom Bootstrap buttons to fit in your custom design? There is a great tool available online: http://charliepark.org/bootstrap_buttons/ that allows you to select the exact colors you need in order to create a custom button class.

bootstrap-buttons

In the screenshot above – you can see I used the Photoshop color eyedropper to get the exact color information I needed – and then matched up the values (hue, saturation and lightness) with the eyedropper values (H,S,B). This makes creating custom Bootstrap buttons extremely easy because after selecting your values – the custom CSS class is then available for you to copy and paste into your stylesheet.

SDAC Inc. Web Site Update

As a web development company – we are always busy working on other client web sites and we have been so busy – we overlooked our own site for the last two years.

sdac-2014Over the last two years I have had every intention on updating our own web site to use Bootstrap as well as some newer WordPress functionality but always seemed too busy with other projects. A lot has changed with browsers, devices, and WordPress since our last update – and enough was enough. Over the last few weeks – I blocked out some time each day so we would finally have the responsive theme that was long overdue.

We had developed a few sites using Bootstrap and it was time we put what we had learned and have grown to love in place on our own web site. We still have some bugs to squash, but overall, are happy we finally have moved to have a responsive theme.

Furthermore – we will begin re-looking at our commercial themes that need an update as well. The updates will make our commercial themes responsive and ready for all your devices. Expect to hear more about our Lucidity themes soon!

We hope you find it easier to view on all your devices.