By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,624 Members | 2,179 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,624 IT Pros & Developers. It's quick & easy.

Gallery of images and alignment

P: n/a
I've written a number of "image gallery" pages before, but I'm trying
to do something a little different.

All the images are rectangular (these are just pictures from my
camera), and the thumbnail images I have are uniform in size in the
sense that the longest dimension is fixed, and the shortest dimension
is fixed. That is, if it's a horizontal image, the width is X, if
it's a vertical image, the height is X.

I used to create galleries like this by creating a table, all the
table data elements were set to a fixed size so that there was some
nice white space around each image, and each image is centered within
the table data.

Doing this looks fine, but it seems to me that, coming from a purists
perspective, that limits the user in width of of the browser. In
other words, if each table data is 200 width, then using 640x480 as a
lowest common denominator says that I can only have three thumbnail
images across.

What I'd like to do is create a virtual box around each image so that
the box size is, for example, 200x200 pixels. Whatever... some box
known to be larger than the thumbnails, but uniform in height and
width. The idea is that the page has a uniform appearance - images in
a row are aligned in their center, even though some are vertical and
some are horizontal, and images in each column (these are not table
rows and columns, just boxes that will get aligned that way) will be
aligned on center even though some are vertical and some are
horizontal.

Using my example, then, the browser would ideally show three images
neatly in a row at 640, but if the user expands to 800 or more, it'll
show 4 in a row, 1280 would show 6... this is supposed to be the
design ideal for HTML, yet I can't figure out how to do it neatly with
pictures.

I even tried each image in a separate table, but not only is that very
undesireable (tables kill rendering times, and we are talking about
over 100 images), but it doesn't work - neither NS or IE is rendering
multiple tables in a row. I might find a way to avoid this (<nobr>
maybe), but then the browser doesn't know when it *should* break.

Is there some way to do this? Maybe with stylesheets? For image,
obviously width and height don't work, because that resizes the image.
Padding and margins don't work, because some images are vertical and
some are horizontal - the left and right padding for a horizontal
image would be smaller than a vertical image - so it's not just white
space, consider it uniform spacing on centers of the images.

I could simply look at the size of each image, but I'm writing a perl
script to write the HTML, and it'd be nice to keep it more generic.

TIA,
Fred
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Fred wrote:
I've written a number of "image gallery" pages before, but I'm trying
to do something a little different.

All the images are rectangular (these are just pictures from my
camera), and the thumbnail images I have are uniform in size in the
sense that the longest dimension is fixed, and the shortest dimension
is fixed. That is, if it's a horizontal image, the width is X, if
it's a vertical image, the height is X. I could simply look at the size of each image, but I'm writing a perl
script to write the HTML, and it'd be nice to keep it more generic.


Do you have captions? If not:

img {vertical-align:middle}

<img> <img> <img> ...

Maybe with margin to make them as wide, if you wish.

If captions, wrap them to divs that have at least common height.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Image Gallery</title>
<style type="text/css">
div {float:left;margin:0.5em;}
div div {height:200px;float:none;}
div div.caption {height:2.5em;overflow:auto;}
/* assign width to some of them to get them similar sized*/

/* this so that axample images aren't needed:*/
img {background:blue;}
</style>

<div><div><img width="100" height="200"></div><div
class="caption">caption</div></div>
<div><div><img width="200" height="100"></div><div
class="caption">caption</div></div>
<div><div><img width="140" height="140"></div><div
class="caption">caption</div></div>

Or something like that. An example:
http://www.student.oulu.fi/~atlas/ku...003/index.html

More you can find googling back some weeks, there was talk about this not
long ago.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä
Jul 20 '05 #2

P: n/a
Fred wrote:
I've written a number of "image gallery" pages before, but I'm trying
to do something a little different.

All the images are rectangular (these are just pictures from my
camera), and the thumbnail images I have are uniform in size in the
sense that the longest dimension is fixed, and the shortest dimension
is fixed. That is, if it's a horizontal image, the width is X, if
it's a vertical image, the height is X.

I used to create galleries like this by creating a table, all the
table data elements were set to a fixed size so that there was some
nice white space around each image, and each image is centered within
the table data.

Doing this looks fine, but it seems to me that, coming from a purists
perspective, that limits the user in width of of the browser. In
other words, if each table data is 200 width, then using 640x480 as a
lowest common denominator says that I can only have three thumbnail
images across.

What I'd like to do is create a virtual box around each image so that
the box size is, for example, 200x200 pixels. Whatever... some box
known to be larger than the thumbnails, but uniform in height and
width. The idea is that the page has a uniform appearance - images in
a row are aligned in their center, even though some are vertical and
some are horizontal, and images in each column (these are not table
rows and columns, just boxes that will get aligned that way) will be
aligned on center even though some are vertical and some are
horizontal.

Using my example, then, the browser would ideally show three images
neatly in a row at 640, but if the user expands to 800 or more, it'll
show 4 in a row, 1280 would show 6... this is supposed to be the
design ideal for HTML, yet I can't figure out how to do it neatly with
pictures.

I even tried each image in a separate table, but not only is that very
undesireable (tables kill rendering times, and we are talking about
over 100 images), but it doesn't work - neither NS or IE is rendering
multiple tables in a row. I might find a way to avoid this (<nobr>
maybe), but then the browser doesn't know when it *should* break.

Is there some way to do this? Maybe with stylesheets? For image,
obviously width and height don't work, because that resizes the image.
Padding and margins don't work, because some images are vertical and
some are horizontal - the left and right padding for a horizontal
image would be smaller than a vertical image - so it's not just white
space, consider it uniform spacing on centers of the images.

I could simply look at the size of each image, but I'm writing a perl
script to write the HTML, and it'd be nice to keep it more generic.

TIA,
Fred

Consider this:
http://www.vladdy.net/demos/gallery.html
--
Vladdy
http://www.klproductions.com
Jul 20 '05 #3

P: n/a
In comp.infosystems.www.authoring.html Vladdy <vl**@klproductions.com> wrote:
Consider this:
http://www.vladdy.net/demos/gallery.html


Neat. As long as all the pics are the same size (I crop my thumbnails),
that'd work nicely.

--
_Deirdre http://deirdre.net
"Ideally pacing should look like the stock market for the year 1999, up
and up and up, but with lots of little dips downwards...."
-- Wen Spencer on plotting a novel
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.