WordPress.org

Ready to get started?Download WordPress

Forums

How to place thumbnails before the post title (TwentyTen) (15 posts)

  1. NintendoStar
    Member
    Posted 1 year ago #

    I am currently editing my TwentyTen WordPress theme and have hit a small roadblock along the way. I have implemented thumbnails into the homepage, but the thumbnail currently sits below the title next to the post excerpt. I would like to edit my code so the title sits on the right of the thumbnail along with the excerpt.

    Here is how it currently looks: http://i48.tinypic.com/4keo93.png

    Here is how I would like it to look: http://i50.tinypic.com/10i89i9.jpg

    And this is what my code looks like in the Loop.php file:

    <div class="entry-content">
    
    <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(120,90), array("class" => "alignleft post_thumbnail")); } ?>
    
    				<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyten' ) ); ?>
    				<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
    			</div><!-- .entry-content -->

    I have tried moving the code that calls the thumbnail so that it's placed just before the code that calls the title and entry meta, but that causes this problem: http://i46.tinypic.com/34f16v9.png

    I feel like it's something to do with aligning or floating things incorrectly, and the fix is probably quite obvious to a more experience coder. So if any of you fine people could be of assistance that would be brilliant. Thanks for any help you can provide. :)

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

    I have tried moving the code that calls the thumbnail so that it's placed just before the code that calls the title and entry meta

    this is because the title tags (h2) are formatted with a clear: both;

    try:

    <?php the_post_thumbnail(array(120,90), array("class" => "alignleft post_thumbnail")); ?>
    			<h2 class="entry-title<?php if( has_post_thumbnail() ) echo ' with-thumb'; ?>"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

    and to style.css (hopefully in your child theme of Twenty Ten - http://codex.wordpress.org/Child_Themes ) add:

    h2.entry-title.has-thumb { clear: none; }

    untested

    - please post a link to your site if you need further suggestions.

  3. NintendoStar
    Member
    Posted 1 year ago #

    Hey, thanks for posting a possible solution but it didn't seem to have any effect and the layout remained the same.

    Here's the URL: http://www.zapcannon.com

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

    the suggestion assumed that you add the thumbnail code before the title; just now, the thumbnail seems to be before the content.

    here is the coding in context ot the inflicted part of loop.php:
    http://pastebin.com/JFKJxGgf

    and you need to add this to style.css:
    h2.entry-title.has-thumb, .entry-content.with-thumb { clear: none; }

    not quite as your layout idea, as the text would float back to the left below the image.

    to get it exactly as your layout, you would need to narrow the post div if there is a thumbnail; for instance add the .with-thumb css class to the post div and move the thumbnail code to before the title(example: http://pastebin.com/pgUmuTKg ), and add these styles to style.css:

    .with-thumb .entry-title { clear:none; }
    .with-thumb .entry-content { clear: none; margin-left: 144px; }

    plus optionally:
    .with-thumb .entry-utility { margin-left: 144px; }

  5. NintendoStar
    Member
    Posted 1 year ago #

    "the suggestion assumed that you add the thumbnail code before the title; just now, the thumbnail seems to be before the content." - Don't worry, that's a change I made after your suggestion. At the time of asking the thumbnail code was before the title. I was just playing around afterwards to see if I could get anywhere.

    I will give your latest suggestion a try and update you on the situation. Thanks again for the help you're providing, it's much appreciated. :)

  6. NintendoStar
    Member
    Posted 1 year ago #

    I have added the code you suggested to the style.css and moved the thumbnail code before the title, how do I add the .with-thumb css class to the post div?

    Apologies I'm new to this.

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

    how do I add the .with-thumb css class to the post div?

    http://codex.wordpress.org/Function_Reference/post_class

    this is already implemented in the suggested new code:

    <div id="post-<?php the_ID(); ?>" <?php post_class((has_post_thumbnail()?'with-thumb':'')); ?>>

    was:

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

    explanation:
    this code (a ternary operator http://php.net/manual/en/language.operators.comparison.php ):
    (has_post_thumbnail()?'with-thumb':'');
    basically translates into:
    if this post has a thumbnail - output 'with-thumb' - otherwise output nothing.

  8. NintendoStar
    Member
    Posted 1 year ago #

    That's brilliant! I've done it, thank you!

    Last quick question, how do I shorten the gap between the thumbnail and the post? Where is the css code located for thumbnails?

    http://i50.tinypic.com/10i89i9.jpg

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

    the distance is set in the img.alignleft style:

    .alignleft,
    img.alignleft {
    	display: inline;
    	float: left;
    	margin-right: 24px;
    	margin-top: 4px;
    }

    to reduce this for your posts with thumbnail, add this to style.css with your other styles:

    .with-thumb img.alignleft { margin-right: 10px; }

    and adjust the margin in here to 130px:

    .with-thumb .entry-content { clear: none; margin-left: 130px; }
    .with-thumb .entry-utility { margin-left: 130px; }
  10. NintendoStar
    Member
    Posted 1 year ago #

    Thanks for that! You've been really great.

  11. taniab
    Member
    Posted 1 year ago #

    Hi, I'm also trying to get the post titles to appear next to (rather than above) the post thumbnail on category and archive pages. However I cannot find where the post thumbnail is being called from... I don't seem to have the code mentioned above in my child theme loop.php???

    Here's one of the pages where I'm trying to get this working (you can see titles are showing above the thumbnail):
    http://lovelybaires.com/wp/category/tours-and-activities/

    Any help would be hugely appreciated! Thanks.

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

    I don't seem to have the code mentioned above in my child theme loop.php

    what code do you have in loop.php?
    (for posting code, see: http://codex.wordpress.org/Forum_Welcome#Posting_Code )

  13. taniab
    Member
    Posted 1 year ago #

    Hi, heres the pastebin link to the code in my child theme loop.php:
    http://pastebin.com/pTJL6LAw
    Thanks.

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

    where is the image coming from?
    are you using a plugin to add the image to the excerpt?

  15. taniab
    Member
    Posted 1 year ago #

    Ah... okay... yes, it looks like there is a plugin controlling the excerpt. Sorry to use your time for such a simple fix. But you've really helped so thanks muchly. I've removed the plugin and have altered the php code to achieve the desired results. Thanks again.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.