markdown WordPress的自定义图库格式（使用Bootstrap v4网格）。

Posted 2021-05-05

<?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;
}

# Custom gallery format (using Bootstrap v4 grid)

* Original function by: [bitWorking](https://stackoverflow.com/users/1948627/bitworking)
* Modified by: [TMMC](https://stackoverflow.com/users/2103923/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.row`s and removed `.gallery` class from each `.row`s.
* 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?