Image alignment in the new wordpress.com

Posted on April 15, 2008 by timethief

18


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 size-full 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