Masonry with Wordpress galleries produces messed up layout on each refresh

admin

Administrator
Staff member
I am trying to implement masonry to wordpress default gallery. I modified the
Code:
gallery_shrotcode()
to adjust the image sizes and to add the masonry class and attributes to the gallery div. Also I changed the
Code:
<style>
a bit

Here is the updated code:

Code:
function rf_gallery($output, $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);
//if ( $output != '' )
//    return $output;

// We're trusting author input, so let's at least 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'] );
}

extract(shortcode_atts(array(
    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post ? $post->ID : 0,
    'itemtag'    => 'dl',
    'icontag'    => 'dt',
    'captiontag' => 'dd',
    'columns'    => 3,
    'size'       => 'thumbnail',
    'include'    => '',
    'exclude'    => ''
), $attr, 'gallery'));

$id = intval($id);
if ( 'RAND' == $order )
    $orderby = 'none';

if ( !empty($include) ) {
    $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

    $attachments = array();
    foreach ( $_attachments as $key => $val ) {
        $attachments[$val->ID] = $_attachments[$key];
    }
} elseif ( !empty($exclude) ) {
    $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
} else {
    $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
}

if ( empty($attachments) )
    return '';

if ( is_feed() ) {
    $output = "\n";
    foreach ( $attachments as $att_id => $attachment )
        $output .= wp_get_attachment_link($att_id, $size, true) . "\n";
    return $output;
}

$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$icontag = tag_escape($icontag);
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) )
    $itemtag = 'dl';
if ( ! isset( $valid_tags[ $captiontag ] ) )
    $captiontag = 'dd';
if ( ! isset( $valid_tags[ $icontag ] ) )
    $icontag = 'dt';

$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';

$selector = "gallery-{$instance}";

$gallery_style = $gallery_div = '';
if ( apply_filters( 'use_default_gallery_style', true ) )
    $gallery_style = "
    <style type='text/css'>
        #{$selector} {
            margin: auto;
        }
        #{$selector} .gallery-item {
            float: {$float};
            text-align: center;

        }
        #{$selector} img {

        }
        #{$selector} .gallery-caption {
            margin-left: 0;
            margin-right: 0;
        }
        /* see gallery_shortcode() in wp-includes/media.php */
    </style>";
$size_class = sanitize_html_class( $size );
$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} js-masonry' data-masonry-options='{ \"columnWidth\": 200, \"itemSelector\": \".gallery-item\" }'>";
$output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );

$i = 0;
foreach ( $attachments as $id => $attachment ) {
    if ( ! empty( $attr['link'] ) && 'file' === $attr['link'] )
        $image_output = wp_get_attachment_link( $id, array(300,600), false, false );
    elseif ( ! empty( $attr['link'] ) && 'none' === $attr['link'] )
        $image_output = wp_get_attachment_image( $id, array(300,600), false );
    else
        $image_output = wp_get_attachment_link( $id, array(300,600), true, false );

    $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 .= "<{$itemtag} class='gallery-item'>";
    $output .= "
        <{$icontag} class='gallery-icon {$orientation}'>
            $image_output
        </{$icontag}>";
    //if ( $captiontag && trim($attachment->post_excerpt) ) {
    //    $output .= "
    //        <{$captiontag} class='wp-caption-text gallery-caption'>
    //        " . wptexturize($attachment->post_excerpt) . "
    //        </{$captiontag}>";
    //}
    $output .= "</{$itemtag}>";
    if ( $columns > 0 && ++$i % $columns == 0 )
        $output .= '<br style="clear: both" />';
}

$output .= "
        <br style='clear: both;' />
    </div>\n";

return $output;
}
add_filter("post_gallery", "rf_gallery",10,2);

This code makes the layout completely messed up, and which is strange, it changes when browser reloads. More precisely the top positioning in inline style changes with each load to produce the three different layouts.

Here are the images of two layouts that come up:
<img src=" " alt="No1">

<img src=" " alt="No2">

<img src=" " alt="No3">

The last image is the correct layout.

Please let me know what am I doing wrong.

Thanks!