0

Here's what I'm trying to do:

  1. 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.
  2. 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!

4
  • 1
    How did you get $page->ID while fetching image URL? – Nilambar Sharma Sep 9 '14 at 3:34
  • I'm not really sure :( All I know is it grabs the page id of the last post in the sequence. So in the case of the example it's grabbing the page id of the gaki no tsukai post (sixth one, bottom right) – mechakoichi Sep 9 '14 at 15:03
  • Try replacing $page->ID with $post->ID. – Michael Ecklund Sep 9 '14 at 16:18
  • page vs post isn't making any changes / different. Would have been really nice if that was it! – mechakoichi Sep 12 '14 at 18:20
1

Solution was to remove the style tag and and write the background styling right into the .featured_box div. Thank you to @ckhicks on Twitter for the solution, and thank you everyone else for trying to help out too <3

 <?php $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' ); ?>
    <a href="<?php the_permalink(); ?>"><div class="featured_box" style="background: url('<?php echo $background[0]; ?>') no-repeat center center;">
    <h2><?php the_title(); ?></h2>
    </div></a>
0

The Problem

It's been awhile since I have messed with HTML, but if I remember correctly the <style> tags would be global. To elaborate: <style></style> would be as if you appended it to the end of your css file, but if you did something inline, such as <h2 style="color: red;">test</h2>, it would only be applied to that html element.

This would explain why the last article's image is the one that repeats. This would be occuring at the end of your else statement with:

<style>
    .featured_box { background: url('<?php echo $background[0]; ?>') no-repeat center center; }
    </style>

A possible solution:

(This could probably be done much cleaner, but I would imagine this would fix it)

<?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" id="featured<?php $count ?>">
    <?php $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' ); ?>
    <h2><?php the_title(); ?></h2>
    </div></a>

    <style>
    #featured<?php $count ?>.featured_box { background: url('<?php echo $background[0]; ?>') no-repeat center center; }
    </style>

<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

<?php }
?>

I had just added an id to your <div> that contains it all. Then, I added an id selector to your css style that is being added. Each id is just "featured" plus the current count of your loop.

P.S.: Sorry if this rather messy, first time actually posting on here. :)

1
  • Well, it didn't break anything, but the backgrounds are still all the same. It looks like it's not pulling the $count into the new featured ID you created, and is still just posting up featured. I think you're onto something though with the style. I can see each background image being canceled out by the next one. dropbox.com/s/o9uk9k61nop51t2/… – mechakoichi Sep 12 '14 at 18:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.