How do I separate posts with an image?

  • djmaru

    (@djmaru)


    14 years, 4 months ago

    I want to separate my posts with a simple image. I’ve searched online and every tutorial just doesn’t seem to work. Can someone help me out here? Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Michael

    (@alchymyth)

    14 years, 4 months ago

    assuming, you are talking about index.php, and you are using the standard wordpress loop:

    <?php if (have_posts()) : ?>
               <?php while (have_posts()) : the_post(); ?>
               <!-- do stuff ... -->
               <?php endwhile; ?>
     <?php endif; ?>

    one option: you could insert a line with the code for your image just before the line <?php endwhile; ?>.
    something like this:

    <img src="<?php bloginfo('template_directory'); ?>/images/postdivider.jpg" alt="" />

    second option uses css:
    if you know the div that surrounds your post (and it does not already have a background image), you can add your image as a background image to this div, the code would be something like this:
    background: transparent url('/images/postdivider.jpg') center bottom no-repeat;

    do you have a link to your site?

    Thread Starter djmaru

    (@djmaru)

    14 years, 4 months ago

    Thanks for the info. Here’s a link to my site: http://dreamsinaudio.com/

    Basically just would want a divider between each post, which would mean not having one for the last post since it’s not separated from anything. Do I have to add something to the code to achieve this?

    THanks for the help alchymyth!

    Michael

    (@alchymyth)

    14 years, 4 months ago

    in this case it would be easier to add an image before the post and treat the first post different with no image:
    your structure could be like this – using a counter and a conditional statement, in the first instance you don’t display the image:

    <?php $count=0; ?>

     <?php if (have_posts()) : ?>
               <?php while (have_posts()) : the_post(); ?>

     <?php if($count != 0) { ?>
     <div class="postdivider">
     <img src="<?php bloginfo('template_directory'); ?>/images/postdivider.jpg" alt="" />
     </div>
     <?php }
     $count++ ; ?>

               <!-- do stuff ... -->
               <?php endwhile; ?>
     <?php endif; ?>

    die extra div .postdivider gives you more possibility to style the divider.

    Thread Starter djmaru

    (@djmaru)

    14 years, 4 months ago

    i’m having trouble figuring out where to put that code. here’s what my index looks like

    <?php get_header(); ?>

    <div id=”bloque”>

    <div id=”noticias”>

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <h2 id=”post-<?php the_ID(); ?>”>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?> </h2>
    <b><?php the_date(‘l, F j, Y’); ?></b>

    <?php the_content(“Continue reading “.the_title(”, ”, false).”…”); ?>

    <?php link_pages(‘<p>Pages: ‘, ‘</p>’, ‘number’); ?>

    <div class=”feedback”>

    Filed In: <?php the_category(‘, ‘) ?> | <?php comments_popup_link(‘No Comments’, ‘1 Comment’, ‘% Comments’); ?> <?php edit_post_link(‘Edit’, ‘ — ‘, ”); ?> | <?php the_tags(‘Tags: ‘, ‘, ‘, ‘
    ‘); ?>

    </div>

    <!–

    <?php trackback_rdf(); ?>

    –>

    <?php comments_template(); // Get wp-comments.php template ?>

    <?php endwhile; else: ?>

    <h2 class=”center”>Not Found</h2>

    <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>

    <?php endif; ?>

    <div id=”pagination”>

    <?php posts_nav_link(‘ — ‘, __(‘« Previous Page’), __(‘Next Page »’)); ?>

    </div>

    </div>

    <?php get_footer(); ?>

    Michael

    (@alchymyth)

    14 years, 4 months ago

    here is the code integrated into your index.php:

    <?php get_header(); ?>

<div id="bloque">

<div id="noticias">

     <?php $count=0; ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

     <?php if($count != 0) { ?>
     <div class="postdivider">
     <img src="<?php bloginfo('template_directory'); ?>/images/postdivider.jpg" alt="" />
     </div>
     <?php }
     $count++ ; ?>

<h2 id="post-<?php the_ID(); ?>">" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?> </h2>
<b><?php the_date('l, F j, Y'); ?></b>

<?php the_content("Continue reading ".the_title('', '', false)."..."); ?>

    good luck 😉

    Thread Starter djmaru

    (@djmaru)

    14 years, 4 months ago

    thanks so much alchymyth! one last thing: as you can see on my blog now the divider is there, but is there any way to make it evenly spaced between the posts?

    Michael

    (@alchymyth)

    14 years, 4 months ago

    add this at the end of style.css:

    .postdivider {margin:15px 0 0 0;}

    this ‘margin’ adds a bit of fre space above the line.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How do I separate posts with an image?’ is closed to new replies.