Wordpress gallery: Added css and custom markup

library/foundation.php

@@ -186,3 +186,140 @@ function foundationpress_title_bar_responsive_toggle() {
 		}
 	}
 endif;
+
+/**
+ * Custom markup for Wordpress gallery
+ */
+if ( ! function_exists( 'foundationpress_gallery' ) ) :
+	function foundationpress_gallery($attr) {
+
+		$post = get_post();
+		static $instance = 0;
+		$instance++;
+
+		if ( ! empty( $attr['ids'] ) ) {
+			// 'ids' is explicitly ordered, unless you specify otherwise.
+			if ( empty( $attr['orderby'] ) )
+				$attr['orderby'] = 'post__in';
+			$attr['include'] = $attr['ids'];
+		}
+
+		// Allow plugins/themes to override the default gallery template.
+		$output = apply_filters('post_gallery', '', $attr, $instance);
+		if ( $output != '' )
+			return $output;
+
+		// Let's make sure it looks like a valid orderby statement
+		if ( isset( $attr['orderby'] ) ) {
+			$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
+			if ( !$attr['orderby'] )
+				unset( $attr['orderby'] );
+		}
+
+		$atts = shortcode_atts(array(
+			'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']);
+
+		if ( !empty($atts['include']) ) {
+			$_attachments = get_posts( array('include' => $atts['include'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby']) );
+
+			$attachments = array();
+			foreach ( $_attachments as $key => $val ) {
+				$attachments[$val->ID] = $_attachments[$key];
+			}
+		} elseif ( !empty($atts['exclude']) ) {
+			$attachments = get_children( array('post_parent' => $id, 'exclude' => $atts['exclude'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby']) );
+		} else {
+			$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby']) );
+		}
+
+		if ( empty($attachments) )
+			return '';
+
+		if ( is_feed() ) {
+			$output = "\n";
+			foreach ( $attachments as $att_id => $attachment )
+				$output .= wp_get_attachment_link($att_id, $atts['size'], true) . "\n";
+			return $output;
+		}
+
+		$item_tag = tag_escape($atts['itemtag']);
+		$caption_tag = tag_escape($atts['captiontag']);
+		$icon_tag = tag_escape($atts['icontag']);
+		$valid_tags = wp_kses_allowed_html( 'post' );
+
+		if ( ! isset( $valid_tags[ $item_tag ] ) )
+			$item_tag = 'figure';
+		if ( ! isset( $valid_tags[ $caption_tag ] ) )
+			$caption_tag = 'figcaption';
+		if ( ! isset( $valid_tags[ $icon_tag ] ) )
+			$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'] );
+
+		// 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, nothing or attachment page.
+			if ( isset($attr['link']) && $attr['link'] == 'file' ){
+				$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 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, 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' => "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='fp-gallery-item cell'>";
+			$output .= "
+		        <{$icon_tag} class='fp-gallery-icon {$orientation}'>
+		            $link
+		        </{$icon_tag}>";
+
+			// Uncomment if you wish to display captions inline on gallery.
+			/*
+			if ( $caption_tag && trim($attachment->post_excerpt) ) {
+				$output .= "
+		            <{$caption_tag} class='wp-caption-text gallery-caption'>
+		            " . wptexturize($attachment->post_excerpt) . "
+		            </{$caption_tag}>";
+			}
+			*/
+
+			$output .= "</{$item_tag}>";
+
+		}
+		$output .= "</div>\n";
+
+		return $output;
+	}
+	add_shortcode('gallery', 'foundationpress_gallery');
+endif;

src/assets/scss/global/_wp-overrides.scss

@@ -28,3 +28,30 @@ p.wp-caption-text{
   margin-left: auto;
   margin-right: auto;
 }
+
+.gallery {
+  @include xy-grid;
+  @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;
+  }
+}