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:
- 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’);
- 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
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.
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.
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.