WordPress.org

Ready to get started?Download WordPress

Forums

Can't get Masonry to work. (1 post)

  1. upwp
    Member
    Posted 10 months ago #

    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>
    			<div class="entrythumb">
    				<?php the_post_thumbnail('grid'); ?>
    			</div>
    			<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>
    			<div class="post">
    				<?php the_excerpt() ?>
    			</div>
    			<div class="metapost">
    				<?php the_tags(); ?>
    			</div>
    		</div>
    	</div>
    	    <?php endwhile; else: ?>
    			<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    	<?php endif; ?>
    </div>

    In my CSS:

    #wrapper
    {
        max-width: 100%;
        margin: 0 auto;
    }
        #list
        {
    		width: 960px;
    
        }
            .entry
            {
            width: 200px;
            float: left;
    	margin: 10px;
            }

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

    <?php
    
    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:

    <script>
    jQuery( document ).ready( function( $ ) {
        $( '#list' ).masonry( { columnWidth: 220 } );
    } );
    </script>
    <?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).

Reply

You must log in to post.

About this Topic