add image to every post preview (10 posts)

  1. fishgun
    Posted 3 years ago #

    I’m using the <!--more--> tag so my blog page only shows a short preview of each post.

    I’d like to tidy up the page and separate each preview with a spacer image.

    I know how to add an image to every post, by adding html to “single.php”, but this won’t be included in the preview, so how do I do this?

    below is my current “single.php”

     * Template - single.php
     * @package 		WordPress
     * @subpackage 		Tweaker3
     * @author 			Arnold Goodway
     * @license 		GNU General Public License v2.0 [http://www.gnu.org/licenses/gpl-2.0.html]
     * @since 			Version 1.0.1
     * @alter 			Version 1.0.4
     * Template that shows the single page with the entire post displayed.
     * The template calls header.php then shows the content of the relevant post.
     * The comments and comment form are then added.
     * The template then calls sidebar.php and footer.php. .
     * Child Theme - This template may be duplicated inside a child theme and edited there.
    get_header(); ?>
    <div id="content">
    	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    		<div <?php post_class('single-page') ?> id="post-<?php the_ID(); ?>">
    			<h2 class="entry-title"><?php the_title(); ?></h2>
    			<p class="entry-meta"><?php _e('By ', 'tweaker3' ); ?><?php the_author_posts_link(); ?><?php _e( ' on ', 'tweaker3' ); ?><?php echo get_the_date(); ?><?php edit_post_link( __( 'Edit', 'tweaker3' ), ' | ', ''); ?></p>
    			<div class="entry-content">
    				<?php the_content(); ?>
    				<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'tweaker3' ), 'after' => '</div>' ) ); ?>
    			</div><?php // end .entry-content ?>
    			<?php if (!is_attachment()): ?>
    				<div class="entry-meta-single">
    					<?php tweaker3_cats_and_tags(); ?>
    				</div><?php // end .entry-meta-single ?>
    			<?php endif; ?>
    		</div><?php // end #post ?>
    <img src="http://rmi.co/images/spacebar.jpg"</>
    		<div id="single">
    			<div class="single-block">
    				<?php comments_template('', true); ?>
    			</div><?php // end .single-block ?>
    			<div class="nav">
    				<div class="nav-left"><?php next_post_link( '&laquo; %link' ) ?></div>
    				<div class="nav-right"><?php previous_post_link( '%link &raquo;' ) ?></div>
    			</div><?php // end .nav ?>
    		</div><?php // end #single ?>
    	<?php endwhile; else: // This should never be necessary ?>
    		<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
    			<p><?php _e( 'Sorry, there does not appear to be any posts here.', 'tweaker3' ); ?></p>
    		</div><?php // end unnamed div ?>
    	<?php endif; ?>
    </div><?php // end #content ?>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
  2. Andrew
    Forum moderator
    Posted 3 years ago #

    Can you send us a link to a web page depicting this?
    Do you want the "spacer image" applied to the 'Read more' link?

    This thread might help

  3. fishgun
    Posted 3 years ago #

    Here’s the page:


    I need to insert a spacer graphic between each post preview.

  4. Andrew
    Forum moderator
    Posted 3 years ago #

    You can achieve this with CSS, but before you add styles, make sure you do so in either of the following:
    A Child Theme - http://codex.wordpress.org/Child_Themes
    A Custom Style plugin - http://wordpress.org/extend/plugins/custom-style/

  5. fishgun
    Posted 3 years ago #


    I’m comfortable editing style.css so I’m not sure a plugin is the right way to go.

    Using CSS, I’d need to create a div/class/whatever. Fine, but where would the div be placed in the code to make the image appear where I need it to?

  6. Andrew
    Forum moderator
    Posted 3 years ago #

    Have you made a Child Theme CSS file?

  7. fishgun
    Posted 3 years ago #

    No, the overall style.css has been updated to suit what we need

  8. Michael
    Forum Moderator
    Posted 3 years ago #

    I need to insert a spacer graphic between each post preview.

    this would be in index.php (more specific in loop.php);
    if you don't want to edit the loop directly,
    you could try to do this in style.css by adding some extra padding and a background image to the style of .hentry;


    .hentry{ padding-bottom: 40px; background: url(images_c/postseparatorimage.jpg) left bottom repeat-x;}

    with the image height less than what you added as padding.

    your theme adaptation seems to have the css images in a /images_c/ folder, so add your new image there as well.

  9. fishgun
    Posted 3 years ago #


    Whereabouts in the loop?

  10. Michael
    Forum Moderator
    Posted 3 years ago #

    in loop.php, you could add an image html code somewhere here near the end:

    </div><?php // end .entry-content ?>
    	</div><?php // end #post ?>
    <?php endwhile; ?>

    where exactly depends on your design idea.

Topic Closed

This topic has been closed to new replies.

About this Topic