Here's what I'm trying to do:
- Make it so the first 6 posts are displayed differently on the homepage than posts 7 and on. The first six posts should grab their featured thumbnail images and use them as a background, then overlay the background with its title.
- Posts 7~ have their own separate style, in this case, the post type and the post title.
I've gotten most of that to work, but the problem is the first six posts only one background image, which is the featured post image from the last of the six posts (same deal if I post 3 posts, it will pull the featured image thumbnail from the last, i.e. the third post).
What I want is for each post to pull their own featured image thumbnail and use that as the background image, so they're not all the same image ;)
Image Of What Happens: https://www.dropbox.com/s/3k8ngeukl59c0ff/Screen%20Shot%202014-09-08%20at%205.00.44%20PM.png?dl=0
The code I'm using:
<?php
if ( ( is_home() ) )
{ ?>
<div id="featured_area_2">
<?php if (have_posts()) : ?>
<?php $count = 1; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count > 7) : ?>
<div style="clear: both;"></div>
</div><!--featured_area_2-->
<article class="post">
<header class="entry-header">
<h1 class="entry-title"><a href='/<?php echo get_post_type( $post ) ?>/'><span class='posttype <?php echo get_post_type( $post ) ?>type'><?php echo get_post_type( $post ) ?></span></a> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</header>
</article>
<?php else : ?>
<a href="<?php the_permalink(); ?>"><div class="featured_box">
<?php $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' ); ?>
<h2><?php the_title(); ?></h2>
</div></a>
<style>
.featured_box { background: url('<?php echo $background[0]; ?>') no-repeat center center; }
</style>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
<?php }
?>
Any help would be much appreciated!
$page->ID
while fetching image URL?$page->ID
with$post->ID
.