Thumbnails with captions

Thumbnails with captions

am 29.12.2007 17:42:03 von 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

Re: Thumbnails with captions

am 29.12.2007 19:37:04 von cwdjrxyz

On Dec 29, 10:42 am, JWS wrote:
> 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.

Re: Thumbnails with captions

am 29.12.2007 20:23:44 von jkorpela

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


Caption text


--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Re: Thumbnails with captions

am 29.12.2007 21:57:07 von JWS

Jukka K. Korpela wrote:

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

This is *very* impressive. Thanks!

JWS

Re: Thumbnails with captions

am 29.12.2007 21:58:07 von dorayme

In article <477678dc$0$25493$ba620dc5@text.nova.planet.nl>,
JWS wrote:

> 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

--
dorayme

Re: Thumbnails with captions

am 29.12.2007 23:22:54 von Paul

"JWS" ha scritto nel messaggio
news:477678dc$0$25493$ba620dc5@text.nova.planet.nl...
>I am trying to make a page with thumbnails pointing to
> photographs.

May I show you my web site? I have many thumbnails with captions spanning in
many lines.
I simply have used
Click on pictures...

http://www.tortebomboniere.com/bomboniere/favourcake01.html

Paul

Re: Thumbnails with captions

am 30.12.2007 15:53:53 von JWS

dorayme wrote:

> 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

Re: Thumbnails with captions

am 30.12.2007 22:59:31 von dorayme

In article <4777b101$0$25501$ba620dc5@text.nova.planet.nl>,
JWS wrote:

> dorayme wrote:
>
> > 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

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

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... )

--
dorayme

Re: Thumbnails with captions

am 31.12.2007 11:24:50 von JWS

dorayme wrote:

> First about the JS, why not grab the script from my setup. You
> can get it at:
>
> > 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

Re: Thumbnails with captions

am 31.12.2007 22:07:50 von dorayme

In article <4778c373$0$25485$ba620dc5@text.nova.planet.nl>,
JWS wrote:

> dorayme wrote:
>
> > First about the JS, why not grab the script from my setup. You
> > can get it at:
> >
> > > > 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..).
>


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

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.

--
dorayme