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 ); |
This is perfect! Thank you so much.
Thank you for this. Taking this and modifying to open in a modal window when picture is clicked. Saved me heaps of time!
Branden were you able to adapt this to open in a modal? Here is my attempt however it is not working. Any idea why?
[https://pastebin.com/J6Yu8mav]