shansmith01 · October 13, 2019 14:42 · davidrslopes · Feb 17, 2018
diff --git a/custom-gallery-format.php b/custom-gallery-format.php
 <?php
 /**
 * Custom gallery format (using Bootstrap grid)
 *
 * Original function by: https://stackoverflow.com/users/1948627/bitworking
 * StackOverflow question URL: https://stackoverflow.com/a/35776752
 * Modified by: https://stackoverflow.com/users/2103923/tmmc
 */

 function custom_gallery_grid($output = '', $attrs, $instance) {

  $attrs = array_merge(array('columns' => 3), $attrs);
  // echo '<pre>' . print_r($attrs, true) . '</pre>'; # See what is inside the array.

  $columns = $attrs['columns'];
  $images = explode(',', $attrs['ids']);

  // Other columns options in WordPress gallery (5,7,8,9)
  // are not suitable for default Bootstrap 12 columns grid
  // so they take the default value `col-sm-4`.
  switch($columns) {
    case 1:
      $col_class = 'col-sm-12';
      break;
    case 2:
      $col_class = 'col-sm-6';
      break;
    // case 3: # Default
    //   $col_class = 'col-sm-4';
    //   break;
    case 4:
      $col_class = 'col-sm-3';
      break;
    case 6:
      $col_class = 'col-sm-2';
      break;
    default:
      $col_class = 'col-sm-4';
      break;
  }

  // Gallery thumnbnail size (set via WordPress gallery panel).
  // Defaults to `thumbnail` size.
  $galleryThumbSize = ($attrs['size']) ? $attrs['size'] : 'thumbnail';

  // Starting `gallery` block and first gallery `row`.
  $gallery = '
  <section class="gallery">
    <div class="row">';

  $i = 0; // Counter for the loop.
  foreach ($images as $imageID) {

    if ($i%$columns == 0 && $i > 0) { // Closing previous `row` and startin the next one.
      $gallery .= '</div><div class="row">';
    }

    // Thumbnail `src` and `alt` attributes.
    $galleryThumbSrc = wp_get_attachment_image_src($imageID, $galleryThumbSize);
    $galleryThumbAlt = get_post_meta($imageID, '_wp_attachment_image_alt', true);

    // Determine where to the gallery thumbnail is linking (set via WordPress gallery panel).
    switch($attrs['link']) {
      case 'file':
        $galleryThumbLinkImg   = wp_get_attachment_image_src($imageID, 'large'); // Take the `full` or `large` image url.
        $galleryThumbLinkAttrs = array( // More attributes can be added, only `href` is required.
          'href'         => $galleryThumbLinkImg[0], // Link to original image file.
          'data-gallery' => 'gallery', // Set some data-attribute if it is needed.
          'target'       => '_blank',  // Set target to open in new tab/window.
          // 'title'        => '',
          // 'class'        => '',
          // 'id'           => ''
        );
        break;
      case 'none':
        $galleryThumbLinkAttrs = false;
        break;
      default: // By default there is no `link` and the thumb is linking to attachment page.
        $galleryThumbLinkAttrs = array( // More attributes can be added, only `href` is required.
          'href'  => get_attachment_link($imageID), // Link to image file attachment page.
          // 'title' => '',
          // 'class' => '',
          // 'id'    => ''
        );
        break;
    }

      $gallery .= '
      <figure class="'.$col_class.'">' .
        custom_gallery_item($galleryThumbSrc[0], $galleryThumbAlt, $galleryThumbLinkAttrs) .
      '</figure>';

      $i++;
  }

  // Closing last gallery `row` and whole `gallery` block.
  $gallery .= '
    </div>
  </section>';
  return $gallery;
 }

 // Helper function: DRY while generating gallery items
 function custom_gallery_item($itemImgSrc, $itemImgAlt = '', $itemLinkAttrs = false) {
  $galleryItem = '<img src="' . $itemImgSrc . '" alt="' . $itemImgAlt . '" class="img-responsive" />';

  if ($itemLinkAttrs) {
    $linkAttrs = '';
    foreach ($itemLinkAttrs as $attrName => $attrVal) {
      $linkAttrs .= $attrName . '=' . $attrVal . ' ';
    }
    $galleryItem = '<a ' . $linkAttrs . '>' . $galleryItem . '</a>';
  }

  return $galleryItem;
 }
diff --git a/WordpressCustomGalleryFormat.md b/WordpressCustomGalleryFormat.md
	<?php
	/**
	* Custom gallery format (using Bootstrap grid)
	*
	* Original function by: https://stackoverflow.com/users/1948627/bitworking
	* StackOverflow question URL: https://stackoverflow.com/a/35776752
	* Modified by: https://stackoverflow.com/users/2103923/tmmc
	*/

	function custom_gallery_grid($output = '', $attrs, $instance) {

	$attrs = array_merge(array('columns' => 3), $attrs);
	// echo '<pre>' . print_r($attrs, true) . '</pre>'; # See what is inside the array.

	$columns = $attrs['columns'];
	$images = explode(',', $attrs['ids']);

	// Other columns options in WordPress gallery (5,7,8,9)
	// are not suitable for default Bootstrap 12 columns grid
	// so they take the default value `col-sm-4`.
	switch($columns) {
	case 1:
	$col_class = 'col-sm-12';
	break;
	case 2:
	$col_class = 'col-sm-6';
	break;
	// case 3: # Default
	// $col_class = 'col-sm-4';
	// break;
	case 4:
	$col_class = 'col-sm-3';
	break;
	case 6:
	$col_class = 'col-sm-2';
	break;
	default:
	$col_class = 'col-sm-4';
	break;
	}

	// Gallery thumnbnail size (set via WordPress gallery panel).
	// Defaults to `thumbnail` size.
	$galleryThumbSize = ($attrs['size']) ? $attrs['size'] : 'thumbnail';

	// Starting `gallery` block and first gallery `row`.
	$gallery = '
	<section class="gallery">
	<div class="row">';

	$i = 0; // Counter for the loop.
	foreach ($images as $imageID) {

	if ($i%$columns == 0 && $i > 0) { // Closing previous `row` and startin the next one.
	$gallery .= '</div><div class="row">';
	}

	// Thumbnail `src` and `alt` attributes.
	$galleryThumbSrc = wp_get_attachment_image_src($imageID, $galleryThumbSize);
	$galleryThumbAlt = get_post_meta($imageID, '_wp_attachment_image_alt', true);

	// Determine where to the gallery thumbnail is linking (set via WordPress gallery panel).
	switch($attrs['link']) {
	case 'file':
	$galleryThumbLinkImg = wp_get_attachment_image_src($imageID, 'large'); // Take the `full` or `large` image url.
	$galleryThumbLinkAttrs = array( // More attributes can be added, only `href` is required.
	'href' => $galleryThumbLinkImg[0], // Link to original image file.
	'data-gallery' => 'gallery', // Set some data-attribute if it is needed.
	'target' => '_blank', // Set target to open in new tab/window.
	// 'title' => '',
	// 'class' => '',
	// 'id' => ''
	);
	break;
	case 'none':
	$galleryThumbLinkAttrs = false;
	break;
	default: // By default there is no `link` and the thumb is linking to attachment page.
	$galleryThumbLinkAttrs = array( // More attributes can be added, only `href` is required.
	'href' => get_attachment_link($imageID), // Link to image file attachment page.
	// 'title' => '',
	// 'class' => '',
	// 'id' => ''
	);
	break;
	}

	$gallery .= '
	<figure class="'.$col_class.'">' .
	custom_gallery_item($galleryThumbSrc[0], $galleryThumbAlt, $galleryThumbLinkAttrs) .
	'</figure>';

	$i++;
	}

	// Closing last gallery `row` and whole `gallery` block.
	$gallery .= '
	</div>
	</section>';
	return $gallery;
	}

	// Helper function: DRY while generating gallery items
	function custom_gallery_item($itemImgSrc, $itemImgAlt = '', $itemLinkAttrs = false) {
	$galleryItem = '<img src="' . $itemImgSrc . '" alt="' . $itemImgAlt . '" class="img-responsive" />';

	if ($itemLinkAttrs) {
	$linkAttrs = '';
	foreach ($itemLinkAttrs as $attrName => $attrVal) {
	$linkAttrs .= $attrName . '=' . $attrVal . ' ';
	}
	$galleryItem = '<a ' . $linkAttrs . '>' . $galleryItem . '</a>';
	}

	return $galleryItem;
	}
No results found