If you are using foundation i’m sure you love block grids, but wordpress galleries do their own HTML. No worries, throw this snippet in your functions.php (or wherever it belongs in your theme’s structure) and the markup will change to a blockgrid instead. This works with Foundation 6 … for Foundation 5 you’ll need to change the output to UL and LIs instead of row/column DIVs.
Easy. You are welcome!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
function blockgrid_gallery( $output, $atts, $instance ) { $atts = shortcode_atts( array( ‘order’ => ‘ASC’, ‘orderby’ => ‘menu_order ID’, ‘id’ => get_the_ID(), ‘columns’ => 3, ‘size’ => ‘thumbnail’, ‘include’ => ”, ‘exclude’ => ”, ), $atts ); 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’ => intval( $atts[ ‘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’ => intval( $atts[ ‘id’ ] ), ‘post_status’ => ‘inherit’, ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘order’ => $atts[‘order’], ‘orderby’ => $atts[‘orderby’] ) ); } if ( empty( $attachments ) ) return ”; $output = ‘<div class=”row small-up-2 medium-up-‘ . intval( $atts[ ‘columns’ ] ) . ‘” >’; foreach ( $attachments as $id => $attachment ) { $img = wp_get_attachment_image_url( $id, $atts[ ‘size’ ] ); $img_srcset = wp_get_attachment_image_srcset( $id, $atts[ ‘size’ ] ); $img_full = wp_get_attachment_image_url( $id, ‘full’ ); $caption = ( ! $attachment–>post_excerpt ) ? ” : ‘ data-caption=”‘ . esc_attr( $attachment–>post_excerpt ) . ‘” ‘; $output .= ‘<div class=”column”>’ . ‘<a href=”‘ . esc_url( $img_full ) . ‘”>’ . ‘<img src=”‘ . esc_url( $img ) . ‘” ‘ . $caption . ‘ class=”th” alt=”‘ . esc_attr( $attachment–>title ) . ‘” srcset=”‘ . esc_attr( $img_srcset ) . ‘” sizes=”(max-width: 50em) 87vw, 680px” />’ . ‘</a></div>’; } $output .= ‘</div>’; return $output; } add_filter( ‘post_gallery’, ‘blockgrid_gallery’, 10, 3 ); |
Leave a Reply