Sage 9 - Bootstrap 4 - WP Gallery & styles


Hi there,

I’m about to start working on a WP Gallery in a Sage 9 based theme

was wondering:

  • if I was not mistaken in not seeing the Sage Gallery override anymore
  • if someone has started a Sass / Css effort to style a WP Gallery (as outputted by the native WP shortcode) with the latest BS4 alpha 6 (flexbox default)



Here’s what we did to get the bootstrap galleries working on our Sage 9 theme. I realize this was removed from 9, probably intentionally because they want to be framework agnostic, but we still use bootstrap on most of our designs so we needed to get the bootstrap gallery working.

The scenario is this, Sage 9, Bootstrap 4, Soil Plugin activated, image gallery on a post wouldn’t display in the columns as specified in the gallery shortcode. Here’s the shortcode we are using:

[gallery columns="4" size="medium" link="file" ids="123,123,123,123" orderby="rand"]

We had to download the old gallery.php file from Sage 8 and put it into the /src/lib directory of the theme.

Then we removed line 119 and line 123 from the gallery.php file.

Lines 118-124 of /src/lib/gallery.php before:

if (current_theme_supports('bootstrap-gallery')) {
  add_shortcode('gallery', __NAMESPACE__ . '\\gallery');
  add_filter('use_default_gallery_style', '__return_null');

Lines 118-122 of /src/lib/gallery.php after:

add_shortcode('gallery', __NAMESPACE__ . '\\gallery');
add_filter('use_default_gallery_style', '__return_null');

Then in src/setup.php we added the following lines at the bottom of the file:


require_once locate_template('/src/lib/gallery.php');

Credit to antke’s post for helping us get there, just needed to be tweaked a little.


The gallery.php file still needs updating to be more in line with the way BS4 uses flexbox rows now

In addition, I commented out lines 128-131

/* function attachment_link_class($html) {
$html = str_replace('<a', '<a class="thumbnail img-thumbnail"', $html);
return $html;
} */

and added the following to 90-102

$thumbclass = array( 'class' => 'thumbnail img-thumbnail');
foreach ($attachments as $id => $attachment) {
	switch($link) {
	case 'file':
		$image = wp_get_attachment_link($id, $size, false, false, null, $thumbclass);
	case 'none':
		$image = wp_get_attachment_image($id, $size, false, $thumbclass);
		$image = wp_get_attachment_link($id, $size, true, false, null, $thumbclass);

because should not that class belong on the image, not on the wrapper, in BS4?