Captions, custom alt-text and title

And would bo nice to add a caption option (chceckbox) that add a subdiv under the image and will use custom title as a caption text.

subscribe

I'd really like this too - really important for good SEO and also for better lightbox integration as lightbox picks up the alt tag

Hi

Look at this:
http://drupal.org/project/imagefield_extended
From module description:
"An extended ImageField widget that adds new form fields to a Image field. It provides no new theming functions, it just provides the framework to associate new data with an image.

All processing, including storage, is done via ImageField. This module simply allows you to easily extend the currently available form fields; alt, description, title, etc."

IMHO Imagebrowser could stay only for browse and insert images.

cool - thanks for pointing out this new module.. looks great and very close to what i need - and yes, that makes sense to have imagebrowser focus on browse/insert

2 questions..

1. do you know if you can add a user reference field to the extended imagefield (i'd like to be able to cite the photographer)?
2. even with imagefield_extended, i'm not really clear on how i'd get the extended data into my node.. wouldn't this new module still require some integration from imagebrowser?

Subscribe

Regarding to the 2. question. I don't see too how ImageBrowser will show up this text. Image Assist has an option for this. For me the title of the image and the description field would be enough.

Yeah I can't see an easy way to integrate this in. While ImageField Extended sounds good, it doesn't help that IB's upload field isn't powered by ImageField. I think this one needs more thought. Other suggestions welcome. We need to remember IB only inserts information relating to a File's ID in the File DB table. And since files could be inserted into the database through various methods we can't rely on other modules way of storing additional information.

Maybe we store it in the [IB] tag but that wouldn't be tidy or we create an additional IB DB table linking captions to File IDs, but what if you have different captions associated to the same image.... lots to questions and issues to think about.

yeah.. definitely seems like a headache

while i'd love to have these pulled in automatically from some other source, i'm personally accustomed to adding alt/title manually anyway - is it really a problem to add this to the [IB] tag? or resurrect the "static" option so we could manipulate raw html?

what if the [IB] tag output a small view as well as the image tag? A view that contained whatever fields you require and can be themed as a caption or whatever.

So this would essentially be just another parameter like a style selection.

Include View? (O) -yes () -no
View Style? () -Captions Below
() -Captions Above
(O) -Burst mouseOver Captions
() -Captions Gone Wild!
View Specific Settings?
() - Fast & Hard
() - Slow & giggly

How hard would it be to include a small view along with the img using [IB] tag?

But views need to be able to relate to something, in Drupal 6 files don't really relate to anything at the moment hence the problem and why there aren't any fields available to Views. Also relating captions to files also doesn't help if Person A wants caption X with Image Y when Person B wants caption Z with Image Y.

How we relate the caption to the fid/ib tag is the main issue.

I see what your saying .. would need the uploaded files to be individual nodes .. this is how all my images uploaded with image_fupload are handled, they have a few fields and a node reference to associate them to galleries for individual nodes, I guess I took for granted the fact that those images are essentially made into nodes, and the way image_browser handles them is more like files.

Yeah well if we did that we may as well go back to using the Image module which makes 'image' nodes. But it doesn't seem that logical to me. I'm pretty sure D7 will solve a lot of these issues as the file object system is much better. I've heard fields in D7 can be applied to users etc. maybe they can be applied to files as well...

Does that mean we'll have to wait until D7 and a D7 release of IB before we can add custom ALT text to an image?

This may work .. though ive not tried it yet. Uses the Alt field to create captions inside fckeditor.

http://www.appnovation.com/classy-captions

hi all,
I want to add support for title/alt to image browser in simple way by adding one filed to tag:
{FID}=={PRESET_NAME}=={LINK_PRESET_NAME/URL}=={LINK_TARGET}=={STYLES}=={TITLE/ALT}

I have done all necessary changes in code (i thought all ;) and after that filtering of tags is working good I think - I can add 'title/alt' to image simply writing it in source code of my page in fckeditor. I also done a special field in form in Image Browser Insert Page, but when I click on 'Insert' button nothing happens then. I don't know why. In firebug i saw that some script is working, this is output:
({fid: "24", preset: "ib_miniaturka", link_preset: "ib_obraz", link_target: "self", styles: "null", title_alt: "example", filepath: "sites/default/files/izydor_002.jpg", image_url: "http://example.com/sites/default/files/imagecache/ib_miniaturka/izydor_0...", link_url: "http://example.com/sites/default/files/imagecache/ib_obraz/izydor_002.jpg"});

As you can see title/alt field was read (value 'example').
Maybe someone will have an idea what I do wrong.
I attach my version of imagebrowser.

yachuu - are you able to provide a patch for the latest release of Image Browser?

Starnox can you confirm that alt-text will be included in future releases of Image Browser?

Off topic. I'm thinking we need to produce a better way to reference all these settings. These long [ibimage] tags are becoming a bit of a nightmare. What would be better is to produce an 'Insert ID/Hash' which we can reference to a DB table which stores information as 'data' serialised array. Then we could add an API for adding any additional fields you want.

Then we might be able to add custom tpl files where you can display the data how you want. Only issue would be getting that template produced in the WYSIWYG editor.

Just some thoughts

That sounds like a good idea having the information serialized in the database. I'm curious, how do you see this API for adding custom fields working?

Not sure. Obviously the image form is made via the Form API, however we can't tie CCK into it since we aren't working with nodes or content types. However in D7 I thought they were going to make it so CCK could add fields to any object like files and not just nodes. Not sure if that actually made it into D7. But we could go down that route in D7.

For now I think we should just store everything in a table and create fields for all the standard attributes like alt and title.

That sounds like a great way forward for the module. IB is my favourite route for getting images onto a drupal page, but the lack of easy support for (especially) ALT tags means it's difficult for me to use on customer sites. I work with a good deal of charities, some charities for the blind, and I really have to do everything I can to make my sites accessibile.

Many thanks for your consideration on this topic.

I'll happily test patches etc.

+1 comment #20

i also do work with non-profits and schools and accessibility is often a requirement.. I'm also very happy to test!!

thanks

I also want this functionality. It's a very basic feature, and would be appreciated. I use IB in combination with Wysiwyg and Fanzyzoom, and it works very well - except for the title, which I can't even write manually since this module uses it's own code and filter.

Ok. Here is a first go at this. I'm supplying a patch instead of commiting to 2.x-DEV so that you guys can try it out.

It's tested with CKEditor in Firefox, IE6 and IE7.

Don't forget to run update.php after applying the patch to make sure the new tables are created.

A potential problem with this solution right now is that the table imagebrowser_images could get cluttered with all kinds of old data as there are never any deletes performed against it.

Excellent. Before I give it a go, a quick question. Do you mean CKEditor through the CKEditor module or through the WYSIWYG API?

CKEditor via Wysiwyg.

yay - this is a great step

what would it take to get this to work with the CKEditor module?

I'm not sure... I have to dive in to the code and have a look. But I will do that after everybody is satisfied with the current solution.

thanks blixxxa!

using IB with CKeditor module and being able to add alt tags to images is pretty much my dream solution

OK, I installed fresh version of the various modules and dependecies. This is in IE8.
When I clicked the image browser button, nothing apparently happens, but I get these error messages in the js console:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.3; OfficeLivePatch.0.0)
Timestamp: Tue, 30 Mar 2010 19:46:22 UTC


Message: Object doesn't support this property or method
Line: 17
Char: 3
Code: 0
URI: http://.../modules/imagebrowser/plugins/ib_wysiwyg/ib_wysiwyg_init.js?K


Message: Object doesn't support this property or method
Line: 17
Char: 3
Code: 0
URI: http://.../modules/imagebrowser/plugins/ib_wysiwyg/ib_wysiwyg_init.js?K

And this is IE8 in compatability mode:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.3; OfficeLivePatch.0.0)
Timestamp: Tue, 30 Mar 2010 19:49:41 UTC


Message: Object doesn't support this property or method
Line: 17
Char: 3
Code: 0
URI: http://.../modules/imagebrowser/plugins/ib_wysiwyg/ib_wysiwyg_init.js?K

Firebug on firefox 3.6 gives me this:

$("#ib_dialog").dialog is not a function
[Break on this error] $("#ib_dialog").dialog({ modal: true..._wysiwyg_dialog_close(); } }).show(); 

What version of the jQuert UI JavaScript Framework are you using? Only 1.6 is supported at the moment.

Aha! I just downloaded the most recent. 1.8 I think.
I'll try again with v1.6, but it'll be a day or 2 before I can do that now.
Many thanks for your work on this.
Matthew

Has anyone tried using Caption Filter, or Image Caption module which uses jQuery or the included Image Caption Filter?

@blixxa:

It works fine but a couple of issues which may not be obvious at first:

• warning: it will break all previously inserted ibimage tags
• it allows you to add a title and alt tag
• in combination with caption filter or something similar this can be turned into a nice caption
• an end-user who right-clicks on the image and makes changes to anything there (in ckeditor via wysiwyg) might be surprised that they are not reflected

There has to be a better way...

@mshepherd

I had the same error and couldn't find anything. It turned out that jquery_ui had disabled itself. Check your modules list.

subscribe

I believe this hashing method breaks Lightbox2 support via custom classes (since no other support seems easily available that can also be easily be controlled or turned on/off during the image insertion process). I believe this is because the patch in #23 places the hash in the rel attribute--the same attribute typically used by Lightbox. Though I haven't investigated this deeply yet.

It turns out that Lightbox is NOT broken due to the hash method. It's simply due to use of $attr['link_preset'] where the correct term should be $attr['link'] in #23 as written (at least that's how it appears).

Attached is a revision of patch in #23 that seems to work with images with URL links set.

Patch = excellent, great work blixxxa. Please get this commited ASAP, it's a neccesary functionality! :]

patch seems to work! PLease commit for web standards sake ;)

My comment #33 is still true.

Tagging. This looks like it still applies to D7, but haven't tested it yet.

EDIT: Ha, there is no D7 version.. What was I thinking. So, what are folks using instead?

@mgifford,

nowadays I personally prefer to use CKEditor together with IMCE filebrowser. For both D6 and D7 projects.

https://drupal.org/project/ckeditor
https://drupal.org/project/imce

CKEditor has come a long ways with accessibility.

Captions work fine with that too?

Captions will always be a special case. There are no special caption tags in HTML and there is now way to tell that a certain text serves as a caption for a certain image.
So in the end you'll probably want a <div> around your image and caption text. Something like:

<div class="image-container">
  <img src="my_img.jpg" />
  <div class="caption-text">This is my caption</div>
</div>

What you could do is write a little piece of javascript that takes the ALT or TITLE text from the image, wraps the <div>'s around the image and insert the text as caption. I think SEO-wise this is a good solution as well.

@garbo - there is actually a way in HTML5. The figure & figcaption give you the semantic relationship. See:
http://html5doctor.com/the-figure-figcaption-elements/

@mgifford,

Have you seen https://drupal.org/project/caption_filter and https://drupal.org/project/image_field_caption ?

I don't know if they produce HTML5 or something like my example above but it might be worth the try.

Cool, thanks!