I've made a few "improvements" to the image caption JS. I don't know how to make a patch, but I will go through each change and my reasoning behind it in the hopes of promoting discussion. The changes I made could probably be better implemented/optimized, but it's the ideas and solutions I wanted to share. If you can think of improvements to my code or scenarios I missed, please share, I would love some feedback.

The trouble with captioning!

Needing better control over my image captioning, and easier defaults for my users, I set out to fulfill the following scenarios...

  1. Remove the need to have the .caption class on images I want captioned
  2. Caption only images that fall within an html element containing a predefined css class
  3. Add margins only to images that fall within an html element containing a predefined css class
  4. Provide an override to prevent an image from being captioned
  5. Display both the title and alt tag in the caption
  6. Handle an image with only an title tag
  7. Handle an image with only an alt tag
  8. Handle an image without either an alt or title tag by removing their unused wrapper spans
  9. If the image is wrapped in a link, then provide a wrapper so that the link may be styled

Because I can't rely on my users to ensure the ".caption" class is included, I wanted a smarter default for them. What I came up with is that by default, every image inside any element with the class ".caption-these-images" will be captioned. Now I can add this class to any view, fieldset, block or panel and all the images inside it will be captioned.

I also needed better control over the "contextual" margins that are applied. For that reason I pulled our that functionality by moving the margins styling under an additional parent CSS class ".caption-contextual-margins". If this class is not present, then the images can still be floated and will still get their contextual wrapper classes applied ".image-caption-container-right", but they will not have their margins set.

Of course there will be times where you may not want an image to be captioned. For that reason I've built in the override ".no-caption". Any image with ".no-caption" will not be captioned, irregardless if it also has a ".caption" class for some reason.

I really liked the idea of being able to display both the Title and the Alt text with the image, so I've gone ahead and added that in.

Many of my images are links to larger versions of other content. I wanted to be able to style the links and not just the images, so I added the ".image-caption-link" wrapper class. On one of my sites I went for the Polaroid look. Because I could style the link instead of just the image, the whole border surrounding the image is a clickable area. This also makes the caption itself a clickable area.

Because I'm applying margins to my alt and title tags I couldn't have them hanging around if they were empty. Otherwise the margins from the empty wrapper spans would push the styled <a> border away from the image. So I also built in a cleanup function that clears out any empty spans.

Revised image_caption.js: http://pastebin.com/6XtdGS1g
My caption CSS: http://pastebin.com/VHYj3tAX

Image Caption issue que regarding D7 development as of (11/26/2011)

Outstanding issues that would be resolved

#1284696: Add CSS to Imagefield
#1127986: Support for Alt and Title captions.
#1136950: Caption all images with a title attribute
#1188622: Don't add caption for empty titles (D7 edition)

Suggested improvements not covered here

#1257748: Apply css classes to newly created parent span

Outstanding problems not covered here

#1205510: Incorrect tip text in image caption filter module
#1225296: wrong dimensions of images
#255137: Image Caption not showing up in Site Configuration
#1113214: Image caption and accessibility

Comments

bryancasler’s picture

Issue summary: View changes

Typo

bryancasler’s picture

Issue summary: View changes

Typo

bryancasler’s picture

Issue summary: View changes

CSS

bryancasler’s picture

Issue summary: View changes

Auto Margins

bryancasler’s picture

Issue summary: View changes

Info

bryancasler’s picture

Issue summary: View changes

Related issues

bryancasler’s picture

Issue summary: View changes

Cleanup

bryancasler’s picture

Issue summary: View changes

Cleanup

bryancasler’s picture

Issue summary: View changes

Cleanup

bryancasler’s picture

Thanks silverwing for the typo fix.

Thinking about more robust options, there are actually two primary scenarios we should account for.

  1. You want all images, inside the defined parent CSS class, to be captioned.
  2. You want all images with the caption class, inside that parent CSS class, to be captioned.

*The ".no-caption" class would still override the above settings.

If we define each scenario with a parent CSS class we'll get maximum flexibility with minimal styling.

bryancasler’s picture

Issue summary: View changes

Typo