Saturday, November 8, 2008

Blogging Flickr photos (part 4)

The other day I got a comment on the third installment of this series asking how to wrap text around photos inserted in the manner I describe there.

It's a very good question. If you use either Flickr or Blogger's automatic tools, they do the wrapping for you. But if you insert images the way I recommend, in order to link to your Flickr site from your blog, then you'll have to wrap text around them (or center them) on your own.

Fortunately, it's not difficult. Start with part 3 of my tutorial on Blogging Flickr images manually.

In this example, we'll use a photo that is narrower than it is tall. We choose the Medium size on Flickr (289 x 500 pixels) and copy the automatically generated code for the image from box number 1.

Copy code for portrait oriented photo

Next, paste the code into your blog post:

paste code into blog post

Adjust the width (and remove the height) if necessary, as described in part 3. In this example, so we can really see the text wrap, I've reduced the width to 200 pixels and removed the height.

Next, after the width, add the following:

style="float:left; margin:0 10px 10px 0"

Don't forget the quotation marks at the beginning and at the end!

It should look like this:

add style to img tag

Rosie the Llama Now when you view the photo, the text that follows the image, and indeed anything else that follows the image, will wrap around to the right. Don't put anything but a space between the chunk of code and the following paragraph so that your text is aligned to the top of the image.

You can have the text wrap to the left of the image by using float:right. Remember the image floats to the side you tell it and the text goes around the other side.

You can adjust the space around the image by adjusting the values next to margin. The numbers refer to the number of pixels of space to the top, right, bottom, and left, in that order. (Start at the top and go clockwise.) So, if you float your image to the right (and the text goes to the left, you should use something like: margin: 0 0 10px 10px. Be sure to always specify px unless the number is 0.

These bits of code are CSS and are explained in detail in my book, HTML, XHTML, and CSS, Visual QuickStart Guide, Sixth Edition, published by Peachpit Press.

P.S. That's my llama! Her name is Rosie.

P.P.S. You can find the first three parts of this series on Blogging Flickr photos here, here, and here.


  1. Hi Liz,
    Nice to "find" you again! Yes we're in Scotland (not David who is had to stay behind in California to teach)...having lots of fun with family up in the Shetland Islands.....still not sure what our long term plans usual! We still own our house in Shutesbury and may well return next year...
    I'm thinking that your blog is going to be very useful for blogging how to's....and it's nice to be able to check in on life in the valley... so I'll keep you bookmarked!
    Regards to all the family

  2. Hi Liz,

    Thanks so much, really appreciate you taking the time to solve this for me. Awesome.

    Also my Mum is such a llama fan, if she had internet I'd send her the link!

    Thanks again, that's great!

    Kind regards,

  3. Hola. Liz!

    Sóc l'Emili. Ara que tenia una estona m'he posat a navegar pel teu blog. Veig que és molt complet, i sobretot, tal com em vas comentar ahir, força diversificat.

    Felicitats i ànims. Ja saps: "Que tot està per fer i tot és possible", con deia, com diu, en Miquel Martí i Pol.

    See you



More of my books