1 Definitely solves a problem.

I generally don’t like the idea of using Javascript to control presentation; but I’m not a purist so much so that I cannot see the benefit of this technique. The only question I have: How do we make this degrade in a manner that does not make the page unusable? Is it preferable to float an oversized image and create some ugly word-wrapping—or to not float a small image and wonder where the text went. I imagine the answer is likely tied to the specific design, but I’m sure many have their opinion on what is preferable.

I’ve been working with mootools a bit more than Prototype these days, and I’m thinking about doing something similar to work with mootools.

Great idea; great tool, and a well-written article to bring it all together.

posted at 12:56 pm on September 25, 2007 by Brian Crescimanno

2 If I Told You You Had a Beautiful Figure

Aaron thank for great article the idea is brilliant! “Let’s face it, images are a pain in the ass.” I fully agree with You laying out images consistently within a design is difficult. It’s interesting to read ideas, and observations from someone else’s point of view…makes you think more. Regards

posted at 01:15 pm on September 25, 2007 by Dave Black

3 A bad practice.

Iny my opinion, that would be a bad practice for several reasons:

- visitors without javascript would get a messy page - a page edited in CMS via a WYSIWYG editor woud be displayed differently that one displayed to the visitor, therefore it would be hard to edit it for style/formating errors

But aside for that, it’s not all that bad :)

posted at 01:46 pm on September 25, 2007 by Bart Szczecinski

4 Interesting, but Hackish

The hack is not that you’ve used JavaScript to correct HTML/CSS problems. The hack is that you’ve put the burden on browsers to correct theoretical content problems originating from the server.

There are so many ways to tackle content management, from big to small. Anyone who wants to sell image formatting training wheels to their clients really ought to implement them server-side—if not with a full-blown CMS, at least with some kind of custom script (e.g. PHP GD). I laud the band-aid practicality of your solution, Mr. Gustafson, but it’s far from best practice.

posted at 02:24 pm on September 25, 2007 by Flippant Pixel

5 Hackish, sure--but that's our world sometimes

I think you’re absolutely right that using something like this is not something to file under “best practices,” but we’ve got to realize that not everyone gets to work on projects where best practices can be applied. Client budgets, and even client mandate sometimes prevents the optimal solution from being used—it’s always good to explore options for when those situations arise (and, in at least my own personal experience, they arise fairly often).

posted at 02:45 pm on September 25, 2007 by Brian Crescimanno

6 It's not bad practice

In response to Brian and the others above, go to the demo page and disable Javascript. The page is just as usable, it looks fine. It’s just not as elegant in terms of widths and wrapping content.

Implemented well this solution does degrade and I think it’s a very useful tool for certain situations where clients don’t have a complex CMS solution, but still need the ability to add different figures in different scenarios on their site without worrying about layout.

I can understand the server side argument, but I am sure there would be cases in reality were this solution might be preferred for one reason or another.

posted at 02:54 pm on September 25, 2007 by James Bonham

7 Untitled

Wow, this is exactly what I’ve been trying to do ever since I started designing (and coding) for my blog. I wrote my own script to handle this problem on my blog, a bit messy, but your code is way much cleaner and flexible.

However, there is one problem, the script doesn’t seem to check whether the image (figure) fills up how much portions of its parent column if the column resizes.

Let’s say, the column (div, for example) has a width of 50%, assuming it takes up 200px of the page. The figure in that column is probably 100px, so the script applies ‘half-col’ to it. When I resize the browser window, the column resizes, so the figure is not ‘half-col’ anymore, right?

I hope you get my idea…

posted at 04:34 pm on September 25, 2007 by Lim Chee Aun

8 Please don't leave this in the client

I wholeheartedly agree with Bart and Flippant. If you’re running a WYSIWYG CMS, use Prototype to layout the image nicely while the user is adding input, but catch the image dimensions and make the correction when the HTML is posted. This can be done: 1) With a backend image utility in the CMS, which you likely already have if your users can upload images. That’s super-crossbrowser, foolproof, no need for a framework, but won’t display pretty until the user previews/posts. Or, 2) By reading the image dimensions and adding the correct class in the background with JS, before the content is posted. A framework is not necessary for this, either.

The visitor shouldn’t have to wait on a framework for basic layout to render. This is a bad habit to start, especially for n00bs.

posted at 05:54 pm on September 25, 2007 by Charles Phillips

9 FYI

The comment preview is showing me linebreaks

like this

but they’re not getting posted!

posted at 06:06 pm on September 25, 2007 by Charles Phillips

10 Dyslexic Transposition

I laughed when I read the first section about “dyslexic transposition”. This does happen all the time, as I work with designers who provide graphics according to specifications—sometimes. Usually it’s then up to me to re-slice from PSD.

As much as I like this method, I don’t have a good reason to use it yet. But I can’t wait!

Thank you.

posted at 06:28 pm on September 25, 2007 by Kevin Davison