Blah, blah, blog.
Adding pictures to ‘text’ posts on Tumblr.

Pictures hot-linked from other sites.

I’ve just noticed a whole bunch of people hitting my blog seeking information on how to insert pictures into ‘text’ posts. Therefore, in the spirit of being an all around good guy I thought I’d write something.

First of all I’m guessing that what people really want to do is insert a picture that is hosted somewhere other than on Tumblr into a post, because Tumblr makes it very easy to upload / insert pictures while editing. So easy that I’m going to say no more about it. To read about hosting pictures on Tumblr, see this post.

Secondly, the ‘fine detail’ of how to do it will vary depending on where the picture is hosted and I’m not familiar with every hosting site on the web; so I’m going to confine myself to one I am familiar with: Flickr. Here’s how I do it:

So, I’m writing away, “blah, blah, blah…” when I decide that I want it add one of the many excellent pictures that reside in my Flickr ‘photostream’… First of all I need somewhere to put the picture, so I finish the sentence and add a couple of blank lines. What I’m after here is something that goes:

Text.
blank line
Picture
blank line
More text.

Next, I’m off to Flickr to find my great work of art. Having located it; there is a button, above, labelled “Share this”. Clicking it opens a ‘drop down’ menu with a bunch of options on it. I’m interested in the one called “Grab the HTML/BB Code”.
Clicking this option reveals a box with some HTML, another ‘drop down’ with some sizing options and a couple of ‘radio buttons’ to toggle between HTML and BB code. I prefer to use the “Medium 640” size so I select that and it generates the appropriate HTML in the box.
I copy the HTML then paste it into my blog post.

Here comes the science.

The HTML looks a bit like this:

<a href="http://www.flickr.com/photos/
steve_tilley/1234567890/" 
title="Blah by Steve Tilley, on Flickr">
<img src="http://farm5.static.flickr.com/
123456789012345_1a2b3c4d5e_a.jpg" 
width="596" height="640"
alt="Blah" /></a>

I edit the code, changing the ‘width’ attribute to 100% and deleting the ‘height’ attribute i.e.

<a href="http://www.flickr.com/photos/
steve_tilley/1234567890/"
title="Blah by Steve Tilley, on Flickr">
<img src="http://farm5.static.flickr.com/
123456789012345_1a2b3c4d5e_a.jpg"
width=100%
alt="Blah" /></a>

This makes the browser resize the picture so that it fits the width of your blog post. Deleting the ‘height’ attribute makes the browser maintain the picture’s ‘aspect ratio’ so that, for example, long and thin pictures stay long and thin. An added bonus of this approach is that should you ever change the layout of your blog any pictures will automatically adapt to any new size constraints. There is, however, a bit of a judgement call to be made here: a very small source image isn’t going to look good when ‘blown up’ to fit in a very large space. On the other hand, large images contain a lot of data; but what’s the point of transmitting all that data only to throw most of it away and compress the picture down to a ‘thumbnail’? Now you know why I use the ‘Medium 640’ size - it’s quick to transfer and still gives me a fair degree of ‘wriggle room’ for when I get around to my intended redesign.

Now there are other ways of doing it but Flickr doesn’t like them, doesn’t support them and has, in the past, changed their site so that they no longer work. Doing it this way is 100% kosher and supported.

One other thing to consider is ‘dependency’. In order to display a Tumblr page containing hot-linked images, your browser has to fetch the text from Tumblr and the pictures from somewhere else (Flickr in the example I’ve been using). But what happens if that other site is ‘down’? In that case the picture is displayed as a ‘broken link’ icon (usually a little red “x”, or an image of a torn picture). So you should be aware that hot-linking makes your Tumblr site dependant on the site that is hosting any hot-linked pictures. This is another reason I use Flickr: it’s pretty dependable.

Finally, it is probably worth mentioning the dreaded “grey squares”. These certainly freaked me out the first time I created a post containing hot-linked pictures.
“O.M.G. - what’s with these grey boxes; and where have my pictures gone???”
I calmed down and had a think….
The first thing I noticed was that my actual blog did contain the pictures. It’s easy to forget that there are two different ‘views’ of a Tumblr blog - the ‘dashboard’ view (that blog authors see) and the published blog (that the outside world sees). As a blog author, one tends to work almost exclusively in the ‘dashboard’, so it’s little wonder that people freak!
The next thing I noticed was that these grey squares are links - click them and the picture appears (sometimes after displaying a series of “…”s).
It all seemed to fall into place then. The way I see it, there are two problems here:

  • Copyright.
  • Performance.

Copyright.

When you embed a picture that is hosted by Tumblr, the system processes the image into various different sized copies - one of which is used in the ‘dashboard’ view. However, I guess that making / storing re-sized copies of hot-linked images may be a breach of copyright and lead to legal problems - a good reason not to do it.

Performance.

Suppose your dashboard view contained a whole bunch of hot-linked photo’s. Now suppose the sites hosting those photo’s served them up really slowly - it would appear as if Tumblr was responding poorly, while in fact you are just constantly having to wait for other sites to respond. Using the grey square approach mitigates against that sort of problem.

(Disclaimer: I have no connection with Tumblr (other than as a ‘user’) so the above is just a guess. However, I’ve been around the interweb for quite some time, and I do write software for a living - so it’s an ‘educated’ guess.)

And that’s about it - simple!

(Not quite what you were looking for? Try here.)

  1. gofuckyourselfandwaitforme reblogged this from stevetilley
  2. uglyandheartless reblogged this from stevetilley
  3. songbirdgirl2 reblogged this from stevetilley
  4. barefoot-luffy reblogged this from stevetilley
  5. sherlockshell reblogged this from stevetilley
  6. orangesketch reblogged this from stevetilley
  7. ladysomnambule reblogged this from stevetilley