WordPress.org

1. emzdesign
   Member
   Posted 2 years ago #

   Hi everyone

   Thanks in advance for your help.

   I want to pull the latest 4 posts to the homepage, but I want each one to have a different background image.

   Now, I don't want to use custom fields for this as this is going to be a blog for multiple users and I want each image to be different but something I control.

   Is there a way in the query to pull out the latest 4 posts but have each one with a different background image?

   Thanks

2. design_dolphin
   Member
   Posted 2 years ago #

   Will the 4 posts always be from four different users, or will this be random? If there are always the same user, you could possibly use a div class with 4 loops.

   For another possible way based on author take a look at Conditional_Tags: An_Author_Page

   And then do something with CSS classes in combination with PHP in your index.php.

   Pseudocode:

   query_posts
   
   start loop
   
   if (is_author(1)) {
   $background_image = background image 1
   } elseif (is_author(2)) {
   $background_image = background image 2
   }
   etc.
   
   <div class="frontpage_post <? echo $background_image">post text</div>
   
   end loop

   Edit: Link List of Authors might work better for you.

3. emzdesign
   Member
   Posted 2 years ago #

   Hiya

   Thanks for the response. Unfortunately they are always going to be by different users as well.

   I appreciate your time though :)

4. alchymyth
   The Sweeper
   Posted 2 years ago #

   simply add a counter to the loop; and use it to give each post's div a unique css id. use that to control the backgrounds using css.

   obviously depends on what you mean with:

   I want each image to be different but something I control

5. emzdesign
   Member
   Posted 2 years ago #

   Basically what I meant was if I were to use custom fields I'd have to depend on the users adding their own image all the time.

   I just want 4 images that are there all the time that aren't controlled by custom fields or what category/author etc. is.

   I'm not sure what you mean by adding a counter to the loop. Are there any examples of this anywhere?

   Thanks.

6. design_dolphin
   Member
   Posted 2 years ago #

   How about using the post ID then? This is a unique value. You should be able read the post ID from the URL (unless your using pretty URLs), or the admin backend without having to open the post itself.

   So pseudocode:

   if (ID = '234') {
   $background_image = background image 1
   } elseif (ID = '500') {
   $background_image = background image 2
   }
   etc.
   
   query_posts 
   
   start loop
   
   <div class="frontpage_post <? echo $background_image">post text</div>
   
   end loop

7. Mark / t31os
   Moderator
   Posted 2 years ago #

   So are these 4 posts the regular posts that you'd ordinarily see on the home page, or are they additional to other content you have displayed on the home page?

8. Izvarinskij
   Member
   Posted 2 years ago #

   If you don’t concern about cross-browser support (IE and older versions of good browsers), then you may try css:

   .post:nth-of-type(1){ … }
.post:nth-of-type(2){ … }
.post:nth-of-type(3){ … }
.post:nth-of-type(4){ … }

9. Mark / t31os
   Moderator
   Posted 2 years ago #

   You don't necessary need CSS selectors, a simple PHP counter and some basic conditional statements will be fine..

   Once i know the answer to my above query i'll provide an example.

10. emzdesign
    Member
    Posted 2 years ago #

    Hi

    Thanks for the responses.

    Basically, these 4 posts will be the very latest posts that were written on the site, so they will always change and will always be by different users, different categories etc.

    Hope this helps?

    Thanks :)

11. Mark / t31os
    Moderator
    Posted 2 years ago #

    So you're just letting the regular query run on that page? No custom query or query_posts? Just the standard loop?

    Assuming that's true for the moment, you'll have a line like this..
    

    while( have_posts() ) : the_post();

    Update that to..
    

    $i = 0;
    while( have_posts() ) : the_post(); $i++;

    Then look for the appropriate element you want to change the styling on..

    For example, let's assume it looks like this for the moment..
    

    <div class="<?php post_class() ?>">

    or
    

    <div class="post">

    All you need to do is factor in the counter..
    

    <div class="mainclass back-<?php echo $i; ?>">

    Which would then produce two classes for each element..
    

    .mainclass {
      /*
         do all CSS except the background image here
         so, stuff like padding, border, width, etc.. (this will apply to all of the posts)
      */
    }

    and
    

    .back-1 {
      /* the first element background properties */
    }
    .back-2 {
      /* the second element background properties */
    }
    .back-3 {
      /* the third element background properties */
    }
    .back-4 {
      /* the forth element background properties */
    }

    If you'd like a more tailored example, post your template code into a pastebin and post the link back, i'll help you implement the code.

Topic Closed

This topic has been closed to new replies.