WordPress.org

Ready to get started?Download WordPress

Forums

How to get thumbnail to the left and title and excerpt to the right (6 posts)

  1. Namastepower
    Member
    Posted 1 year ago #

    I am using a child theme of Twenty Eleven. This child theme has been modified with code provided by David Cox (digital raindrops) to change the loop into two columns rather than one. This now works, but it currently shows a title and below it the thumbnail. The excerpt gets displayed to the right. As the posts are not always going to have text, but many times just comics with a title, I'd rather have the template show the tumb to the left and both the title and the excerpt to the right.

    Here's the current situation

    I tried several forum-solutions to other users' problems, but didn't get the results I wanted. Hence this question.

    Here's the code that's relevant for the loop (created by digital raindrops, called content-index.php):

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    		<header class="entry-header">
    			<?php if ( is_sticky() ) : ?>
    				<hgroup>
    
    					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    					<h3 class="entry-format"><?php _e( 'Featured', 'twentyeleven' ); ?></h3>
    				</hgroup>
    			<?php else : ?>
    			<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
    			<?php endif; ?>
    
    			<?php if ( 'post' == get_post_type() ) : ?>
    			<div class="entry-meta">
    				<?php twentyeleven_posted_on(); ?>
    			</div><!-- .entry-meta -->
    			<?php endif; ?>
    
    			<?php if ( comments_open() && ! post_password_required() ) : ?>
    			<div class="comments-link">
    				<?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'twentyeleven' ) . '</span>', _x( '1', 'comments number', 'twentyeleven' ), _x( '%', 'comments number', 'twentyeleven' ) ); ?>
    			</div>
    			<?php endif; ?>
    		</header><!-- .entry-header -->
    
    		<?php if ( is_search() || $display['content'] == 'excerpt' ) : // Only display Excerpts for Search and chosen option ?>
    
    <div class="entry-summary">
    
    			<?php /* Do we have a thumbnail to display */ ?>
    			<?php if( $display['thumbnail'] && has_post_thumbnail() ) : ?>
    			<div class="<?php echo $display['thumb_align'] ?>">
    				<?php echo get_the_post_thumbnail( $post->ID, $size , $display['thumb_size'] ); ?>
    			</div>
    			<?php endif; ?>
    
    			<?php the_excerpt(); ?>
    		</div><!-- .entry-summary -->
    		<?php else : ?>
    		<div class="entry-content">
    
    			<?php /* Do we have a thumbnail to display */ ?>
    			<?php if( $display['thumbnail'] && has_post_thumbnail() ) : ?>
    			<div class="<?php echo $display['thumb_align'] ?>">
    				<?php echo get_the_post_thumbnail( $post->ID, $size , $display['thumb_size'] ); ?>
    			</div>
    			<?php endif; ?>
    
    			<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?>
    			<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
    		</div><!-- .entry-content -->
    		<?php endif; ?>

    What do I do?

  2. Namastepower
    Member
    Posted 1 year ago #

    I tried some of the solutions that were posted here, but couldn't completely get it to work for my set up.

  3. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    live link?

    have you removed the 'clear' from the post title style in style.css?

  4. Namastepower
    Member
    Posted 1 year ago #

    Hi alchymyth, thanks for responding.
    A live link, sure, here you go

    I did try to remove clear, but I am not sure if I have removed it correctly and in all the right places. My child theme imports the style.css from the twenty eleven theme. I took the .entry-title code from the main theme's css and put it into the child theme's css. I removed the clear-bit from that, thinking that would overwrite the mother theme's css.

    As you can see on the live link, that does not do it yet. Also, my current code shifts the title a bit to the right of the thumb, which does not look too nice.

    @import url("../twentyeleven/style.css");
    
    .entry-title {
    	color: #222;
    	font-size: 26px;
    	font-weight: bold;
    	line-height: 1.5em;
    	padding-bottom: .3em;
    	padding-top: 15px;
    }
    
    .attachment-page-single {
        float: left;
        margin: 12px 8px 8px 0px;
    }
    
    .attachment-index-categories {
        float: left;
        margin: 12px 8px 8px 0px;
    }
    
    .hentry,
    .no-results {
    	border-bottom: 1px solid #ddd;
    	border-right: 0px solid #ddd;
    	border-left: 0px solid #ddd;
    	border-top: 0px solid #ddd;
    	margin: 0 0 1.625em;
    	padding: 0 0 1.625em;
    	position: relative;
    }
    
    /* Structure the header area */
    #header-widget-area {
    	overflow: hidden;
    	background-color: #000000;
    	border-bottom:1px #ccc;
    	padding-bottom:5px;
    	padding-top:5px;
    	margin-top:-30px;
    	margin-bottom:20px;
    }
    #header-widget-area .widget-area {
    	float: left;
    	margin-right: 20px;
    	width: 220px;
    }
    #header-widget-area #fourth {
    	margin-right: 0;
    }
    
    .entry-meta {
    display: none;
    }
    
    img[class*="align"],
    img[class*="wp-image-"],
    #content .gallery .gallery-icon img {
    border: none;
    }
    
    li{
    list-style:none !important;
    }
  5. tiquitaqua
    Member
    Posted 1 year ago #

    removing 'clear' from post title style in style.css (as alchymyth said) should do it, but from looking at your code, you've already done that. So there must be something else...

    I am also struggling with this problem, solved it at first by removing the 'clear'. But now it doesn't align well. Anything else I can do?

  6. Namastepower
    Member
    Posted 1 year ago #

    I don't know, I am stuck...

Topic Closed

This topic has been closed to new replies.

About this Topic