Wrapping Text Around Your Thumbnail Images

by Costa on January 7, 2010

in 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.

Related posts:

  1. Display Thumbnail Images In Post Excerpts Maybe for some reasons or another, you do not like to use plugins to display images in your post excerpts. Using plugins do have limitations. For one, you cannot control the images to be displayed and the post the images to be displayed in. Doing it manually lets you...
  2. WordPress 2.9 Image Thumbnails And New Features Just logged in into my Admin panel and saw that WordPress 2.9 is available for download. Upgraded using the most convenient method, that is via the automatic upgrade. Took less than 5 seconds for the upgrade to complete. Read more on WordPress 2.9 Image Thumbnails And New Features… ...
  3. Insert Thumbnail Images In Your Homepage Post Excerpts Under normal circumstances, if you are not using a theme that comes with the the Customs Filed functions written in, you cannot insert images to your homepage excerpts. Many bloggers likes to show just a small excerpt of their post in the front page by inserting the “read more” command...
  4. Better Display Of Images In your WordPress Post Excerpts Many Wordpress users have problems displaying images in their WordPress blog if they decide to use post excerpts instead of full post in their home page. There are also many solutions and plugins available to solve this problem. In my previous post where I discussed inserting images in your...
  5. Add Text And Image Shadows To Your WordPress Post To add shadows to your text in your WordPress blog, all you need is a simple line of code. It works with all major browsers except Internet Explorer, which not too surprising. A lot of my modded themes appear different in that silly browser. Even Google Chrome, being a...

{ 2 trackbacks }

Tweets that mention Wrapping Text Around Your Thumbnail Images | WordPress Theme Customizations -- Topsy.com
January 7, 2010 at 4:25 pm
uberVU - social comments
January 13, 2010 at 8:14 pm

{ 5 comments… read them below or add one }

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

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

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

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

Leave a Comment



Previous post:

Next post: