Custom gallery format for WordPress (using Bootstrap v4 grid).

custom-gallery-format-for-wordpress.md

Custom gallery format (using Bootstrap v4 grid)

• Original function by: bitWorking
• Modified by: TMMC
• Further modified by Shansmith01
• StackOverflow question URL: https://stackoverflow.com/a/35776752

Usage

Place the custom-gallery-markup.php file wherever you like in your theme directory. For sake of this example it is inc directory.

In your functions.php file add those lines:

require_once('inc/custom-gallery-format.php'); // change the path to match the location if needed
add_filter('post_gallery', 'custom_gallery_grid', 10, 3);

Fixed/added 'missing' features

1. Generating thumbnail size set by user via WordPress gallery panel.

• Using full size image was waste of bandwidth.
• If original images were not same size gallery might appear not fine.
• The CMS user might be confused if he/she set specific thumbnail size and gallery would show different size/proportions.

2. Generating thumbnail alt attribute set by user via WordPress gallery panel.
3. Make thumbnails linking (set via WordPress gallery panel) work correctly (none, attachment page, file) to maintain functionality of the panel and not to confuse the CMS user.
4. Generating id for each gallery block based on $instance.

Minor changes for bootsrap 4

1. change img-responsive to img-fluid
2. Thumbnail captions with figcaption.

Minor changes

• Renamed function bootstrap_gallery to custom_gallery_grid so anyone can adapt it to any other framework without the name beeing misleading.
• Changed the name of $atts parameter to $attrs.
• Removed redutant $key from foreach loop.
• Changed the name of $value variable to $imageID in foreach loop.
• Added wrapper section.gallery around all div.rows and removed .gallery class from each .rows.
• Changed default column class from .col-md-X to .col-sm-X.
• Added function custom_gallery_item for generating single gallery item.
• Changed if-else to switch for columns + added 4 and 6 columns layout (5, 7, 8 and 9 fall back to 3).
• Changed name of the variable $return to $gallery.
• Changed single item from div to figure.
• Changed size of displayed file to large insted of full.
• Added ability to give thumbnail link more attributes.
• Added comments.

TODO

• Gallery layout for 5, 7, 8 and 9 columns (maybe with .col-sm-offset-X?).
• Title attribute for gallery links maybe?

custom-gallery-format.php

<?php
/**
 * Custom gallery format (using Bootstrap v.4 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
 * Modified by Shansith01
 * More details on StackOverflow: https://stackoverflow.com/a/45057819/2103923
 */

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

  $attrs = array_merge(array('columns' => 3), $attrs);
  // echo '<pre>' . print_r($attrs, true) . '</pre>'; // Check 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`.
  $galleryID = ($instance < 10) ? 'gallery-0' . $instance : 'gallery-' . $instance;
  $gallery = '
  <section class="gallery" id="' . $galleryID . '">
    <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);
    $galleryThumbCap = get_post($imageID)->post_excerpt;

    // 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) .
    '<figcaption class="wp-caption-text gallery-caption" id="' . $galleryID .'">' . $galleryThumbCap . ' </figcaption>

    </figure>' 
    ;

  }

  // 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-fluid" />';
   

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

  return $galleryItem;
}

This is awesome, thank you very much Shannon.