[Catalyst] (Beginner) Plugins

[Jonathan Rockway]

>> a) Browser resizing distorts the images
>> b) The anchor for our images is the lower right hand corner and we have to
>> crop the top-left. This is because images can be of many different
>> proportions and the final layout has a fixed proportion.
>> c) The client wants the images to degrade to black on the right edge.

You can do all of this with CSS (other than pick the algorithm the
browser uses to resize the image).  Look at the CSS for HTML Slidy to
see how this is done:

http://www.w3.org/Talks/Tools/Slidy/

The fade to black is a bit less obvious, but all you need to do is
overlay a PNG with an alpha channel.


> Ouch, what an insane client...
> 
> I hope you're charging them $$$ ;-)
> 
> Anyway, what I'd do is use js to set the bg image to
> 
> 	$uri_base/images/$image?width=$x&height=$y
> 
> and then generate this image with a dynamic action. It should be
> simpler.

nothingmuch mentions that you might end up with a lot of images, and
this is certainly true.  However, if you constrain the aspect ratio, you
won't have nearly as many files.

If you don't want to constrain the aspect ratio, then you can still be
space efficient (or at least use a constant amount of space for an
infinite number of sizes).  There's an algorithm (whose name I can't
recall right now) that can generate good-looking images quickly if you
cache images of size (p,q), (p/2,q/2), (p/4, q/4), etc. (for each aspect
ratio you desire, of course).

I'll let you know if I find a reference online.  I was planning on
implementing a catalyst model or controller for storing cached images
anyway, but haven't gotten around to it yet.

Regards,
Jonathan Rockway


-- 
package JAPH;use Catalyst qw/-Debug/;($;=JAPH)->config(name => do {
$,.=reverse qw[Jonathan tsu rehton lre rekca Rockway][$_].[split //,
";$;"]->[$_].q; ;for 1..4;$,=~s;^.;;;$,});$;->setup;