My very much past-warranty brain says that I already know how to wrap text around an image  – a simple task  – but especially as the other blogs grow – we’re trying to standardize post styling, among other things.  Big white space – asymmetrically placed images with text hugging the top and bottom margins – not desirable.

So I found a brilliant tutorial by Liz Jamieson, proprietor of Big Satchurday,  AKA http://LizJamieson.co.uk – which provides a way to solve the problem (1) via a WordPress Plugin, (2), using settings in the WordPress native image uploader and style dialog; (3) using HTML – but no CSS – as she explains, mostly visually, how to go about it. It’s the perfect style for a tutorial – you can skip ahead easily when you know you already understand a part, but wherever you get stuck theres detailed explanation.
So I suppose I should insert an image or two. The image of the cherries in the upper-left-hand corner was resized in the WP native image editor to 150 x 150 thumbnail. Using the radio button to align the image left, 10 pixels vertical margin, 15 horizontal, seemed (and seems) right to my eye.

The resultant settings look like this in the WordPress image dialog. NB: You will likely have to place the image, save it, and then edit.

"Advanced Settings" tab in the WordPress upload image dialog box

So check out  How To Add Images/Photos With Wrapping Text in WordPress via the HTML Code Window : Big Satchurday.  Liz Jamieson  definitely goes on the “how-to” and “panic-button/how-to” link lists.  There’s a screen grab of one of the relevant portions of the image dialog box – the “Advanced Settings” tab below.

Other acknowledgments – the image of the cherries is a public domain image from Wikimedia Commons; the screen grab was done with the FireShot add-on for Firefox (there’s a pro version that I plan to check out as well) by Evgeny Suslikov.

And to see if WordPress can manage overlapping image alignment, we’ll add a little Lorem Ipsum and then another  more or less arbitrary image aligned right. But before the filler text, we’ll quote Liz Jamieson, who wisely advises against trying to wrap an image without enough text. It’s roughly analogous to attempting to gift-wrap one volume of the Encyclopedia Britannica with a man’s handkerchief.  It won’t end well.

If the image you select is too large, it won’t look good when text is wrapped around it (because it will take up all the available horizontal space on the screen leaving your text nowhere to go, and therefore it won’t wrap). To safeguard against this, your image should not be wider than say, 300pixels.

"Four Freedoms" Flag, ca. 1943

I’ve quoted Ms. Jamieson in blue because I don’t yet know how to work in a blockquote tag or indentation across  from an image.  So here goes with another image on the right, again using the easy way out of the upload  image dialog. While it worked out the way I’d intended, again WordPress somewhat idiosyncratically requires that one select and place the image, save it, and then reopen and edit it. Only on the second try did the right-alignment take.

I’ll go over Liz Jamieson’s other techniques (via HTML, and via plugin) in coming posts.

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!

 

Via Inkscape Galleries.

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!

 

Possibly related posts: (automatically generated)

• Related posts on lunatic studios
• WP Robot 1.2 – Better Than Ever
• wp robot – is it the ultimate autoblog plug-in?
• blogging tips – 5 ways to improve your adsense earnings

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!

 

This post gives me a legitimate reason for showing you more of Mappery’s easily searchable cartographic treasures. Since the site is populated with user contributions, we thought it fair to bring to your attention Mappery’s heavy hitters. Meg comes in as the leader, with 963 maps posted.

Kuala Lumpur Transit Map - selected by Megan on Mappery.com

After the jump, more maps from Mappery.com. Picked at random for beauty and novelty.

Here’s a selected gallery of Megan’s contributions to Mappery:

baghdad-sectarian-divisions-map

◄ Back

Next ►

Picture 1 of 10

Here’s a selected gallery of Brigid’s contributions to Mappery

afghanistan-economic-and-land-use-tourist-map

◄ Back

Next ►

Picture 1 of 6

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!

 

A flying squirrrel from the “Mammals” category; a “Phaeton Butterfly” from the “insects” Category,  and a beautiful, wide-ranging section on graphic ornament

Some of those examples, and a few more:

.

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!

 

While you’re there, don’t miss Randa’s portfolio.

Evernote lets you save all the interesting things you see online into a single place. Access all those saved pages from your computer, phone or the web. Sign up now or learn more. It's free!