Wrapping Text Around Your Thumbnail Images

Written by Costa on January 7, 2010 - 12 Comments
Categories: Theme Modification Tips

WordPress 2.9 latest feature that lets users post thumbnail images in their post excerpts has certain limitations which makes me refrain from using this feature. This new feature however will be great if you are planning to use your Theme like a magazine style layout with thumbnail images fixed on a certain spot.

To make the thumbnail really presentable, there are some extra codes that you have to add in. For example, if you want to wrap the text excerpts round the image, you will have to use this code in your template files instead of the one I gave in my earlier post.

<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>

The ’200′ specifies the size of the image and the ‘alignleft’ will flush the image to the left side. Though we can specify these classes when we post our thumbnails, the text will not wrap around the image. Adding that new array will make the text wrap round the image.

However, doing it this way has 2 disadvantages. The thumbnail will always be slotted to the left and it will always be 200 x 200 pixels. If you like a magazine style layout, this will look real neat, but if you are like me, and wants your front page images to vary, then, I am afraid you will not like it very much.

Another thing to note is, this new feature only works best of you are not using a third party plugin to display front page excerpts. The default WordPress codes strips all html formatting in the excerpts, if you have any links or images on the top of your page before the cut off line, then it will not be displayed in the front page excerpts. So even if you post a different image at the top your single post page before the cut off line, the image will not appear in your home page together with the thumbnail.

Some third party plugins like the one I am using here retains the html formatting for the excerpts, thus if i place my image at the top of my post, I will have 2 images appearing tfor the same excerpt. That looks really ugly.

There are may more classes you can add to the function call in your index php file, but the one I mentioned above should do just fine for most. However if you are the kind that must have everything just because it is available, read up, Using The New Post Thumbnail Feature In WordPress 2.9 by Matthias Kretschmann.

  • Advertisements

8791db3f2734f95bca8193cc1c162c01

Article by Costa Fong

@costafong

Who loves to mod and mess up WordPress Themes.

Costa has written 557 articles here. Some are awesome, some are lame.

If you enjoyed this post, whether it's awesome or lame, consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

SUBSCRIBE NOW to receive free Photoshop Action scripts for creating beautiful eCovers.


FREE Photoshop Action Scripts For Subscribers Only. Download link is at the bottom of the article when you receive your feeds.
ENTER YOUR EMAIL

REMEMBER TO CONFIRM YOUR SUBSCRIPTION

Other Awesome Articles

  1. Display Thumbnail Images In Post Excerpts
  2. WordPress 2.9 Image Thumbnails And New Features
  3. Insert Thumbnail Images In Your Homepage Post Excerpts
  4. Better Display Of Images In your WordPress Post Excerpts
  5. Adding Thumbnails To WordPress 3 Default Theme
  6. Add Text And Image Shadows To Your WordPress Post
  7. Basic Magazine WordPress Theme
  8. 2010 2 Column Neoclassical Theme WP 2.9 Upgrade

Users who found this page were searching for:

  1. float text around thumbnail wordpress not working
  2. thumbnail image within excerpt text wordpress
  3. in wordpress, how do I get words to wrap around image
  4. thumbnails for excerpts will not move to the left side
  5. add text under an image thumbnail
  6. third style theme text not wrapping

12 Responses to “Wrapping Text Around Your Thumbnail Images”

Comments

Read below or add a comment...

  1. Mitko
    January 7, 2010 at 9:17 pm

    I like my images to be different depending on the article! Anyways I never found that thumbnail function!

    I also wanted to try front page short posts, but that doesn’t seem to work as well or I am doing something wrong?

    And third I wanna nest my comments like in here when u reply to someone, but apparently the default WP check marks do nothing and I have to modify the CSS?

    Reply
  2. Costa
    January 8, 2010 at 8:42 am

    For front page short post, if you wanna to do it manually, use the ‘more’ in your text editor. Though a slight hassle, you can have a choice of where to end your short post.

    Alternatively, you can change the < ?php the_content> to < ?php the_excerpt> in your index php. It automates the process but the default cut off is 50 words, so some words might be cut off midway. You can specify the number of words.

    Both this method strips off all html formatting so no images will be displayed in the front page.

    I prefer to use the Fancy Excerpt Plugin. It keeps all html formatting and it does not cut off words midway. Just type ‘fancy excerpt’ under Pluigin- Add New in your Dashboard and install it from there.

    Threaded comments only works with Themes that are made for WP 2.7 and above. To make your theme for work with Threaded comments, follow the instructions in this post.

    http://blogigs.com/how-to-upgrade-the-pressrow-theme-to-wordpress-2-8-compatible/

    It works the same for all themes. Might get screwed up in your first attempt so it is best to have the original files backed up first.

    OR, the easiest way out, replace your theme with one that is fully compatible. There are so many nice and free themes out there.

    Reply
  3. Mitko
    January 8, 2010 at 9:29 am

    Thank you, I actually found a partial way in the Pro Blog Design site, then manually edited the part that sends u to the middle of the page where the article continues instead from the top!

    Of course i got it wrong few times :) and my blog went off, with some strange errors, but at the end I got it!

    What’s a good font to use with Thumbnails? I see you don’t have that problem, but I sometimes get half of the sentence on the right of the Thumbnail and the other below it, and I have to rephrase to fix it.

    I’ve been trying to find all day a good looking font, but wherever I go they say stick with the safe ones that everyone has, Arial,Verdana,Tahoma etc

    Perhaps :) write an article that explains a little about the fonts and which r good ones for the readers etc! Just an idea :)

    Thanks

    Reply
    • Costa
      January 8, 2010 at 9:54 am

      Hi Mitco,

      Sorry to say, but good looking fonts are what they are, “not safe’ LOL.

      Reason being, some computers might not have those fonts installed so they will be seeing the default seriff or sans seriff fonts. Especially so for those who are using Macs. Some of their fonts are named differently even though they are the same. So the age old advise still stands. Use web safe fonts so everyone can see the same thimg

      There are CSS codes and javascrpits to display different fonts though, but I am too lazy to delve into it as Internet Explorer always screws it up for me.

      About problem with your sentences and and your thumbnails. I think it is not due to the fonts but with the image size or the paddings around th image. Reducing those values might solve the problem.

      Reply
  4. Mitko
    January 8, 2010 at 7:48 pm

    Mhm, thank you very much :) ! I did find an implementation and some MS tool but the results were horrible and I stopped messing around :)

    And you are right, since I always test on FF, and almost never on IE and other browsers it would be a problem for users that r not using FF

    Reply

Trackbacks

  1. Costa says:
    January 7, 2010 at 8:23 am

    Latest update from Blogigs.com – Wrapping Text Around Your Thumbnail Images Read all of it here http://bit.ly/7xlcsi

    Reply
  2. costafong says:
    January 7, 2010 at 8:23 am

    Wrapping Text Around Your Thumbnail Images: WordPress 2.9 latest feature that lets users post… http://goo.gl/fb/DVzE

    Reply
  3. Mitko Atanasov says:
    January 7, 2010 at 1:28 pm

    RT @blogigs Wrapping Text Around Your Thumbnail Images http://bit.ly/7xlcsi

    Reply
  4. Tweets that mention Wrapping Text Around Your Thumbnail Images | WordPress Theme Customizations -- Topsy.com says:
    January 7, 2010 at 4:25 pm

    [...] This post was mentioned on Twitter by costafong, Costa. Costa said: Latest update from Blogigs.com – Wrapping Text Around Your Thumbnail Images Read all of it here http://bit.ly/7xlcsi [...]

    Reply
  5. Gurpreet Singh says:
    January 8, 2010 at 4:03 am

    Wrapping Text Around Your Thumbnail Images | WordPress Theme Customizations http://bit.ly/4JNFna

    Reply
  6. Toni DG says:
    January 13, 2010 at 12:07 pm

    Adaptando texto alrededor de las imágenes miniatura. http://icio.us/v15lhz

    Reply
  7. uberVU - social comments says:
    January 13, 2010 at 8:14 pm

    Social comments and analytics for this post…

    This post was mentioned on Twitter by BloGigs: Latest update from Blogigs.com – Wrapping Text Around Your Thumbnail Images Read all of it here http://bit.ly/7xlcsi...

    Reply


Share Your Thoughts...