Customizing content.php

Hi Guys,

I am trying to customize the content.php file to show essentially a compact list of results.

My users will be searching through many listings and I want to show them many listings at once so they don't have to scroll forever to find their video.

I would like a small thumbnail (150 x 84) on the left , with some basic info about the listing (title, date, time and some of the tags)

I have reduced the size of the thumbnail, but I can't seem to get the text and info to sit next to it... I have tried to float the image left, but the info and title will not move up and across...

I think it may be a CSS thing... I thought the float would do it... any help would be great!

  • aircooled76
    <?php
    /**
     * The default template for displaying content. Used for both single and index/archive/search.
     *
     * @package WordPress
     * @subpackage Twenty_Twelve
     * @since Twenty Twelve 1.0
     */
    ?>
    
    	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    		<div class="entry-header">
    		<?php set_post_thumbnail_size( 150, 90, false ); ?>
    			<a href="<?php the_permalink(); ?>">
    			<?php the_post_thumbnail(); ?>
    			</a>
    			<h1>
    			<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
    			</h1>
    			<?php echo do_shortcode('[ct id="_ct_text_513acfba3842b" property="title | description | value"]'); ?>
    			<?php echo do_shortcode('[ct id="_ct_datepicker_5139cd74e6e61" property="title | description | value"]'); ?>
    			<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
    		</div><!-- .entry-content -->
    
    		<footer class="entry-meta">
    			<?php if ( is_singular() && get_the_author_meta( 'description' ) && is_multi_author() ) : // If a user has filled out their description and this is a multi-author blog, show a bio on their entries. ?>
    				<div class="author-info">
    					<div class="author-avatar">
    						<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentytwelve_author_bio_avatar_size', 68 ) ); ?>
    					</div><!-- .author-avatar -->
    					<div class="author-description">
    						<h2><?php printf( __( 'About %s', 'twentytwelve' ), get_the_author() ); ?></h2>
    						<p><?php the_author_meta( 'description' ); ?></p>
    						<div class="author-link">
    							<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
    								<?php printf( __( 'View all posts by %s <span class="meta-nav">&rarr;</span>', 'twentytwelve' ), get_the_author() ); ?>
    							</a>
    						</div><!-- .author-link	-->
    					</div><!-- .author-description -->
    				</div><!-- .author-info -->
    			<?php endif; ?>
    		</footer><!-- .entry-meta -->
    	</article><!-- #post -->
  • Ollie

    That looks like a CSS issue ... so what you want is to try out the following css properties; (I would give you the code, as would Ari but without online view we cant inspect elements and fix it on the fly).

    clear: none !important;
    float (but you are already aware of that.) Float works hand in hand with width, so keep that in mind.

    Another thing that many get confused about is;

    If you want to float right, you need to put the right floated box before the left thumbnail in the template code.

    Hope this helps
    Cheers

  • aristath

    great! Now that I see it in action I can help. :slight_smile:

    In your template you have this:

    <a href="<?php the_permalink(); ?>">
    			<?php the_post_thumbnail(); ?>
    			</a>
    			<h1>
    			<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
    			</h1>
    			<?php echo do_shortcode('[ct id="_ct_text_513acfba3842b" property="title | description | value"]'); ?>
    			<?php echo do_shortcode('[ct id="_ct_datepicker_5139cd74e6e61" property="title | description | value"]'); ?>
    			<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>

    Replace that with this:

    <div class="entry-list-entry-image">
      <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
    </div>
    
    <div class="entry-list-entry-content">
      <h1>
        <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
      </h1>
      <?php echo do_shortcode('[ct id="_ct_text_513acfba3842b" property="title | description | value"]'); ?>
      <?php echo do_shortcode('[ct id="_ct_datepicker_5139cd74e6e61" property="title | description | value"]'); ?>
      <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
    </div>

    To make it easier, I have just copy-pasted and edited your template and you can get the updated file from this gist: https://gist.github.com/aristath/5346826

    Then you should add this in your theme's stylesheet:

    div.entry-list-entry-image {
      display: inline-block;
      width: 150px;
      padding-right: 10px;
    }
    
    div.entry-list-entry-content {
      display: inline-block;
      width: 450px;
    }

    I included this in the gist I posted above too. :wink:

    Please let me know how that works for you.

    Cheers,
    Ari.

    Was that helpful?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.