Image alignment in the new wordpress.com

By Roads

The introduction of the new wordpress.com ugrade includes a Flash-based image uploader that has resulted in some problems. As already pointed out within these pages, the image resizing protocols provided have caused some confusion and an option to use the old ‘browser uploader’ has now reappeared in response.

Looking more closely, it is clear that the code generated by the two different uploaders is subtly but critically different.

Using the browser uploader to produce a 120×160 image link, the code looks like this:

<a href=”http://energetic.files.wordpress.com/2008/03/hogsmill-valley-walk-ewell-surrey-england-by-roadsofstone.jpg” title=”hogsmill-valley-walk-ewell-surrey-england-by-roadsofstone.jpg”><img src=”http://energetic.files.wordpress.com/2008/03/hogsmill-valley-walk-ewell-surrey-england-by-roadsofstone.jpg” alt=”hogsmill-valley-walk-ewell-surrey-england-by-roadsofstone.jpg” align=”right” height=”160″ hspace=”6″ vspace=”6″ width=”120″ /></a>


Meanwhile, this is what you get using the Flash-based uploader to produce (theoretically) exactly the same 120×160 image link:

<a href=”http://energetic.files.wordpress.com/2008/03/hogsmill-valley-walk-ewell-surrey-england-by-roadsofstone.jpg“><img class=”alignright wp-image-451″ style=”margin: 6px; float: right;” title=”hogsmill-valley-walk-ewell-surrey-england-by-roadsofstone” src=”http://energetic.files.wordpress.com/2008/04/hogsmill-valley-walk-ewell-surrey-england-by-roadsofstone.jpg” alt=”” width=”120″ height=”160″ /></a>

Some observations:
* image alignment is handled differently by the two uploaders. The new style=”margin: 6px; float right” command produced by the Flash-based uploader works much better in Firefox than the old align=”right” hspace=”6″ vspace=”6″ code offered by the browser-based uploader.

I have found that the historic failure of the browser-based uploader to display image margins correctly in Firefox has always resulted in an annoying display difference between Firefox and IE7. Nevertheless, for now at least, the new float code provided by the Flash-based uploader comprehensively breaks the alignment display on my BlackBerry web browser (T-zones) unless the ‘support style sheets’ option is selected, which slows page loading considerably.

* The new Flash-based uploader leaves alt tags entirely empty, requiring the user to go back and fill them in. No hover text will be displayed until this step is manually carried out. The absence of an alt tag may cause SEO problems in Google (see this clear and helpful post by pearsonified.com for further details).

Conclusions:
1. The Flash-based and browser-based uploaders produce different image code.
2. The Flash-based uploader solves a long-standing image margin display problem in Firefox, but breaks the alignment display in minimally configured T-zones.
3. The Flash-based uploader currently leaves alt tags empty, which is likely to be detrimental to Google’s indexing of images unless manually corrected.

Recommendations:
@ Some optimisation of the coding for the Flash-based uploader and/or correction of the coding for the browser-based uploader will be required before the two methods produce entirely convergent display results.

@ The Flash-based uploader also still requires critical modification to provide the missing alt tags for images.

@ For pages generated with the Flash-based uploader, the BlackBerry display of your blog pages must also be regarded as a less reliable guide to desktop appearance than it was before.

HTH and happy blogging…

Related posts:
WordPress 2.5: Image upload problems
Inserting images full-sized in new WordPress.com
New image upload option: wordpress 2.5
Uploading and inserting image with the new wordpress.com

add to del.icio.us :: Add to Blinkslist :: add to furl :: Digg it :: add to ma.gnolia :: Stumble It! :: seed the vine :: reddit :: furl :: TailRank

18 thoughts on “Image alignment in the new wordpress.com

  1. Ohhh I see now..maybe thats why i’ve been stuck trying to align?…Im gonna check through some more links here..Thanks for explaining this clearly

  2. vjp,

    Yes, it is frustrating. I’d put the image upload/insert at about 60% complete (and that might be generous).

    You might try the procedure I’ve outlined in More on inserting images full sized at wordpress.com as it will allow you to insert images full-sized without all the new code, and in fewer steps.

    I’m working on a list of things for Matt regarding that stuff that I’ll be sending off to him shortly.

  3. I’ve been having all kinds of problems inserting images, to the point that I literally have to re-code the information being inserted. Getting the images to line up the way I intend them to is impossible. And the preview is no help, since it doesn’t show the way the images actually display.

    While I know we’re not going back to the old way of image handling, I really do wish they’d get this stuff fixed. Except when absolutely necessary, I’ve cut out putting images in my posts simply because I don’t have the time to re-code each entry.

  4. @Root
    I’m glad that Roads’ really neat post is getting lots of attention. It was needed and is certainly being used by lots of bloggers because the 2.5 upgrade came without beta testing that we know of and without any “manual” or FAQs entries.

    @Robert
    I agree that Road’s post is extremely clear. He’s a great technical writer and I’m delighted to have him on board along with Richard who also writes brilliant technical posts. :)

  5. This is a really neat post. A guy who spends more time on WP than I do could easily do a hack to correct the differences. The inline styling is really messy code in any case.

  6. @Roads,

    The alt tag certainly doesn’t work, and I have been unable to find a workaround. It doesn’t even work if you manually put it into the code. I expect we will have to wait till AutoMATTic gets around to it.

    I agree with you that there have been little changes going on since the upgrade, and the Gallery interface and functionality still needs work. There really should be some way to order, or reorder the images the way the blogger wants them instead of having to rely on WordPress. I don’t expect the Gallery functionality to change though till the next big upgrade that will follow the 2.6 dot org release.

  7. Here’s the reply I received earlier today from Nick at WordPress.com support:

    Hi Roads
    We do have a bug that is stripping out the description (which would be in the HTML in the img as a title, but isn’t).

    I’m sorry for the problem, but it is something we will be working on.

    –Nick
    Automattic | WordPress.com

  8. Yes, I received your comment and appreciate the information. I am new at all this and did not realize I could not advertise, and of course will not do so.
    Thanks for the info, Rose

  9. The functionality seems to be still undergoing change. My recollection might be playing tricks, but I could swear that the ‘gallery’ interface looks subtly different each time I go there.

    Unfortunately, no hover texts are being displayed for any of my images uploaded since the upgrade. It’s at times like these that a ‘status’ section of the forums would be really useful to keep up to date with changes and fixes that are planned and/or presumably underway.

    I tried to figure out a workaround (that’s what this site is for), but I haven’t cracked it yet. If anyone has any ideas to solve this, then I’d be delighted to hear from you.

  10. Thanks, Ian, and I saw your comments about the upgrade over on lettershome…, too.

    I had a further play on this yesterday whilst putting together a new post, and the story is developing. The code generated by the browser-based uploader has now have been revised to make it the same as that produced by the flash-based uploader. It’s good that the two methods now produce the same result, but I agree with you that it’s been confusing.

    The code I give above is therefore now a comparison of how the code used to look and how it looks now.

    The way the alt tag is produced isn’t ideal yet. Previously the alt tag was generated automatically from the file name. That was clunky, but it worked. Now the alt tag is more flexible, filled in by the user within the ‘caption’ box. But if you don’t proactively fill that box, the alt tag is left entirely blank. That means the functionality is more flexible and versatile, overall, with the critical oversight that the default state has been set up not to work at all.

    Let’s hope that glitch is corrected next.

    My experience of roll-outs of new stuff is that they typically do cause problems and consternation. They shouldn’t, but it seems they nearly always do. And, looking on the bright side, at least I haven’t had to process myself or my luggage through Heathrow’s Terminal 5… at least not yet.

    Kind regards from London, and spirits up.

  11. TT, are those recommendations for the WP people to work on, or for us? Call me a Luddite if you like, but I wish we had a way of downgrading back to the way it was. Where’s the improvement if it adds unnecessary steps and forces us to manually insert the tags?

Comments are closed.