Thumbnails with captions

J

JWS

I am trying to make a page with thumbnails pointing to
photographs. For the rudimentary first version, see
http://www.jw-stumpel.nl/test/dogu.html.

Is there a simple way to put a short caption (such as "wooden
bowls", "glass hashioki" under each thumbnail? How about longer
captions, spanning more than one line? Of course I'd like to keep
the design "elastic", like it is now.

Regards, Jan
 
C

cwdjrxyz

I am trying to make a page with thumbnails pointing to
photographs. For the rudimentary first version, seehttp://www.jw-stumpel.nl/test/dogu.html.

Is there a simple way to put a short caption (such as "wooden
bowls", "glass hashioki" under each thumbnail? How about longer
captions, spanning more than one line? Of course I'd like to keep
the design "elastic", like it is now.


Different people will do this in various ways. If this were my page, I
likely would take each image to an image tool such as PaintShop. There
you can add a caption to the image on, under, or where ever in
relation to the original image. You can add a different color or image
for the background for the text, if desired. Then you output the new
image made up of the original image with a caption added. If you use
an image on more than one page, making the caption part of the image
sometimes saves writing a lot of extra code on various pages to handle
the caption and placement of it in relation to the image.
 
J

Jukka K. Korpela

Scripsit JWS:
Is there a simple way to put a short caption (such as "wooden
bowls", "glass hashioki" under each thumbnail? How about longer
captions, spanning more than one line? Of course I'd like to keep
the design "elastic", like it is now.

There are many alternative approaches; see
http://www.cs.tut.fi/~jkorpela/www/captions.html

Perhaps the simplest one (though not necessarily the best one) is

<table align="left"><tr><td><img ...></td>
<td>Caption text</td></tr></table>
 
D

dorayme

JWS said:
I am trying to make a page with thumbnails pointing to
photographs. For the rudimentary first version, see
http://www.jw-stumpel.nl/test/dogu.html.

Is there a simple way to put a short caption (such as "wooden
bowls", "glass hashioki" under each thumbnail? How about longer
captions, spanning more than one line? Of course I'd like to keep
the design "elastic", like it is now.

Regards, Jan

You want short captions? Short captions are something I looked
into once. (I have yet to look deeply into long captions):

http://tinyurl.com/2jcs5r
 
J

JWS

dorayme said:
You want short captions? Short captions are something I looked
into once. (I have yet to look deeply into long captions):

http://tinyurl.com/2jcs5r

I now made captions using Yucca's "third method" (using divs).
This works for "long" (well, fairly long) captions, but one has to
guess a reasonable value for the height of the caption divs. Yucca
suggests 4em, and this works across a fairly large range of font
sizes, but not all.

However, with this method I cannot get your "centered as a mass"
effect. It seems I have to learn javascript...

Regards, Jan
http://www.jw-stumpel.nl/test/dogu.html
 
D

dorayme

JWS said:
I now made captions using Yucca's "third method" (using divs).
This works for "long" (well, fairly long) captions, but one has to
guess a reasonable value for the height of the caption divs. Yucca
suggests 4em, and this works across a fairly large range of font
sizes, but not all.

However, with this method I cannot get your "centered as a mass"
effect. It seems I have to learn javascript...

Regards, Jan
http://www.jw-stumpel.nl/test/dogu.html

First about the JS, why not grab the script from my setup. You
can get it at:

<http://netweaver.com.au/alt/thumbnailGalleryWithShortCaptions/boo
tnic7.js>

(Sorry, I can't tinyURL this.)

It is named after the bloke* who made it (in a thread around
about** March, April this year)

Second, I have not looked into your gallery but it looks nice
(the centring is just an extra touch). I did notice though that
you can achieve a saving in the html doc, no need to be classing
so many divs. Perhaps you can achieve the reduction by looking at
my source for the general idea)


-------------------
* "bloke" is an Australian word that means "man" and not to be
found in the International English Dictionary. The js script file
has 7 after it because it is a finely honed thing from many
earlier versions. Treat it with reverence.

** I am roughly sure of this because I used it to centre a mass
of a family member's wedding pics and I recall with great pride
and pleasure the wedding itself... <g>)
 
J

JWS

dorayme said:
First about the JS, why not grab the script from my setup. You
can get it at:

<http://netweaver.com.au/alt/thumbnailGalleryWithShortCaptions/boo
tnic7.js>

I did that, and I am now experimenting with it. Many thanks. I
found the thread about this also (http://tinyurl.com/3chdvh).

About "short" vs. "long" captions: the problem is not so much the
length of the captions themselves, but the fact that they may be
of *different* length. For instance, try to make a few captions in
your example page "long". A picture may be "stuck" (refuse to
float to the left) if the picture above and to the left has a
longer caption than the picture directly above. To cure this, it
seems necessary to give all captions the same, sufficient, height,
as per Yucca's recommendation. But this risks wasting screen
space, and the height (even when given in ems) may not be
sufficient after all if the font size is increased.

Maybe javascript can be used to make this "dynamic" also. I'll
start studying javascript anyway, because I would like to
understand bootnic's script (in particular I do not understand the
"!!" operator in the fifth line..).

Regards, Jan
 
D

dorayme

JWS said:
I did that, and I am now experimenting with it. Many thanks. I
found the thread about this also (http://tinyurl.com/3chdvh).

About "short" vs. "long" captions: the problem is not so much the
length of the captions themselves, but the fact that they may be
of *different* length. For instance, try to make a few captions in
your example page "long". A picture may be "stuck" (refuse to
float to the left) if the picture above and to the left has a
longer caption than the picture directly above. To cure this, it
seems necessary to give all captions the same, sufficient, height,
as per Yucca's recommendation. But this risks wasting screen
space, and the height (even when given in ems) may not be
sufficient after all if the font size is increased.

Maybe javascript can be used to make this "dynamic" also. I'll
start studying javascript anyway, because I would like to
understand bootnic's script (in particular I do not understand the
"!!" operator in the fifth line..).


Yes, I see your concern. When I said about short captions, it was
quite deliberate. If you are going to have some long captions
then this changes how you must tackle the issue. In the template
series I offered before, you will have noticed the management of
the pages into landscapes, portraits and very wide strips (the
latter suitable for 'film strip thumbnails' for movies). And that
the divs that housed the thumbs in each category were the same
width. The height comes naturally from the pic/caption pairs.
This gets the neatest look as long as the pics are the same
height and the captions very similar in length.

But things are rather different if you want long captions thrown
in here and there. I am not sure I would have offered the
template had you not said short caption in your original post <g>

If you want to accommodate long captioned pics, then there are
'management' ways. If there are just very few of these long ones,
do not let them loose among the tidy ones!

Group all the long captioned pics together and don't have any
captions that are too way out of kilter in size with the other
long captions or the problem you notice (of floats catching) will
reappear. The other thing you can do, it has its downsides, is to
give a generous enough explicit height to the float boxes, enough
to accommodate the tallest pic/caption pairs. You can do this in
ems. It is easy to decide on a 'good enough' em dimension once
you know the length of the longest caption in any group.

O, and btw, if you have long captions, text-align: center looks
awful, make it left for these.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top