On Tuesday 15 May 2007 19:00, Frédéric wrote: > But I think I found a way to do that: with widgets. Arguments given to > the widget display() method (or even to the __call__() one, which is > more intuitive for a non-developper) can be the photo id, its size and > so. The widget will just expand the complete url, as you suggested. > > This has an other benefit: I can switch from a widget to another, > depending if I'm in display mode or in editing mode, where I need to add > links :o)
Ok, this solution is now implemented, and works great. Now, I have another
question...
As the images are dynamically resized (using PIL), they may not match the
exact ratio defined in the template. So, when displayed in the <div>
containing the image, they are top or left aligned. I would them to be
centered. And as I use absolute managing, this is very hard to align them
vertically (there are CSS-based solutions, but not very clean, and
navigator dependent).
My first idea was to create an image with the exact ratio defined in the
template, and then paste the resized image in it (centered), adding alpha
channel to complete. It works fine.
Another suggestion which has been made on a python list is to dynamically
create the CSS with the absolute position, modifying them according to the
real (re)sized image dimensions.
My page template looks like:
<head>
<style type="text/css">
.photo {
position: absolute;
}
#photo_0 {
top: 50px;
left: 150px;
}
#photo_1 {
top: 350px;
left: 100px;
}
</style>
</head>
<body>
${photo.display(params['photo'], pos=0, w=600, h=250)}
${photo.display(params['photo'], pos=1, w=400, h=200)}
</body>
(CSS and html are described in the same file, because it will be easier to
deploy when someone makes a new template. As it is very simple, I don't
think it is a problem).
The photo widget template looks like:
<div id="photo_${pos}" class="photo">
<img src="/getPhoto?name=${value[pos]}&w=${w}&h=${h}"/>
</div>
Is it possible to also define the CSS in the page template as a widget?
Something like:
<head>
<style type="text/css">
.photo {
position: absolute;
}
${photoCSS.display(pos=0, top=50, left=150)}
${photoCSS.display(pos=0, top=350, left=100)}
</style>
</head>
<body>
${photo.display(params['photo'], pos=0, w=600, h=250)}
${photo.display(params['photo'], pos=1, w=400, h=200)}
</body>
with a photoCSS widget template like:
#photo_${pos} {
top: ${w}px;
left: ${h}px;
}
Is it valid? Is it a good practice?
Note that I didn't (yet) find a solution to compute top/left values
dynamically, like I do for image size, throught src="/getPhoto...". But if
the CSS widget is a stupid idea, I won't go further!
PS: BTW, I started this project a couple of weeks ago, also starting to use
Turbogears at the same time, and I'm amazed what I've done already! TG has
really a very short learning curve (even if I'm far from knowing
everything), and is very appropriate for such project. Congratulation to
all TG developpers.
--
Frédéric
http://www.gbiloba.org
pgpVIBlR8MWPA.pgp
Description: PGP signature
