Posted by geerlingguy on January 27, 2010 at 12:57pm
19 followers
| Project: | Caption Filter |
| Version: | 7.x-1.x-dev |
| Component: | Miscellaneous |
| Category: | feature request |
| Priority: | normal |
| Assigned: | quicksketch |
| Status: | needs review |
Issue Summary
Do you think it would be possible to create a button/plugin, or a hook, that would allow for a 'caption' field alongside the image insert stuff in CK or WYSIWYG?
Failing that, do you think there could be a way you could grab an image's alt text and make it a caption, if the image has the proper class?
Comments
#1
I don't have any real interest in having caption filter pull alt text and automatically generating captions (although that is technically possible and relatively easy using this module as a base).
I would really like to integrate this module with Insert and an WYSIWYG editor but I am not certain when I will get to it. Patches always welcome.
#2
I would also find it very useful to have the alt text converted into an image caption, and/or CKeditor integration!
#3
+1 for ckeditor and insert integrations
#4
Has anyone tried http://drupal.org/project/image_Caption module? I believe that it uses alt or title text for the caption, and can be used with wysiwyg editors by applying a .caption class to your image.
#5
I was able to get that module working Scott for the interim, but I think the concept is still a little too complicated for most my users.
#6
Yeah, ultimately it's nice to not have to rely on jQuery to generate captions. In my opinion, that is more of a hack than a solution.
I'd love to get a CKeditor plugin but my plate is pretty full for the next couple of months. Again, patches always welcome!
#7
"Image Caption" comes with another module called "image_caption_filter" that doesn't rely on jQuery, but is an input filter just like this module. Discussion at #264932: Normal filter.
#8
I am going to write an patch for insert module. I will post when it's done.
#9
You know what I just looked at the code and it's already supported with the insert module. Look at the insert-image.tpl.php in the insert module template directory. Just override the template file in your theme and make the adjustments necessary.
#10
@kmonty has added me as a maintainer to this project. I'm going to work on this issue eventually, with targeted support directly against CKEditor and tinyMCE editors (we'll see about WYSIWYG support if it's possible).
Let's move Insert module support (which I'm also interested in) over here: #1282078: Add support for Insert module templates
#11
I've made a start on this functionality to port the filtering capability of Caption Filter to JavaScript for use (right now) in tinyMCE. This approach only works with the WYSIWYG module combined with tinyMCE, as that was the easiest implementation to complete considering all I had to do was adopt the code from WordPress's own source code (which is also tinyMCE):
http://core.svn.wordpress.org/branches/3.2/wp-includes/js/tinymce/plugin...
So this is a start and good enough to commit to the project. It certainly works and it's exciting to see some filtering done on output. I'm leaving this issue as "needs work" until I can get a CKeditor implementation completed.
#12
Unfortunately getting this module to work with CKEditor is proving to be almost impossible. See my description at #1286004-1: Research/Build suitable captioning system for inline images. Essentially CKEditor has this fancy-pants filtering system that unfortunately isn't capable of handling mixed syntaxes of square-brackets like our [caption] tags and HTML at the same time.
There is a WordPress plugin to make it use CKEditor instead of tinyMCE, but it's a complete catastrophe and we can't get anything really useful from it.
So in short, we'll support TinyMCE for now but not CKEditor. The technical challenges of CKEditor are extremely difficult.
#13
I've installed the latest 7.x dev release, which seems to have this patch in already, but I think I'm missing something.
I have the module turned on (along with WYSIWYG, using a tinymce profile), I have its button turned on in my WYSIWYG profile, and I have the caption filter included in my WYSIWYG-enabled input format. I don't see anything in the image dialog to indicate that I can insert a caption, though. I guess I don't understand how this is supposed to work in a WYSIWYG context.
#14
Yeah, right now it doesn't modify the image dialog box in any way. However if you use the Insert module, you can change the "Title" field into a caption before you insert the image into the post. See #1282078: Add support for Insert module templates.
#15
Maybe CKEditor could have a stand along plugin that doesn't use caption_filter but just adds it's own markup and has a little css to make it look nice.
It could potentially work like this:
1. User clicks an existing image in the editor
2. Caption button becomes selectable (like the unlink button does when you click an existing link)
3. Click the caption button and get a pop-up where you can enter the caption
4. After you enter the caption and click ok it adds the markup around the image.
#16
@rooby: Maybe so, but what you've described is distinctly different than what this module provides and probably won't be handled here.
#17
Absolutely, I should have mentioned that.
It was meant more as a note to people who want CKEditor support.
If I ever have some spare time for it I might do a sandbox project and see how it goes.
#18
Hi everyone, I'd like to propose a patch that would introduce some basic support for CKEditor in this experimental plugin.
What's in the patch:
The usage is pretty simple:
(see also the attached screencast)
It is possible to create multiline caption (use Shift+Enter), as well as style the text.
If the text contains some formatting, the "Caption" field in the "Caption" tab will be intentionally grayed out (because it is impossible to edit such content in a basic text field).
Any feedback more than welcome! :-)
#19
Thanks wwalc! I'm excited to see this in action!
In my testing though, after applying the patch CKEditor will no longer load. The JS console reports:
Uncaught TypeError: Cannot read property 'onLoad' of nullWhich of course isn't particularly helpful. I'm running CKEditor 3.6.2.7275, through WYSIWYG module.
I'm also concerned about this bit of code.
afterInit : function( editor ){
var proto = CKEDITOR.htmlDataProcessor.prototype;
proto.toHtml = CKEDITOR.tools.override( proto.toHtml, function( org )
{
return function( data )
{
data = Drupal.captionFilter.toHTML( data, 'ckeditor' );
return org.apply( this, arguments );
};
});
proto.toDataFormat = CKEDITOR.tools.override( proto.toDataFormat, function( org )
{
return function( data )
{
data = org.apply( this, arguments );
return Drupal.captionFilter.toTag( data );
};
});
}
This looks like the same thing that I mentioned in #1286004-1: Research/Build suitable captioning system for inline images, where CKEditor is not intended to be used with mixed syntaxes, so this approach overrides the entire CKEditor filtering system, does the replacements needed by Caption Filter, then calls the original filtering system to do all the normal replacements. That's the same approach used by WYSIWYG module also, so I'm guessing we now have two plugins overriding the entire filtering system, adding a custom snippet, then calling the original filtering system. Logically I can see that this would probably work, if each system just nested what it thought was the "original" filtering system. Do you think that's typical of filtering systems for CKEditor?
In any case, this looks like a workable start for this module, if I can get it going I'd love to include it in the project.
#20
Thanks quicksketch for checking the patch!
I'm having problems with reproducing the error that you reported.
I did the following, just to make sure that other third party scripts or old settings did not cause this issue:
<img>to the list of allowed tagssites\all\libraries\ckeditorBold, Italic, Underline, Source code, Caption FilterBy going into
node/add/articleI see CKEditor and can insert an image with a caption.Checked on FF10.0.2, Chrome 18, IE8, Opera 11.61 @ Windows 7.
(WFM also with Wysiwyg module version 7.x-2.1)
Could I ask you to do the same and check whether you are having this problem on a fresh installation of Drupal?
#21
.. and here goes the patched module
#22
...seems this is being tested against 7.x ;)
#23
Thanks @wwalc, I'll give this another shot. My sandbox does have everything under the sun installed on it, so I'll try fresh and see if I have better luck.
#24
Really like this module, but it is difficult for my users to add caption! Any way can anybody suggest it done for drupal 6.x?
#25
@quicksketch - any updates? Did you have a chance to recheck the patch?
I'd love to see the support for CKEditor :)
#26
I tried this with WYSIWYG 7.x-2.1; I get no image, just a box with
[[{"type":"media","view_mode":"media_large","fid":"96","attributes":{"alt":"","class":"media-image","style":"width: 480px; height: 351px; float: left;","typeof":"foaf:Image"}}]]This is a caption.
Any suggestions?
#27
I was looking for an easy way to have image captions and stumbled upon this module. As pointed out above, Image caption relies on jQuery, which is why I am going for Caption filter.
I am using CKEditor through Wysiwyg module and also do need a button or anything to work with inside the editor. I followed instructions given in #20 as close as possible on my current project using the patched version from #21.
Although, I am right now NOT seeing any new button in the CKEditor toolbar (is this even needed?), I may choose the new tab "Caption" when opening the image dialog. It worked like a charm on the first try.
One thing I noticed: when configuring the text format (e.g. Filtered HTML), make sure the caption filter runs before the line break filter. Otherwise, you end up with weird
<br>tags and orphan paragraphs.While everything is working as expected, I get an error message after saving any content with captions. However, this might be related to my localhost configuration. I'm just writing it down here, in case someone else gets the same error in which case review of caption filter might be needed.
#28
I am setting no style on caption tab of an image (since image layout and position is defined through theme) and I noticed the HTML output to be
<div class="caption-inner" style="width: ;">. While it doesn't break anything,width: ;is still invalid CSS and should be removed.#29
@Katrina B, do u use patched module from #21?
@Paul B, i've try to reproduce your bug from #27, but for me everything work and i don't see any error... If u paste this source with caption in original module (not patched) do u get this error too? It's look like Caprion Filter module error or webserver configuration problem.
In #28 u write about invalid CSS, could u write step by step how to reproduce this? I've try to do a lot of things and i never get sth like this...
Greetings