WordPress.org

Ready to get started?Download WordPress

Forums

Untitled
[resolved] Original template has no excerpt next to thumbnail posts (8 posts)

  1. roseba
    Member
    Posted 10 months ago #

    I modified the content.php file so I could display a little text next to the thumbnail image. The wrapping works fine so long as there are no more than a few words.

    Once it wraps to a new line, the entire text, the heading, and the meta moves to the next line. I've have spent days trying to redo the css, and repositioning the thumbnails lower in the code. In the second scenario, the text wraps around the image, but there is no padding around the margin. Either way, it isn't working. I am fresh out of ideas.

    What am I doing wrong? http://arielshallit.com/wp/

    <?php
    /**
     * @package untitled
     */
    ?>
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    		<?php if ( '' != get_the_post_thumbnail() ) { ?>
    		<div class="single-thumbnail genericon genericon-link">
    			<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'untitled' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark">
    				<?php the_post_thumbnail( 'content-img' ); ?>
    			</a>
    		</div><!-- .single-thumbnail -->
    		<div class="header-wrapper">
    		<?php if ( 'post' == get_post_type() ) : ?>
    		<div class="entry-meta">
    			<?php untitled_posted_on(); ?>
    			<?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?>
    
    		<span class="comments-link"><?php comments_popup_link( __( '', 'untitled' ), __( '| 1 Comment', 'untitled' ), __( '| % Comments', 'untitled' ) ); ?></span>
    		<?php endif; ?>
    		</div><!-- .entry-meta -->
    		<?php endif; ?>
    	<header class="entry-header">
    		<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'untitled' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
    	</header><!-- .entry-header -->
    	<div class="entry-content">
    		<?php the_content( __( '<span class="meta-nav">&raquo;</span>', 'untitled' ) ); ?>
    		<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'untitled' ), 'after' => '</div>' ) ); ?>
    	</div><!-- .entry-content -->
    	<?php } else { ?>
    
    	<header class="entry-header">
    	<?php if ( 'post' == get_post_type() ) : ?>
    		<div class="entry-meta">
    			<?php untitled_posted_on(); ?>
    			<?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?>
    
    		<span class="comments-link"><?php comments_popup_link( __( '', 'untitled' ), __( '| 1 Comment', 'untitled' ), __( '| % Comments', 'untitled' ) ); ?></span>
    		<?php endif; ?>
    		</div><!-- .entry-meta -->
    		<?php endif; ?>
    		<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'untitled' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
    	</header><!-- .entry-header -->
    
    	<?php if ( is_search() ) : // Only display Excerpts for Search ?>
    	<div class="entry-summary">
    		<?php the_excerpt(); ?>
    	</div><!-- .entry-summary -->
    	<?php else : ?>
    
    	<div class="entry-content">
    		<?php the_content( __( '<span class="meta-nav">&raquo;</span>', 'untitled' ) ); ?>
    		<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'untitled' ), 'after' => '</div>' ) ); ?>
    	</div><!-- .entry-content -->
    	<?php endif; ?>
    <?php } ?>
    </article><!-- #post-<?php the_ID(); ?> -->
  2. roseba
    Member
    Posted 10 months ago #

    A different version of the code with the second scenario that I described.

    <!-- hide zero comments, add the exceprt -->
    
    <?php
    /**
     * @package untitled
     */
    ?>
    
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    
    		<div class="header-wrapper">
    		<?php if ( 'post' == get_post_type() ) : ?>
    		<div class="entry-meta">
    			<?php untitled_posted_on(); ?>
    			<?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?>
    		<span class="comments-link"><?php comments_popup_link( __( '', 'untitled' ), __( '| 1 Comment', 'untitled' ), __( '| % Comments', 'untitled' ) ); ?></span>
    		<?php endif; ?>
    		</div><!-- .entry-meta -->
    
    		<?php endif; ?>
    	<header class="entry-header">
    		<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'untitled' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
    	</header><!-- .entry-header -->
    
    		<div class="entry-content">
    		<?php if ( '' != get_the_post_thumbnail() ) { ?>
    		<div class="single-thumbnail genericon genericon-link">
    			<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'untitled' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark">
    				<?php the_post_thumbnail( 'content-img' ); ?>
    			</a>
    		</div><!-- .single-thumbnail -->
    
    		<?php if ( is_category() || is_archive() ) {
    			the_excerpt('<span class="meta-nav">  &raquo;</span>');
    		} else {
    			the_content('<span class="meta-nav">  &raquo;</span>');
    		} ?>
    
    		<?php edit_post_link( __( 'Edit', 'untitled' ), '<footer class="entry-meta"><span class="edit-link">', '</span></footer>' ); ?>
    	</div><!-- .header-wrapper -->
        </div>
    	<?php } else { ?>
    
    	<?php if ( is_search() ) : // Only display Excerpts for Search ?>
    	<div class="entry-summary">
    		<?php the_excerpt('<span class="meta-nav">  &raquo;</span>'); ?>
    	</div><!-- .entry-summary -->
    	<?php else : ?>
    
    	<div class="entry-content">
    		<?php the_content( __( '<span class="meta-nav">  &raquo;</span>', 'untitled' ) ); ?>
    		<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'untitled' ), 'after' => '</div>' ) ); ?>
    	</div><!-- .entry-content -->
    	<?php endif; ?>
    <?php } ?>
    </article><!-- #post-<?php the_ID(); ?> -->
  3. Kathryn
    Automattic Happiness Engineer
    Posted 10 months ago #

    So I can be sure I'm clear on what you're trying to accomplish before I help with the code, are you trying to create two columns within each post excerpt on the blog page, where the text never wraps around your image, like this mockup?

    https://cloudup.com/c7vfgS66onW

    If that's not what you're trying to achieve, a mockup or sketch would be really helpful. Thanks!

  4. roseba
    Member
    Posted 10 months ago #

    If you review the other link I sent you with the default "Unititled theme" right out of the box, it should look exactly like that, except I would like to include teaser text when a featured image is displayed.

    This is a Photoshop mockup of the it using my theme modifications.

    I was able to get something close by setting the featured image at 95% width on my staging site, but the date and title are above the photo rather than above the text.

    A lot of other things I tried resulted in the position of the excerpt in completely the wrong place, or in the correct place, but the the excerpt being locked into a column rather than the text wrapping around the photo. I spent days rearranging the code, adding new classes and changing styles. I'm at a loss.

  5. Kathryn
    Automattic Happiness Engineer
    Posted 10 months ago #

    Thanks for the screenshot.

    Here's what you'd need to do to accomplish what you're after. My tweaks here assume you're starting with a fresh copy of content.php from the parent theme:

    In your child theme, make these two tweaks to the fresh copy of content.php:

    1) Move this line:

    <div class="header-wrapper">

    just below this line:

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    2) Just below the closing header tag:

    </header>

    Add this new block of code for the excerpt:

    <div class="entry-summary">
        <?php the_excerpt(); ?>
    </div><!-- .entry-summary -->

    Next, add these lines of CSS to style.css in your child theme:

    #main .post-thumb .header-wrapper {
        width: inherit;
    }
    #main .post-thumb .entry-meta,
    #main .post-thumb .entry-header,
    #main .post-thumb .entry-title {
        clear: none;
    }

    This seems to achieve the effect you want on my test site:

    https://cloudup.com/cWN83hHJwL7

    Let me know how it goes!

  6. roseba
    Member
    Posted 10 months ago #

    Yes. This works. Thank you. The website is nearly complete!

  7. spruski
    Member
    Posted 3 weeks ago #

    Hello,

    I successfully implemented your solution above and it works great! However now the excerpt shown only has a "..." when the excerpt cuts off versus a "Read more..." link. How do I get there to be a "Read more..." link to the full post with the above solution?

  8. spruski - check out the Codex article on customizing Read More:
    http://codex.wordpress.org/Customizing_the_Read_More

    p.s. in future, please start a new thread rather than adding to very old threads already marked as resolved - it'll be easier for folks to spot your question and help you. Thanks.

Reply

You must log in to post.

About this Theme

About this Topic