Image tag hell and the power of programming

by Seanba on December 20, 2009

I don’t fancy myself any type of graphic designer or anything but I have at least studied some of the concepts and I know what CRAP stands for. I try my best to bring what little experience or talent (yeah, right) I have in this arena to make everything I write just a little bit less sucky. Ever ask for a spec from a co-worker only to receive an email of text diarrhea? Well, I don’t do that.

Hmmm … crap and diarrhea in the first paragraph? Great starter, no?

Anyway, even though I’m a complete neophyte to owning and maintaining a blog or website or domain or anything intertubes-based, I do try to layout my writing in a fun way that keeps my non-existent readers reading, and breaking up content with a contextual image or two is a good way to do that.

frak

But one thing I wasn’t prepared for is how much of a clusterfrak this can be. And by the way, isn’t Battlestar Galactica absolutely wonderful for giving us a new form of profanity that isn’t (yet) profane?

First off, WordPress is a wonderful blogging platform (or so says the new guy) but I just can’t bring myself to use their online editor to do anything, particularly importing and placing images. Programmers like to flow, and that just isn’t going to happen with any kind of web tool.

A better option: Windows Live Writer

Thankfully, Microsoft provides Windows Live Writer, a free WYSIWYG editor that has made my blog life a lot easier*. It supports all popular blogging platforms and allows me to place my text and images and links, using the styles and themes employed by my blog and, get this, it even uploads all my images to my site automagically. No more clumsy importing into WordPress multimedia libraries just to see if an image works for my post.

Sounds good … but then I looked at the HTML it produces for my image tags (I formatted the HTML to look at least passably readable):

<img

  style="border-right-width: 0px;

         display: inline;

         border-top-width: 0px;

         border-bottom-width: 0px;

         margin-left: 0px;

         border-left-width: 0px;

         margin-right: 0px"

  title="my image title"

  border="0"

  alt="my image title"

  align="right"

  src="path/to/image-file.jpg"

  width="256"

  height="128"

/>

What the frak? I’m a complete noob at this but even I can see at least 3 problems:

  • It uses deprecated attributes (align and border).
  • The title and alt attribute values are the same.
  • Look at all that hideous inline styling! Dude, that’s what my CSS files are for.

Don’t get me wrong, Live Writer is pretty cool, but now I was forced to go into the source HTML and edit the <img> tags by hand to get rid of the old junk, use title and alt as intended, and reference my CSS class. That’s not too horrible, I guess, but it messes with my flow, you know?

So here I am thinking I’m a standards-compliant big shot, bragging to, like, the only subscriber of this blog so far about my improved mad skillz and then he brings up my blog on Google Reader:

Missing align tag for feed readers

Great. Did you know that feed readers like Google Reader couldn’t give a frak** about your style sheets? Being a total knob I was so preoccupied with the look and feel of my site in a browser that I didn’t even bother to check.

So I could go back to using inline styling, even though that feels a bit icky, but I found that doesn’t work well for mobile feed readers, like on my iPhone:

Still looks bad with align tags

Yuck. In cases like this I’d rather just have my images be treated as inline with no attempt at alignment. And miracle of miracles, despite what the perils of programming has taught me to expect, that is actually pretty easy to accomplish:

To get them to display properly in a feed reader, all you have to do is set up your img reference in a separate paragraph in your post editor, but you also need to make sure that it appears directly before the text that you want it to sit next to.

Many thanks go to Chris Pearsons for that elegant solution to my problem. Now I can go ahead and edit my <img> tags as I want, and further, by wrapping them (or their parent <a> link tags) in an enclosing <p> tag I can have them appear exactly as I’d like on my website yet inline when viewed through a reader that ignores my custom style sheets.

That’s great, but what about flow?

Most of the time, Live Writer is a great tool for blogging while in the zone, but having to stop to view and edit the HTML source by hand is a giant pain, and I often find myself manipulating the wrong element or attribute by mistake.

But wait, I’m a programmer. I can do something about that.

Thankfully, the developers behind Live Writer have made their product extensible through plugins, and it really was as easy to roll my own as they say. (I found this Hello World example to be helpful too.)

So after a bit of mucking about I was able to process all my images with a custom C# form I made. It does require me to highlight a section of HTML that is well-formed Xml code, but I just select the whole post and run it through my plugin anyway. I also added a tool that will take a selected piece of HTML and wrap a paragraph tag around it – handy for having those images appear inline in feed readers.

It’s not ship quality, and I could certainly put more effort into this, but for the short time I worked on it I get the results I need with a much smaller hit on my flowy zoneness.

My plugin form

Nice. This is the kind of stuff that really turns my crank, or floats my boat, or whatever verbs my metaphor as a programmer. To cite the 80/20 rule, I find that just about any tool or process out there might get you to 80% of what you want. Programming is about getting that other 20%, and I love the confidence and independence that comes with that. It’s the power of programming.

For completeness, the C# class library solution for this plugin can be found here, with the lone DLL available here. I doubt I’ll do any further work with this, but should the need arise I’ve got this small effort, like all my coding adventures, under source control.

* Thanks to Scott Hanselman for recommending Windows Live Writer, and a whole bunch of other tools.
** Seriously, I promise to give this “frak” thing a break.

Update: Well what do you know? The original title of this post was "<img> tag hell and the power of programming". Guess which famous feed reader tried to make an image out of that? 🙂

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: