Support » Themes and Templates » Can't get Masonry to work.

  • Hope someone can help me here!
    I’ve been looking for a lot of tutorials and instructions that might help me integrate Masonry on my new WordPress Theme but haven’t been able to figure it out. My goal is to make a grid theme with the Masonry effect.

    Here you have what I’ve put on my index:

    ?php get_header(); ?>
    <div id="wrapper">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div id="list">
            <div class="entry">
    			<div class="entrytitle">
    				<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
    			<div class="entrythumb">
    				<?php the_post_thumbnail('grid'); ?>
    			<div class="postinfo">
    				<?php the_time('F') ?> <?php the_time('d') ?>, <?php the_time('Y') ?> | <?php comments_popup_link('No Comments ', '1 Comment ', '% Comments '); ?> | <?php the_author() ?>
    			<div class="post">
    				<?php the_excerpt() ?>
    			<div class="metapost">
    				<?php the_tags(); ?>
    	    <?php endwhile; else: ?>
    			<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    	<?php endif; ?>

    In my CSS:

        max-width: 100%;
        margin: 0 auto;
    		width: 960px;
            width: 200px;
            float: left;
    	margin: 10px;

    (I included the float: left since it’s what it says on the Masonry plugin page)
    My functions:

    function mason_script() {
        wp_enqueue_script( 'jquery-masonry' );
    add_action( 'wp_enqueue_scripts', 'mason_script' );
    add_theme_support( 'post-thumbnails' ); 
    the_post_thumbnail();                  // without parameter -> 'post-thumbnail'
    the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)
    the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
    the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)
    the_post_thumbnail('full');            // Full resolution (original size uploaded)
    add_image_size( 'grid', 180, 9999 ); //300 pixels wide (and unlimited height)
    the_post_thumbnail( array(200,100) );  // Other resolutions

    And the footer:

    jQuery( document ).ready( function( $ ) {
        $( '#list' ).masonry( { columnWidth: 220 } );
    } );
    <?php wp_footer(); ?

    The problem is that the posts don’t fill all the space like the Masonry should do (for example the second line of posts start below the longest post of the first line ends, leaving spaces below the shorter posts).

    Hope somebody can help me 🙂
    (Can’t post a URL because it’s on the localhost).

  • The topic ‘Can't get Masonry to work.’ is closed to new replies.