Discuss: If I Told You You Had a Beautiful Figure…
by Aaron Gustafson
- Editorial Comments
12 Great until the content editor fancies themself as
This looks to be an interesting technique, although I’m not sure it will find its way into a project yet. My initial readthrough has given me some ideas though.
The problem comes when the content editor also fancies themselves as a designer and wants that huge image to be floated. They just aren’t going to accept that it looks crappy that way.
Maybe I work with the wrong sort of clients :)
posted at 09:16 am on September 26, 2007 by Pete Eveleigh
13 Nice article
The reality of working in the web industry is that often sites are developed quickly and changed frequently, so there scope for designing the perfect CMS is often simply not there.
I think this is a useful technique, not only for when front end developers are working with an inflexible CMS, but also for prototyping new functionality without bloating the CMS itself.
posted at 03:24 pm on September 27, 2007 by fritz from london
14 Why not?
At the beginning, I spent many times to manage my “float”, in CSS, write scripts on PHP whith GD library. But if I was a noobs, I would have certainly used FigureHandler.
In other part, when developers say that we have to be afraid about users would disable js, I agree with them like I’m against that mind!
We have to envisage all client configurations, although we are in the reactive web time, when users build himself his interface on your site. We can say that web pages look alike web applications.
So, the js can become one of principles in our development or a standard of web!
posted at 02:22 pm on September 30, 2007 by Laura PLEXI
15 Where is this happening?
Maybe I’m mistaken, but where is this work being done? I’m assuming a CMS or some type of admin. area that is CMS-like. I don’t see anything wrong with either case requiring JavaScript to administer a site (but not for regular visitors to use it). I don’t see anything wrong with having the CMS/admin. using Prototype to define the figure like in the example, and then saving the results to a database for all users to see that result. For any good design (that is everything except a liquid design where the designer forgot to include a minimum width) this should work with all cases.
Now, if you don’t have a CMS or an admin. area and you’re telling clients to manually edit HTML files and upload them to the server… I think you have other concerns going on then how well a layout will look with or without JavaScript. :p
posted at 01:20 pm on October 2, 2007 by Brian LePore
16 To Brian LePore
You’ve got it all wrong – the JavaScript is used at the visitors page, and if the visitor dosn’t have JS turned on the page will look different than expected.
posted at 08:17 pm on October 8, 2007 by Bart Szczecinski
17 Server side please!
I wholeheartedly agree with comment #8 by Charles Phillips. This problem should definitely be solved server side. It can be done perfectly in the way Charles describes.
Using JS to fix layout issues goes completely against the principle of discretely separating the three layers (markup, css, JS).
posted at 09:41 am on October 10, 2007 by Marco van Hylckama Vlieg
18
Many of you have brought up that this should be done server-side and, while I agree that it could, it would need to be done in the most flexible way possible (which many won’t bother with). You see, what this script allows quite easily is redesign; a designer can change page layout — of an entire site or section by section — without ever having to touch the back-end. It also allows for different columns to receive different figure classification schema.
If this were done on the content-entry side (as some have suggested), the image classifications would be stored in the database (or XML or whatever) along with the rest of the content HTML. That means that if the design were to shift to a wider column (for example), the figures that once occupied a half-column, may no longer continue to do so, making the classifications hard-coded in the HTML incorrect.
The only way to truly do this flexibly on the back end (as far as I can see) is to leave the classification step to be handled by a function which pre-processes the page output, dynamically assigning the classifications to each figure based on values obtained from the CSS for that page. Essentially, the script would need to go through the same steps as the JavaScript, but it would need to be able to go the extra step of determining applicable CSS rules to obtain the column width. Thankfully, most server-side languages support some means of DOM walking (albeit sometimes in less-than-desirable ways), but, as far as I know, none have a CSS parser, so you’d likely need to write that as well. From a server overhead point-of-view, I imagine that preprocessing would be fairly costly (most DOM-related stuff is), but the output for each page could be cached, reducing it somewhat.
If you’re interested in doing something like this, goodonya. I’ve built you a pretty decent roadmap for implementation, but I don’t imagine it will be easy to get it up and running. That said, I wish you luck…it would be yet another great tool for enabling designers to create consistent layouts with figures.
posted at 02:00 pm on October 11, 2007 by Aaron Gustafson
19 Facing Figures
You’ve probably noticed that I have not created any styles to float the figures left or right. I don’t think presentational information belongs in the markup (at least not by default).
I agree with this statement. With figures, however, there is one piece of markup I add that is presentational. I do so because I think the benefits are great, and no flexibility is lost when it comes to a redesign.
As with any design involving images one must consider the direction the figure is “facing� — it may lead the eye to the right or to the left, or neither.
Figures that “face� left or do not matter receive no extra markup. The smaller (relative to the column) ones that don’t matter I float right because they sit better in the text (for left-to-right languages). Smaller left-facing figures float right because they bring the reader’s eye back into the page.
Right facing figures receive an extra class: alt. This class can then be used position the figure so that it points into the page. For example:
- .figure.half-col, .figure.third-col { float: right; }
- .figure.half-col.alt, .figure.third-col.alt { float: left; }
Were the markup going to be translated between left-to-right and right-to-left languages both left and right-facing figures would need their own distinct class, while neutral figures would be left alone.
posted at 02:47 am on October 14, 2007 by Ben Spaulding
20 PHP Approach
My approach to this (assuming you have server side scripting) would be to use a php statement like –
<?php
$image_filename = ‘../assets/images/$imageUrl’;
if (file_exists($image_filename)) {
list($w, $h) = getimagesize(”$image_filename”);
print ‘<img class = “large_image“src = “’;
print $image_filename ;
print ‘width = “height = “$h” >’;
print “$enterDescription”;
} else {
print ‘Sorry, no image available’;
}
That would test for the name and file size. You could include this as a class file so that your web author would only have to write –
<?
// /// DEAR EDITOR – Please enter these fiese fields ///
$imageUrl = enter File Name;
$desciption = enter Description;
$title = enter image title;
$alt = eneter you alt description here;
// ///// THANKYOU ///// //
include “imageTestClass.php”; /* just include the name of the file with the php above */
?>
Then your web author only has to edit enterFileName (p.s. I wrote that code off the top of my head, so there may be bugs, but the basic idea is there). Then, depending on $w and $h values you can give various elements a class to resize them. I might test this properly and write an article.
posted at 07:56 am on October 23, 2007 by Aaron Newton
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)
11 Why not use two sets of styles
Have two sets of styles apply a class to the body, one with floats if js is disabled and if it is enabled add a class to the body like hasJS and then set some different styles. This would make it more usable for non-js people.
posted at 11:37 pm on September 25, 2007 by jon i