Skip Navigation

Adding Photo captions to a blog?

Travel Forums System Talk Adding Photo captions to a blog?

Page
  • 1
  • 2

Last Post

1. Posted by TLWH (Travel Guru 516 posts) 7y

In an effort to clean up and tidy my blog posts I thought putting captions on the photos would be nice. I saw it on another tp blog and wondered how they did it?

I mean having a photo and then directly under it a brief description of the photo in a small font, of italic or whatever.

Any idea on how this is done?

2. Posted by Sander (Moderator 4811 posts) 7y

What's the blog where you saw it? I don't think there's any ability here to select a small font, so my first guess would be that the caption is actually part of the image.
However, you could also do this by (for example) placing all your captions between [u] tags, not using that tag at any other place, and then writing some custom CSS to style the <u> element with a different font and everything else that you would want to use in a caption.

Given that I'm madly refreshing election tabs, I don't have time atm to give a worked out example, but will create one tomorrow if I remember. :)

3. Posted by TLWH (Travel Guru 516 posts) 7y

I saw it here The captions start on the second photo down!

I had a look at the code and I think they just did a bold text manually?

It's strange as I have enough problems trying to get my photo's to line up with text wrap and so on. Let alone have text perfectly lined up to the photo like that?!

There must be a secret!

4. Posted by Sander (Moderator 4811 posts) 7y

You have images which are floated so that the text will go around them. (I think that's a css rule you added manually.)
On that blog the photos just use their default behaviour, which is to stand separate on a line. And then it's really easy to just have the next line be left aligned and make it bold to serve as a caption.

5. Posted by TLWH (Travel Guru 516 posts) 7y

Yep I added it as the gaps between the thumbnail photos and text were too big by default.

So I guess no captions for me then?

6. Posted by Sander (Moderator 4811 posts) 7y

I didn't say that!
CSS is amazingly powerful. I just need to find a spot of time to work out the necessary details here. (Note entirely certain it can be done, but 80% certain is good enough to go give it a try.) :)

7. Posted by Sander (Moderator 4811 posts) 7y

Okay, see what you think of this.

The CSS rule for this is:

.entry u { float: left; clear: left; width: 194px; margin: 2px 5px 5px 5px; border: 1px solid #999; padding: 2px 5px; color: #bbb; text-align: center; text-decoration: none; font-variant: small-caps; } /* Since underline elements are effectively unused, we promote them to caption status. To be used immediately after images: [img=someimage.jpg][u]my caption text[/u] */

It assumes the image is always thumbnail size, and floated, so basically is very specific for the way you do things. It'll also break down when you try to have two images immediately after each other (I saw you did some side-by-side images before; the best you can do with captions after that is to have a single caption describing both images.)

You can change or remove the border, color and font-variant properties there to change the look.

[ Edit: Edited on Nov 5, 2008, at 2:21 PM by Sander ]

8. Posted by TLWH (Travel Guru 516 posts) 7y

Quoting Sander

Okay, see what you think of this.

Really great tutorial! Well layed out and easy to understand for someone like me

Seriously though, thanks very much for the help and effort you put in. The layouts looking better because of it already. I don't know CSS and am still struggling to get my head around plain old html!!

Quoting Sander

(I saw you did some side-by-side images before; the best you can do with captions after that is to have a single caption describing both images.)

I have been playing around trying to get the best layout. Is that why the caption text went a bit haywire here (second and third photos down)?

9. Posted by Sander (Moderator 4811 posts) 7y

Quoting outcast

I have been playing around trying to get the best layout. Is that why the caption text went a bit haywire here (second and third photos down)?

No, those don't work because you did [u][img=photo.jpg]caption[/u] instead of [img=photo.jpg][u]caption[/u]. (You placed the starting [u] before the image.)

10. Posted by TLWH (Travel Guru 516 posts) 7y

Aha. But when I go [ img=photo.jpg][u]caption[/u ] it ends up running into the main text like here??

Which I just noticed considering the context of the main text "let me prod you with my stick!" is possibly not such a good thing to have cutting in there!

[ Edit: Edited on Nov 6, 2008, at 11:25 AM by outcast ]