Support » Plugins » Hacks » wp_query_posts and masonry script

  • Hi, bit of a newbie to the coding side of things and have inherited a blog site which I’m trying to customise utilisiing the jquery masonry script. Got the custom template all set up here:

    I have 2 issues I want to resolve,

    1. the masonry script, although loading all posts, you’ll notice that the display goes awry after the first few posts, I’ve check that the posts have been created correctly so could this be some sort of cache/memory issue?

    2. The idea of the page being that the last sticky post is diplayed at the top across the width of the mainn container, I’ve got this working

    <div id="sticky">
    	$sticky = get_option( 'sticky_posts' );
    	rsort( $sticky );
    	$sticky = array_slice( $sticky, 0, 1 );
    if (is_numeric($sticky[0])) {
    	/* Query sticky posts */
    	query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
    		while ( have_posts() ) : the_post();
    		the_post_thumbnail( array(920,540), $attr );
    		the_title('<h3>', '</h3>');
    		if($post->post_excerpt) :
    		endwhile; // End the loop. Whew. 

    I’m needing to emulate how the links on the masonry bricks work ie, adding permalinks to the post? and ideally to exclude this post from being displayed by the masonry script.

    Any help, greatly appreciated.

    (Custom child theme of twenty twelve)


Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator bcworkz


    I’m not familiar with masonry script, so I’m not sure why the display glitches. I doubt it’s memory or cache issues, though you do need to let WP create appropriate thumbnail images for this. The loading of many full size images takes way too long over slower connections.

    I’m guessing that the image size cues are confusing the display. One of the images that’s walked over by another post has image sizes in HTML that are way larger than any reasonable window. I’ll bet once properly sized thumbnails are used the issue will go away.

    To make the sticky title appear like the masonry titles, try something like this in place of the_title():

    <div class="brick_header">
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>

    How to remove the one sticky from the main loop. This is best done by altering the main query via the ‘pre_get_posts’ action, but it appears you do not know what the sticky is at this point. Your script appears to be part of the page template, which is too late to affect the query. Your choices now are to re-run the query with get_posts() and including the 'post__not_in' => $sticky argument.

    Or modify the main loop to include script that checks if the current $post->ID == $sticky[0] then suppress the output of that particular post.

    Or determine the sticky early enough and somehow pass it on to the template, or simply re-determine it again using the exact same method.

    Thanks bcworkz, will look at the thumbnails – your suggestion does make sense now, re: the_title():, as I said I’m a bit of a newbie to the loop, where exactly would I put your suggested code? simply replacing it in place of the_title('<h3>', '</h3>'); results in an error, perhaps my template having two loops running is causing an issue? also having an issue retrieving the last sticky, the rsort( $sticky ); is working but ignoring the latest post (assuming that it uses the published date to retrieve it)

    complete code here:



    Forum Moderator

    where does the masonary script come from?

    is it from a plugin?
    where did you download it from?

    does it have settings?

    it seems that the script is only allowing a height of 96px per image.

    on reloading the page, it seems to work;
    or have you just made any adjustments?

    Original script here

    P.s think it has shipped with the core library of wp 3.5 upwards

    Moderator bcworkz


    That’s correct, on both the title script and masonry being included in the WP distribution.

    Probably the reason my title script broke your page is the <?php ?> tags were not coordinated. Your call to the_title() is within a PHP block but my script starts out with HTML, so the PHP block needs to be terminated for the HTML content, then reinstituted for the remainder of the code. That section of code should look like this after adding my script:

    while ( have_posts() ) : the_post();
        the_post_thumbnail( array(920,540));
    <div class="brick_header">
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
    if($post->post_excerpt) :

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘wp_query_posts and masonry script’ is closed to new replies.