Update Wordpress custom gallery with Foundation Block Grids markup

olefredrik · Apr 2, 2018 · f95251c · f95251c
1 parent 4a91d2e
commit f95251c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 27 deletions.
diff --git a/library/foundation.php b/library/foundation.php
@@ -217,16 +217,18 @@ function foundationpress_gallery($attr) {
 		}
 
 		$atts = shortcode_atts(array(
-			'order'      => 'ASC',
-			'orderby'    => 'menu_order ID',
-			'id'         => $post ? $post->ID : 0,
-			'itemtag'    => 'figure',
-			'icontag'    => 'div',
-			'captiontag' => 'figcaption',
-			'columns'    => 3,
-			'size'       => 'thumbnail',
-			'include'    => '',
-			'exclude'    => ''
+			'order'         => 'ASC',
+			'orderby'       => 'menu_order ID',
+			'id'            => $post ? $post->ID : 0,
+			'itemtag'       => 'figure',
+			'icontag'       => 'div',
+			'captiontag'    => 'figcaption',
+			'columns-small' => 2, // set default columns for small screen
+			'columns-medium'=> 4, // set default columns for medium screen
+			'columns'       => 3, // set default columns for large screen (3 = wordpress default)
+			'size'          => 'thumbnail',
+			'include'       => '',
+			'exclude'       => ''
 		), $attr, 'gallery');
 
 		$id = intval($atts['id']);
@@ -267,38 +269,42 @@ function foundationpress_gallery($attr) {
 			$icon_tag = 'div';
 
 		$columns = intval($atts['columns']);
+		$columns_small = intval($atts['columns-small']);
+		$columns_medium = intval($atts['columns-medium']);
 		$selector = "gallery-{$instance}";
 		$size_class = sanitize_html_class( $atts['size'] );
 
-		$output = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";
+		// Edit this line to modify the default number of grid columns for the small and medium sizes. The large size is passed in the WordPress gallery settings.
+		$output = "<div id='$selector' class='fp-gallery galleryid-{$id} gallery-size-{$size_class} grid-x grid-margin-x small-up-{$columns_small} medium-up-{$columns_medium} large-up-{$columns}'>";
 
 		foreach ( $attachments as $id => $attachment ) {
 
-			// Check if destination is file, post or nothing
+			// Check if destination is file, nothing or attachment page.
 			if ( isset($attr['link']) && $attr['link'] == 'file' ){
-				$link = wp_get_attachment_link($id, $size_class, false, false, false,array('class' => '', 'image-id-'.$id));
+				$link = wp_get_attachment_link($id, $size_class, false, false, false,array('class' => '', 'id' => "imageid-$id"));
 
-				// Edit this line to implement your html params in <a> tag for use custom lightbox plugin
-				$link = str_replace('<a href', '<a class="fp-gallery-lightbox" data-gall="fp-gallery-'. $post->ID .'" data-title="'. wptexturize($attachment->post_excerpt) .'" title="'. wptexturize($attachment->post_excerpt) .'" href', $link);
+				// Edit this line to implement your html params in <a> tag with use a custom lightbox plugin.
+				$link = str_replace('<a href', '<a class="thumbnail fp-gallery-lightbox" data-gall="fp-gallery-'. $post->ID .'" data-title="'. wptexturize($attachment->post_excerpt) .'" title="'. wptexturize($attachment->post_excerpt) .'" href', $link);
 
 			} elseif ( isset($attr['link']) && $attr['link'] == 'none' ){
-				$link = wp_get_attachment_image($id,$size_class,false);
+				$link = wp_get_attachment_image($id,$size_class,false, array('class' => "thumbnail attachment-$size_class size-$size_class", 'id' => "imageid-$id"));
 			} else {
-				$link = wp_get_attachment_link($id, $size_class, true, false, false,array('class' => '', 'id' => 'image-id-'.$id));
+				$link = wp_get_attachment_link($id, $size_class, true, false, false,array('class' => '', 'id' => "imageid-$id"));
+				$link = str_replace('<a href', '<a class="thumbnail" title="'. wptexturize($attachment->post_excerpt) .'" href', $link);
 			}
 
 			$image_meta  = wp_get_attachment_metadata( $id );
 			$orientation = '';
 			if ( isset( $image_meta['height'], $image_meta['width'] ) ) {
 				$orientation = ( $image_meta['height'] > $image_meta['width'] ) ? 'portrait' : 'landscape';
 			}
-			$output .= "<{$item_tag} class='gallery-item'>";
+			$output .= "<{$item_tag} class='fp-gallery-item cell'>";
 			$output .= "
-		        <{$icon_tag} class='gallery-icon {$orientation}'>
+		        <{$icon_tag} class='fp-gallery-icon {$orientation}'>
 		            $link
 		        </{$icon_tag}>";
 
-			// Uncomment if you wish to display captions inline on gallery
+			// Uncomment if you wish to display captions inline on gallery.
 			/*
 			if ( $caption_tag && trim($attachment->post_excerpt) ) {
 				$output .= "

diff --git a/src/assets/scss/global/_wp-overrides.scss b/src/assets/scss/global/_wp-overrides.scss
@@ -31,12 +31,27 @@ p.wp-caption-text{
 
 .gallery {
   @include xy-grid;
-}
-@for $i from 1 through 9 {
-  .gallery-columns-#{$i} {
-    @include xy-grid-layout($i, '.gallery-item', true);
+  @include xy-gutters($negative: true);
+  @for $i from 1 through 9 {
+    &.gallery-columns-#{$i} {
+      @include xy-grid-layout(2, '.gallery-item', true);
+    }
+    @include breakpoint(medium){
+      &.gallery-columns-#{$i} {
+        @include xy-grid-layout(4, '.gallery-item', true, (small: 30px));
+      }
+    }
+    @include breakpoint(large) {
+      &.gallery-columns-#{$i} {
+        @include xy-grid-layout($i, '.gallery-item', true, (small: 30px));
+      }
+    }
+  }
+  .gallery-icon > a {
+    @include thumbnail;
+    @include thumbnail-link;
+  }
+  .gallery-icon > img {
+    @include thumbnail;
   }
-}
-.gallery-icon {
-  @include thumbnail;
 }