[gallery] shortcode is not working

i confirm there’s a problem with the function bootstrap_wp_gallery in understrap/inc/bootstrap-wp-gallery.php

the resulting gallery picks all post’s images, rather than just the selected ones.
it does work only by placing the wrong images’ IDs into the exclude=”…” argument – but i think that’s more a legacy support, and in any case it shouldn’t be the user to define that.

also, looking at the lastest WP gallery shortcode, it seems to be using ids=”…” rather than include=”…” as argument for the list of gallery items IDs – maybe that’s the/part of the issue?

for the time being, i’ve resorted to remove function bootstrap_wp_gallery in my child theme:

– in functions.php

function after_setup_custom_theme() {
	//Remove UNDERSTRAP /inc/bootstrap-wp-gallery.php filter
    remove_filter('post_gallery', 'bootstrap_wp_gallery', 10);
}
add_action( 'after_setup_theme', 'after_setup_custom_theme' );

then i’ve used Logoscreative’s post to style WP gallery with html5 support:

– in functions.php:
add_theme_support( 'html5', array( 'gallery', 'caption' ) );

– in my custom understrap-child/css/custom.css file (can go in understrap-child/css/child-theme.css if you use it)

.gallery {
  margin: auto;
}
.gallery .gallery-item {
  float: left;
  margin-top: 10px;
  text-align: center;
}
.gallery img {
  border: 2px solid #cfcfcf;
}
.gallery .gallery-caption {
  margin-left: 0;
}

– in my custom understrap-child/js/custom.js file (an go in understrap-child/js/child-theme.js if you use it)

<script>
// Cache the Gallery element
var gallery = jQuery('.gallery');
if ( gallery.length > 0 ) {
  // Find the WordPress class that tells us how many columns to use
  var columns = jQuery.grep(gallery.attr('class').split(' '), function(v, i) {
      return v.indexOf('gallery-columns') === 0;
  }).join();
  // Get the number out of the class and calculate the width
  gallery.find('.gallery-item').width( 100/parseInt(columns.replace('gallery-columns-', '')) + '%' );
}
</script>

but it’d be nice if the issue could be sorted with BS4

you may want to add some more css to clear the floats of the gallery items:

.gallery:after {
  content: "";
  display: table;
  clear: both;
}

Hi! Thx for your feedback.
I removed the bs gallery, pull in the basic styling from Underscores theme and add your clearing class in pre release 0.5.1: https://github.com/holger1411/understrap

If you want to download and update your UnderStrap theme manually from 0.5.0 to 0.5.1 download the pre-release here:
https://github.com/holger1411/understrap/releases/tag/0.5.1

Its a quick fix just for now.
I′am searching for a clean way to incorporate BS4 markup into the gallery shortcode, but wasn′t able to do this till now.
If you have any ideas feel free to contribute it here:https://github.com/holger1411/understrap

great, thanks Holger!

it looks like the BS4 grid rendering for the gallery is correct, i believe the problem lays with the image IDs handling (i may be wrong, but the latest [gallery] shortcode refers to them with the ids=”…” parameter rather than the old include=”…” one).

sorry i can’t be of more help, but if i come across something useful i’ll let you know.

Hi,

I kinda solved this, it’s a little hacky but uses bootstrap. I actually wanted a carousel rather than thumbs but this is what i have. It seems a few attributes were missing from the shortcode_atts array.

<?php
//Based on Jeff Hays code and his article here: https://robido.com/wordpress/wordpress-gallery-filter-to-modify-the-html-output-of-the-default-gallery-shortcode-and-style/ 
// Custom filter function to modify default gallery shortcode output
// Adapted by Greg Conn of Live Breathe Digital to output a bootstrap carousel.
function bootstrap_wp_gallery( $output, $attr ) {

	// Initialize
	global $post, $wp_locale;

	// Gallery instance counter
	static $instance = 0;
	$instance++;

	// Validate the author's orderby attribute
	if ( isset( $attr['orderby'] ) ) {
		$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
		if ( ! $attr['orderby'] ) unset( $attr['orderby'] );
	}

	// Get attributes from shortcode
	extract( shortcode_atts( array(
		'order'      => 'ASC',
		'orderby'    => 'menu_order ID',
		'id'         => $post->ID,
		'itemtag'    => 'div',
		'icontag'    => 'div',
		'captiontag' => 'div',
		'columns'    => 3,
		'size'       => 'thumbnail',
		'exclude'    => '',
		'include'    => '',
		'ids'        => ''
	), $attr ) );

	// Initialize
	$id = intval( $id );
	$attachments = array();
	if ( $order == 'RAND' ) $orderby = 'none';

	if ( ! empty( $include ) ) {

		// Include attribute is present
		$include = preg_replace( '/[^0-9,]+/', '', $include );
		$_attachments = get_posts( array( 'include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby ) );

		// Setup attachments array
		foreach ( $_attachments as $key => $val ) {
			$attachments[ $val->ID ] = $_attachments[ $key ];
		}

	} else if ( ! empty( $exclude ) ) {

		// Exclude attribute is present 
		$exclude = preg_replace( '/[^0-9,]+/', '', $exclude );

		// Setup attachments array
		$attachments = get_children( array( 'post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby ) );
	} else {
		// Setup attachments array
		$attachments = get_children( array( 'post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby ) );
	}

	if ( empty( $attachments ) ) return '';

	// Filter gallery differently for feeds
	if ( is_feed() ) {
		$output = "\n";
		foreach ( $attachments as $att_id => $attachment ) $output .= wp_get_attachment_link( $att_id, $size, true ) . "\n";
		return $output;
	}

	// Filter tags and attributes
	$itemtag = tag_escape( $itemtag );
	$captiontag = tag_escape( $captiontag );
	$columns = intval( $columns );
	$itemwidth = $columns > 0 ? floor( 12 / $columns ) : 100;
	$float = is_rtl() ? 'right' : 'left';
	$selector = "gallery-{$instance}";

 // Filter gallery CSS
 //<div id='$selector' class='gallery galleryid-{$id} row'>"
	$output = apply_filters( 'gallery_style', "		
	 
    <div id='gallery-carousel' class='carousel slide galleryid-{$id}' data-ride='carousel'>
      <div class='carousel-inner' role='listbox' data-link='".isset( $attr['link'] ) ."' data-file='".$attr['link']."'>"
	);
	
	
  
	// Iterate through the attachments in this gallery instance
	$i = 0;
	foreach ( $attachments as $id => $attachment ) {

		// Attachment link
		$link = isset( $attr['link'] ) && 'file' == $attr['link'] ? wp_get_attachment_link( $id, $size, false, false, false, array('class'=>'carousel-image') ) : wp_get_attachment_link( $id, $size, true, false, false, array('class'=>'carousel-image') ); 

    if(!isset($attr) || (isset( $attr['link'] ) && 'none' == $attr['link'])) {
      $link = wp_get_attachment_image( $id, $size, false, array('class'=>'carousel-image') );
    }
    

		// Start itemtag
		$active = ($i==0 ? 'active' :'');
		$output .= "<{$itemtag} class='carousel-item {$active}'>";

		// icontag
		$output .= "
		
			$link
		";

		if ( $captiontag && trim( $attachment->post_excerpt ) ) {

			// captiontag
			$output .= "
			<{$captiontag} class='carousel-caption'>
				" . wptexturize($attachment->post_excerpt) . "
			</{$captiontag}>";

		}

		// End itemtag
		$output .= "</{$itemtag}>";

		// Line breaks by columns set
		//if($columns > 0 && ++$i % $columns == 0) $output .= '<br style="clear: both">';
    ++$i;
	}

	// End gallery output
	$output .= "
		<a class='left carousel-control' href='#gallery-carousel' role='button' data-slide='prev'>
    <span class='fa fa-angle-left' aria-hidden='true'></span>
    <span class='sr-only'>Previous</span>
  </a>
  <a class='right carousel-control' href='#gallery-carousel' role='button' data-slide='next'>
    <span class='fa fa-angle-right' aria-hidden='true'></span>
    <span class='sr-only'>Next</span>
  </a>
	</div></div>\n";

	return $output;

}

// Apply filter to default gallery shortcode
add_filter( 'post_gallery', 'bootstrap_wp_gallery', 10, 2 );

the gallery include is now removed, but understrap child-theme.css has code that keeps the default gallery-item in columns on all screen sizes.
i used this dirty hack in my custom.css to keep columns over a certain screen size.

/* RESET UNDERSTRAP GALLERY CSS */
 .gallery-item {
    width: 100% !important;
    max-width: 100% !important; }
@media screen and (min-width:768px) {
  .gallery-columns-2 .gallery-item {
    max-width: 50% !important; }
  .gallery-columns-3 .gallery-item {
    max-width: 33.33% !important; }
  .gallery-columns-4 .gallery-item {
    max-width: 25% !important; }
  .gallery-columns-5 .gallery-item {
    max-width: 20% !important; }
  .gallery-columns-6 .gallery-item {
    max-width: 16.66% !important; }
  .gallery-columns-7 .gallery-item {
    max-width: 14.28% !important; }
  .gallery-columns-8 .gallery-item {
    max-width: 12.5% !important; }
  .gallery-columns-9 .gallery-item {
    max-width: 11.11% !important; }
}

Hi!

Please make sure you use the latest UnderStrap verion as dependency in your package.json.

Check for:
“understrap”: “^0.5.0”

If the version number is lower change it to that above and run:
“npm install”
“gulp copy-assets”
and than:
“gulp scss-for-prod”
in your terminal

Or you download all the SASS files from the child theme repo here:
https://github.com/holger1411/understrap-child
and recompile your sass

The basic gallery CSS from Underscores was added to the SASS stack in 0.5.0.
If you update and rebuild it you should have some basic styling by default

sorry Holger, i was wrong, i still had child-theme.min.css from understrap-child 0.1.5

no problem!

Thank you, @maxgx & @holger1411.

• This reply was modified 8 years, 3 months ago by gray444.