jQuery, Masonry & Image handling?

0 Views

I’ve got jQuery Masonry working on my site

http://www.lovejungle.com/dev/testenvironment/?cat=4

Read More

But for the life of me, I cannot work out how the images are handled.

Is there a method where it grabs the post featured image? Or is there a line of code that grabs it?

This is the code I’m using for my index.php and categories.php pages 

<div id="container">
<div id="content">
<?php query_posts('posts_per_page=15'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink(); ?>" class="box col<?php echo rand(2,4); ?>">
<span class="title"><?php the_title(); ?></span>
<img src="<?php echo get_post_meta($post->ID, 'PostThumb', true); ?>" alt="" />
<span class="ex"><?php the_excerpt(); ?></span>
</a>
<?php endwhile; endif; ?>
</div>
</div>

The code is from this tutorial
http://digwp.com/2010/08/randomized-grid-of-posts/#comment-1175

I know this needs to change 

<img src="<?php echo get_post_meta($post->ID, 'PostThumb', true); ?>" alt="" />

Or it might be that my input method for images is not right.

This is an example of what i’m aiming for
http://thoughtandtheory.com/collection/

I’m still unclear about how images are handled?

Post Views: 0

Related posts

Leave a Reply

1 comment

  1. so.. if i get you right, you’d like to get the post images in the loop? just the thumbnails of it or the big image? should the images be links to the article?

    i’d create main category where all your posts for the filter are in. then create a custom query for that category like this:

    <?php $YourQuery = new WP_Query(array('cat=11', 'posts_per_page' => -1)); if ($YourQuery->have_posts()) : ?>
<?php while ($YourQuery->have_posts()) : $YourQuery->the_post(); ?>

    while getting all the posts you could then assign the recent category to the div and use this for the filter:

    <?php foreach((get_the_category()) as $category ) { echo $category->cat_name . ' '; } ?>">

    and then get the images inside that div. check for the thumbs first and define their height & width (or skip that part if you don’t want to have a grid like optic). then, while calling the image, assign the category to the image so you could use these for the filter:

    <?php if (has_post_thumbnail()) {the_post_thumbnail('160,230,true');}
elseif (get_post_meta($post->ID, "HomeThumbnail", true) != '') 
{ 
?>

<img src="<?php echo get_post_meta($post->ID, "Thumbnail", true); ?>" alt="<?php the_title();   ?>" class="<?php foreach((get_the_category()) as $category){echo $category->cat_name . ' ';} ?> ex" />

       <?php 
}

else {
echo "<img class="ex" src="". get_bloginfo('template_directory') . "/images/placeholder.jpg" alt="Default Post Image" />";
 }
   ?>  
</a>

    in the last part i assigned a placeholder image so you could test the environment without having all the images uploaded yet.

    that should give you a go in the right direction…