Hi there,
I’m about to start working on a WP Gallery in a Sage 9 based theme
was wondering:
thanks
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')) {
remove_shortcode('gallery');
add_shortcode('gallery', __NAMESPACE__ . '\\gallery');
add_filter('use_default_gallery_style', '__return_null');
}
Lines 118-122 of /src/lib/gallery.php after:
}
remove_shortcode('gallery');
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:
add_theme_support('bootstrap-gallery');
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);
break;
case 'none':
$image = wp_get_attachment_image($id, $size, false, $thumbclass);
break;
default:
$image = wp_get_attachment_link($id, $size, true, false, null, $thumbclass);
break;
}
because should not that class belong on the image, not on the wrapper, in BS4?
Sorry to revive this old post, but it still seems fairly relevant.
Is there any advice on how / where to put this code in the most recent version of Sage 9? the directory structure (e.g. src, lib) has changed since, and I havn’t been able to get any of my attempts to work.
UPDATE:
I got it to work, although I’m not sure if everything is in it’s “ideal place”.
// app/helpers.php
...
/**
* Clean up gallery_shortcode()
*
* Re-create the [gallery] shortcode and use thumbnails styling from Bootstrap
* The number of columns must be a factor of 12.
*
* @link http://getbootstrap.com/components/#thumbnails
*/
function gallery($attr)
{
$post = get_post();
static $instance = 0;
$instance++;
if (!empty($attr['ids'])) {
if (empty($attr['orderby'])) {
$attr['orderby'] = 'post__in';
}
$attr['include'] = $attr['ids'];
}
$output = apply_filters('post_gallery', '', $attr);
if ($output != '') {
return $output;
}
if (isset($attr['orderby'])) {
$attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
if (!$attr['orderby']) {
unset($attr['orderby']);
}
}
extract(shortcode_atts([
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => '',
'icontag' => '',
'captiontag' => '',
'columns' => 3,
'size' => 'thumbnail',
'include' => '',
'exclude' => '',
'link' => ''
], $attr));
$id = intval($id);
$columns = (12 % $columns == 0) ? $columns : 3;
$grid = sprintf('col-sm-%1$s col-lg-%1$s', 12 / $columns);
if ($order === 'RAND') {
$orderby = 'none';
}
if (!empty($include)) {
$_attachments = get_posts(['include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby]);
$attachments = [];
foreach ($_attachments as $key => $val) {
$attachments[$val->ID] = $_attachments[$key];
}
} elseif (!empty($exclude)) {
$attachments = get_children(['post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby]);
} else {
$attachments = get_children(['post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby]);
}
if (empty($attachments)) {
return '';
}
if (is_feed()) {
$output = "\n";
foreach ($attachments as $att_id => $attachment) {
$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
}
return $output;
}
$unique = (get_query_var('page')) ? $instance . '-p' . get_query_var('page') : $instance;
$output = '<div class="gallery gallery-' . $id . '-' . $unique . '">';
$i = 0;
$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);
break;
case 'none':
$image = wp_get_attachment_image($id, $size, false, $thumbclass);
break;
default:
$image = wp_get_attachment_link($id, $size, true, false, null, $thumbclass);
break;
}
$output .= ($i % $columns == 0) ? '<div class="row gallery-row">' : '';
$output .= '<div class="' . $grid . '">' . $image;
if (trim($attachment->post_excerpt)) {
$output .= '<div class="caption hidden">' . wptexturize($attachment->post_excerpt) . '</div>';
}
$output .= '</div>';
$i++;
$output .= ($i % $columns == 0) ? '</div>' : '';
}
$output .= ($i % $columns != 0) ? '</div>' : '';
$output .= '</div>';
return $output;
}
remove_shortcode('gallery');
add_shortcode('gallery', __NAMESPACE__ . '\\gallery');
add_filter('use_default_gallery_style', '__return_null');
// app/setup.php
add_action('after_setup_theme', function () {
...
// Add bootstrap gallery support
add_theme_support('bootstrap-gallery');
...