shansmith01 · October 13, 2019 14:42 · Aug 29, 2017 · Aug 29, 2017 · Aug 28, 2017 · Aug 28, 2017
diff --git a/custom-gallery-format-for-wordpress.md b/custom-gallery-format-for-wordpress.md
@@ -26,6 +26,7 @@ add_filter('post_gallery', 'custom_gallery_grid', 10, 3);
 
 ## 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.
@@ -43,6 +44,5 @@ add_filter('post_gallery', 'custom_gallery_grid', 10, 3);
 * Added comments.
 
 ## TODO
-* Thumbnail captions with `figcaption`.
 * Gallery layout for 5, 7, 8 and 9 columns (maybe with `.col-sm-offset-X`?).
 * Title attribute for gallery links maybe?
diff --git a/custom-gallery-format.php b/custom-gallery-format.php
@@ -36,6 +36,7 @@ function custom_gallery_grid($output = '', $attrs, $instance) {
     case 6:
       $col_class = 'col-sm-2';
       break;
+
     default:
       $col_class = 'col-sm-4';
       break;
@@ -61,6 +62,7 @@ function custom_gallery_grid($output = '', $attrs, $instance) {
     // 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']) {
@@ -91,9 +93,11 @@ function custom_gallery_grid($output = '', $attrs, $instance) {
     $gallery .= '
     <figure class="'.$col_class.'">' .
       custom_gallery_item($galleryThumbSrc[0], $galleryThumbAlt, $galleryThumbLinkAttrs) .
-    '</figure>';
+    '<figcaption class="wp-caption-text gallery-caption" id="' . $galleryID .'">' . $galleryThumbCap . ' </figcaption>
+
+    </figure>' 
+    ;
 
-    $i++;
   }
 
   // Closing last gallery `row` and whole `gallery` block.
@@ -106,6 +110,7 @@ function custom_gallery_grid($output = '', $attrs, $instance) {
 // 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 = '';

diff --git a/custom-gallery-format-for-wordpress.md b/custom-gallery-format-for-wordpress.md
@@ -25,6 +25,7 @@ add_filter('post_gallery', 'custom_gallery_grid', 10, 3);
 4. Generating `id` for each gallery block based on `$instance`.
 
 ## Minor changes for bootsrap 4
+1. change img-responsive to img-fluid
 
 ## Minor changes
 * Renamed function `bootstrap_gallery` to `custom_gallery_grid` so anyone can adapt it to any other framework without the name beeing misleading.

diff --git a/custom-gallery-format.php b/custom-gallery-format.php
@@ -1,10 +1,11 @@
 <?php
 /**
- * Custom gallery format (using Bootstrap v.3 grid)
+ * 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
  */
 

diff --git a/custom-gallery-format-for-wordpress.md b/custom-gallery-format-for-wordpress.md
@@ -1,7 +1,8 @@
-# Custom gallery format (using Bootstrap v3 grid)
+# 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
@@ -23,6 +24,8 @@ add_filter('post_gallery', 'custom_gallery_grid', 10, 3);
 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
+
 ## 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`.

diff --git a/custom-gallery-format.php b/custom-gallery-format.php
@@ -104,7 +104,7 @@ function custom_gallery_grid($output = '', $attrs, $instance) {
 
 // Helper function: DRY while generating gallery items.
 function custom_gallery_item($itemImgSrc, $itemImgAlt = '', $itemLinkAttrs = false) {
-  $galleryItem = '<img src="' . $itemImgSrc . '" alt="' . $itemImgAlt . '" class="img-responsive" />';
+  $galleryItem = '<img src="' . $itemImgSrc . '" alt="' . $itemImgAlt . '" class="img-fluid" />';
 
   if ($itemLinkAttrs) {
     $linkAttrs = '';

diff --git a/custom-gallery-format-for-wordpress.md b/custom-gallery-format-for-wordpress.md
@@ -21,6 +21,7 @@ add_filter('post_gallery', 'custom_gallery_grid', 10, 3);
   * 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
 * Renamed function `bootstrap_gallery` to `custom_gallery_grid` so anyone can adapt it to any other framework without the name beeing misleading.

diff --git a/custom-gallery-format.php b/custom-gallery-format.php
@@ -45,8 +45,9 @@ function custom_gallery_grid($output = '', $attrs, $instance) {
   $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">
+  <section class="gallery" id="' . $galleryID . '">
     <div class="row">';
 
   $i = 0; // Counter for the loop.

diff --git a/custom-gallery-format.php b/custom-gallery-format.php
@@ -86,12 +86,12 @@ function custom_gallery_grid($output = '', $attrs, $instance) {
         break;
     }
 
-      $gallery .= '
-      <figure class="'.$col_class.'">' .
-        custom_gallery_item($galleryThumbSrc[0], $galleryThumbAlt, $galleryThumbLinkAttrs) .
-      '</figure>';
+    $gallery .= '
+    <figure class="'.$col_class.'">' .
+      custom_gallery_item($galleryThumbSrc[0], $galleryThumbAlt, $galleryThumbLinkAttrs) .
+    '</figure>';
 
-      $i++;
+    $i++;
   }
 
   // Closing last gallery `row` and whole `gallery` block.
@@ -102,7 +102,7 @@ function custom_gallery_grid($output = '', $attrs, $instance) {
 }
 
 // Helper function: DRY while generating gallery items.
-function startertheme_gallery_item($itemImgSrc, $itemImgAlt = '', $itemLinkAttrs = false) {
+function custom_gallery_item($itemImgSrc, $itemImgAlt = '', $itemLinkAttrs = false) {
   $galleryItem = '<img src="' . $itemImgSrc . '" alt="' . $itemImgAlt . '" class="img-responsive" />';
 
   if ($itemLinkAttrs) {

diff --git a/custom-gallery-format.php b/custom-gallery-format.php
@@ -108,7 +108,7 @@ function startertheme_gallery_item($itemImgSrc, $itemImgAlt = '', $itemLinkAttrs
   if ($itemLinkAttrs) {
     $linkAttrs = '';
     foreach ($itemLinkAttrs as $attrName => $attrVal) {
-      $linkAttrs .= ' ' . $attrName . '=' . $attrVal;
+      $linkAttrs .= ' ' . $attrName . '="' . $attrVal . '"';
     }
     $galleryItem = '<a' . $linkAttrs . '>' . $galleryItem . '</a>';
   }

diff --git a/custom-gallery-format.php b/custom-gallery-format.php
@@ -102,15 +102,15 @@ function custom_gallery_grid($output = '', $attrs, $instance) {
 }
 
 // Helper function: DRY while generating gallery items.
-function custom_gallery_item($itemImgSrc, $itemImgAlt = '', $itemLinkAttrs = false) {
+function startertheme_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 . ' ';
+      $linkAttrs .= ' ' . $attrName . '=' . $attrVal;
     }
-    $galleryItem = '<a ' . $linkAttrs . '>' . $galleryItem . '</a>';
+    $galleryItem = '<a' . $linkAttrs . '>' . $galleryItem . '</a>';
   }
 
   return $galleryItem;

diff --git a/custom-gallery-format.php b/custom-gallery-format.php
@@ -11,7 +11,7 @@
 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.
+  // echo '<pre>' . print_r($attrs, true) . '</pre>'; // Check what is inside the array.
 
   $columns = $attrs['columns'];
   $images = explode(',', $attrs['ids']);

diff --git a/custom-gallery-format-for-wordpress.md b/custom-gallery-format-for-wordpress.md
@@ -1,8 +1,8 @@
 # Custom gallery format (using Bootstrap v3 grid)
 
 * Original function by: [bitWorking](https://stackoverflow.com/users/1948627/bitworking)
-* StackOverflow question URL: https://stackoverflow.com/a/35776752
 * Modified by: [TMMC](https://stackoverflow.com/users/2103923/tmmc)
+* StackOverflow question URL: https://stackoverflow.com/a/35776752
 
 ## Usage
 Place the `custom-gallery-markup.php` file wherever you like in your theme directory.

diff --git a/custom-gallery-format.php b/custom-gallery-format.php
@@ -1,10 +1,11 @@
 <?php
 /**
- * Custom gallery format (using Bootstrap grid)
+ * Custom gallery format (using Bootstrap v.3 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
+ * More details on StackOverflow: https://stackoverflow.com/a/45057819/2103923
  */
 
 function custom_gallery_grid($output = '', $attrs, $instance) {
@@ -100,7 +101,7 @@ function custom_gallery_grid($output = '', $attrs, $instance) {
   return $gallery;
 }
 
-// Helper function: DRY while generating gallery items
+// Helper function: DRY while generating gallery items.
 function custom_gallery_item($itemImgSrc, $itemImgAlt = '', $itemLinkAttrs = false) {
   $galleryItem = '<img src="' . $itemImgSrc . '" alt="' . $itemImgAlt . '" class="img-responsive" />';
 

diff --git a/custom-gallery-format-for-wordpress.md b/custom-gallery-format-for-wordpress.md
@@ -2,7 +2,7 @@
 
 * Original function by: [bitWorking](https://stackoverflow.com/users/1948627/bitworking)
 * StackOverflow question URL: https://stackoverflow.com/a/35776752
-* Modified by: [tmmc](https://stackoverflow.com/users/2103923/tmmc)
+* Modified by: [TMMC](https://stackoverflow.com/users/2103923/tmmc)
 
 ## Usage
 Place the `custom-gallery-markup.php` file wherever you like in your theme directory.

diff --git a/custom-gallery-format-for-wordpress.md b/custom-gallery-format-for-wordpress.md
@@ -1,6 +1,6 @@
 # Custom gallery format (using Bootstrap v3 grid)
 
-* Original function by: [bitworking](https://stackoverflow.com/users/1948627/bitworking)
+* Original function by: [bitWorking](https://stackoverflow.com/users/1948627/bitworking)
 * StackOverflow question URL: https://stackoverflow.com/a/35776752
 * Modified by: [tmmc](https://stackoverflow.com/users/2103923/tmmc)
 

diff --git a/custom-gallery-format-for-wordpress.md b/custom-gallery-format-for-wordpress.md
@@ -20,7 +20,7 @@ add_filter('post_gallery', 'custom_gallery_grid', 10, 3);
   * 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).
+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.
 
 ## Minor changes
 * Renamed function `bootstrap_gallery` to `custom_gallery_grid` so anyone can adapt it to any other framework without the name beeing misleading.

diff --git a/wordpress-custom-gallery-format.md → custom-gallery-format-for-wordpress.md b/wordpress-custom-gallery-format.md → custom-gallery-format-for-wordpress.md
diff --git a/WordpressCustomGalleryFormat.md → wordpress-custom-gallery-format.md b/WordpressCustomGalleryFormat.md → wordpress-custom-gallery-format.md
diff --git a/ReadMe.md → WordpressCustomGalleryFormat.md b/ReadMe.md → WordpressCustomGalleryFormat.md
diff --git a/ReadMe.md b/ReadMe.md
@@ -0,0 +1,43 @@
+# Custom gallery format (using Bootstrap v3 grid)
+
+* Original function by: [bitworking](https://stackoverflow.com/users/1948627/bitworking)
+* StackOverflow question URL: https://stackoverflow.com/a/35776752
+* Modified by: [tmmc](https://stackoverflow.com/users/2103923/tmmc)
+
+## 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).
+
+## 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
+* Thumbnail captions with `figcaption`.
+* Gallery layout for 5, 7, 8 and 9 columns (maybe with `.col-sm-offset-X`?).
+* Title attribute for gallery links maybe?
diff --git a/custom-gallery-format.php b/custom-gallery-format.php
@@ -0,0 +1,116 @@
+<?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