Forked from TMMC/custom-gallery-format-for-wordpress.md
Last active
October 13, 2019 14:42
-
-
Save shansmith01/1360e94566e0cb4465a2a377b877016b to your computer and use it in GitHub Desktop.
Custom gallery format for WordPress (using Bootstrap v4 grid).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is awesome, thank you very much Shannon.