Add support for add'l CCK Formatters (Lightbox2, etc.)

FileField Insert only inserts an image or link into the textarea or WYSIWYG, it does not provide multiple formats such as linking back to the node, different displays for teaser and full node view, or ThickBox. It's simply a way to shortcut the process for inserting HTML into the WYSIWYG.

If you're using an ImageField, FileField Insert can shortcut the process for inserting an image of a certain preset size, but it still won't provide things like "link to node" or Thickbox.

Nate,

I was really hoping that because CCK and lightbox2 seem to work well together in supporting imagecache and lightboxing, it wouldn't be too hard to get working in this module too.

What exactly would have to provide the support so that I could insert preset-as-lightbox images into the code, ie "Inline" preset -> "Lightbox2 -> Inline" and clicking the image (natch) exposes the lightbox?

I think this would be *extremely* valuable - I had rather anticipated that this would be catered for out of the box, and I could really use support for it. Is this an issue with this module, or would it have to be provided by Lightbox2 (et al)?

I haven't tested this, but it *should* work, in theory :)

• Insert the image using filefield_insert
• Select the image in the wysiwyg editor
• Make the image into a link - the link URL should be the desired image preset
• Set the apppropriate class name / rel attribute for the link (depends on thickbox / lightbox)
• Save

That should work, the problem is that the user has to know the path to the larger image preset :/ If filefield_insert module was to simplify it, it would need to make the image a link to the larger image preset and set rel attribute / class name for you.

Can filefield_insert give the user a choice of the available cck formatters for that field type? That would be the easiest solution, as then the rendering of the link would be given to lightbox2 or whoever.

From reading Stella's input, I think basically in a nutshell we'd have to implement CCK formatters instead of whatever filefield_insert provides. Given that this means CCK needs to be installed, this is in the body text, I'm not sure if this can be done?

Thinking forward, it would seem likely that D7 would cater for this (in my mind), but perhaps we need a more thorough opinion on it?

Edit: I'm *almost* tempted to set this to critical, as it's sort of loosely implied that by offering imagecache presets that similar options would be available as for field formatters in CCK. I won't, because I know nate will get cross, and because they're technically not the same thing :)

What is the status on this issue? It would be greatly helpful to be able to insert an inline image thumbnail and have lightbox handle showing the full size.

pip8786, the status of the issue is what you've read. If the status were something else, the issue would be updated with the status.

I'm updating the title to reflect the request. Marked #459082: Link to original image as duplicate.

In that case, I'm going to assign myself to it. I've got most of the code working, just need to figure out why strpos($url, 'imagecache') is always returning false no matter the URL.

EDIT:
I've posted the code I'm having trouble with here: http://pastebin.com/d23bd8bee The first part is the modified filefield-insert-image.tpl.php which doesn't seem to be finding the string, while the second part is a test.php file that is almost exactly the same, just run by me outside of drupal to see if my code behaved correctly in that case, which it does. Does anyone have some insight into why it doesn't work in the filefield-insert-image.tpl.php file?

I figured out the above problem and have made a patch of the code I have written. I would like you guys to give it a shot and see if anything needs to be changed. Basically, you just have to go into your content type and edit your image field options, under html insert there is a new option to "Link to original". If you check that and then insert a preset other then Original, it will add a link to the original around it.

I think this is a bit more limited than many users are requesting, especially with the (now with increasing frequency) requests for using Lightbox, Thickbox, or HighSlide formatters in addition to the link to original option. I think we better think this out more fully and offer the use of any formatter provided by CCK rather than providing ImageCache-specific functionality.

Should the formatter be specified at insertion time or during the content type specification? Do you have more details about these formatters? I don't know much about it so a pointer would be nice. I will do the work once we iron out the details.

I'd like to keep the workflow the same as it is currently, only instead of a list of ImageCache presets when configuring the field, there's a list of formatters you can choose to include in the FileField Insert list. Then when editing the node, that list of formatters is available in the insertion list options.

The obvious trouble with this is that FileField Insert currently uses JavaScript-based replacement and it only knows about a few specific properties such as height, width, description, and src, and there's no quick way to make a CCK formatter work purely through JavaScript. Instead, the formatters will need to be run when the field is being built and included in the form, either as select list values or as hidden fields. Then when the formatter is selected for insertion, pull the pre-rendered value, do the same JavaScript based replacements to modify the description, alt, and title texts (since those can be changed by the user after the HTML is formatted on the server-side).

To get a list of formatters, you can either use the same approach as the _content_type_info() function, or call the private _content_field_types() function to get the formatters from CCK like the content_display_overview_form() does. Oddly it doesn't look like CCK provides a way to just get a list of formatters for a field. Actually rendering the content is pretty easy though, just call content_format() on the field with the name of the formatter.

I've been thinking about making these changes myself, but as you can probably tell from my description, this means rewriting a good portion of the module entirely. I really appreciate the effort your putting into this, since I don't know when I'd be able to undertake this task.

What would i call content_format on?

I tried this: content_format($vars['field'],$vars['field'],$formatter_name) and a few other things to no avail. This is in function template_preprocess_filefield_insert_widget(&$vars), which doesn't seem to have access to $node.

Thanks

You'll need to pass in the actual field value and the node. You can add the $node object to the call to theme('filefield_insert_widget') to get access to it. The final call should look something like this:

$field_name = $vars['field']['field_name'];
$output = content_format($vars['field'], $vars['node']->$field_name[$delta], $formatter_name, $node);

I've finished converting the module to use purely CCK formatters. It no longer has the options for imagecache presets or max width. The code needs a serious review since this is my first time editing drupal code or using jquery.

Thanks,
Philippe

@pip8786 - It's worth noting that this module is going to need to be compatible with http://drupal.org/project/image_resize_filter for maximum flexibility, which means the max width setting will probably be required.

Just a thought! :)

When I talked to Nathan the other day on IRC, I think the decision was to remove the max width. Next time I talk to him I'll ask him if we need to put it back.

When I talked to Nathan the other day on IRC, I think the decision was to remove the max width.

I didn't really mean, "we should remove max width", I meant, "max width is much harder to do with this approach". Though I'm not entirely sure what way would be most-foolproof to handle this, since using formatters we don't have a sure-way of identifying height and width values like we did before. We do still have actual height/width values are our disposal, so search/replace based on those seems like a good place to start.

In addition to altering the height/width, we'll also want to update the description/alt/title tags in the JavaScript. Since we have the complete $file object available at the time the formatting is run, it'd make sense to populate these values with placeholders that can easily be updated at the time of insertion.

As pip8786 noted above, this also makes ImageCache presets unusable, which is really going to be a downer. We need to fix ImageCache prior to committing this patch, since a lack of any reasonable way to scale images really nullifies some of the main purpose of this module.

The patch approach looks really good so far though. We can remove some more code that isn't directly necessary any more, like we don't even need the "filefield-insert-image.tpl.php" or "filefield-insert-file.tpl.php" files any more (or their entries in hook_theme) since we're running through formatters instead.

itowler,

The reason the imagecache presets no longer work with this method is that all imagecache preset formatters require a valid $node, even though they don't always use it. At the point when we generate the formats, we do not have access to the $node. What would need to happen is that imagecache processes the formats it can without a $node, that way most of the formats would be available.

-Philippe

Specifically, ImageCache is preventing any output if $nid is missing in theme_imagecache_formatter(). You can take out the IF statement an all the formatters will still work except for "link to node". If we move the IF statement further within that function then we can make most ImageCache formatters work with FileField Insert.

To elaborate on the whole problem, some formatters (like ImageCache's link to node) require data within $node that might not be available yet. For example to do a "link to node" formatter, the node ID must be established. But if creating a piece of content at node/add/story, that node ID doesn't yet exist, so the URL to the node isn't possible to get. Things get even trickier with things like Path Auto changing the URL on you, or things like $node->title being used in the formatter.

So basically, getting access to $node isn't possible at the time you're using FileField Insert, so any formatters that depend on it won't work.

Another patch to be reviewed. It does not have the max width yet. Also, 2 files can be deleted (image and file tpl files) but for some reason it wouldn't let me do that as a patch.

had an issue with stray text making its way into the rel="lightbox". This is what appears when the editor is changed to plain text after inserting the image.

<a rel="lightbox[field_image_post][meadtj | 06/27/09]" href="http://www.mysite.com/sites/default/files/imagecache/full/pictures/u1/sitepic_0.jpg"><img class="mceItem" title="meadtj | 06/27/09" src="http://www.mysite.com/sites/default/files/imagecache/thumb/pictures/u1/sitepic_0.jpg" alt="meadtj | 06/27/09" /></a>

This is the code that was recieved with titles and alt text set with tokens. The lightbox setting that I used was thumb>full.

rel="lightbox[field_image_post][meadtj | 06/27/09]" should just be rel="lightbox"

The .patch seems to work perfectly once the node is actually posted, but Lightbox does not seem to show up correctly. Maybe it is my filter? I am using html purifier.

same issue like meadtj. this module is awesome.

lightbox-links now work perfectly in mozilla. ie won't show anything. the reason is some extra information in the generated lightbox-link. can't find the reason for that.

<a class="lightbox-processed" href="http://www.mysite.de/sites/default/files/imagecache/pressegrosscache/swol_090704_3.jpg" rel="lightbox[field_pressefoto][&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/node/13&quot; id=&quot;node_link_text&quot; class=&quot;active&quot;&gt;Details aufrufen&lt;/a&gt; - &lt;a href=&quot;/sites/default/files/swol_090704_3.jpg&quot; target=&quot;_blank&quot; id=&quot;download_link_text&quot;&gt;Zur Originalversion&lt;/a&gt;]"><img src="http://www.mysite.de/sites/default/files/imagecache/pressekleincache/swol_090704_3.jpg" alt="" title="" height="295" width="250"></a>

maybe its a html filter problem in my setup. maybe its a module problem. just thought i let you know.

At first glance that could be a filter problem. Try moving your filters about a bit. If you're using Filtered HTML for example, move that about. Can't be more helpful now as I'm still half asleep.

What about having filefield_insert call a hook for the different options, that way other modules can expose the appropriate formatters?

I'm done working on this for now, as it works for me and I'm not familiar enough with the system to fix the above. If someone wants to take it over and finish it, go for it!

Very cool module. I was looking for EXACTLY this functionality (CCK ImageField, Imagecache, Lightbox, and inserting into text areas.) This allows me to bypass IMCE and the manual editing for Lightbox.

Patch at #22 worked for me. Thanks.

I've added the patch at #22, but it does not properly insert 'plain' images, for which the formatters seem to be delivered by the ImageCache module (?). Just the LightBox-related formatters are inserted properly, so those formatters seem to work OK. Anyhow, I have hacked the patch to at least function better with plain images too, by replacing the 'link to node' options, which are useless anyway, as discussed before, to "act" like 'plain image' links.

Further, the imageresize project is not functioning with this patch, as mentioned before. I have finally installed Eclipse PDT with XDebug to have a proper PHP development environment and will try to solve these issues once and for all. We all need a proper way to insert pre-formatted images after all, don't we?

So stay tuned, and if anyone else had any issues with the 'plain image' formatters from ImageCache or has some clues to a solution, do not hestitate to help me out while I try to solve this :D

And btw: Thanks for making the initial FileFieldInsert module and the great patch!

Sub

Subscribing

subscribe

sub

subscribing

I've got a temporary, easy, admin way around this:
Making in-line image galleries with Lightbox.

Making in-line image galleries with Lightbox2 using Imagecache, FileField Insert, ImageResizeFilter, and a wysiwyg editor.

This example uses the following modules:
ImageFileField (CCK), FileField Insert, ImageCache, ImageResizeFilter, FCKEditor, Lightbox2

Here's how to work around this issue:

1. You must have all the modules above (or similar wysiwyg editor), set up your CCK imagefields, and have set up some imagecache presets prior to doing this. You may need to config other modules like your wysiwyg editor and such.
2. upload an image using imagefilefield. choose the preset you want to show in the lighbox2 gallery when the thumb is click. in this case, I've chosen the "large" preset.
View Step Image
3. the image will insert quite big.
View Step Image
4. right-click on the image and open the image properties box.
View Step Image
5. In the image dialog, you will see the path to the "large" image, which imagecache created for you on insert.
6. copy the path the the image.
View Step Image
7. in the same image dialog box, change the width setting of the image to be what you want the thumb size to be. You should see the image in the preview shrink considerably. this is where imageresize filter will auto-magically resize/optimimze your in-line image to the dimensions you set here.
View Step Image
8. in the same image dialog, but on the LINK tab, paste the url to the "large" imagecache preset you copied in step 6. this will make the link to the larger image from the thumb.
View Step Image
9. in the same image dialog, switch to the "advanced" tab, and where it says "Stylesheet Classes", add a class name for the lightbox trigger, such as: "lbox". (You will enter this value into the lightbox2 module later).
View Step Image
10. click OK to the image dialog, then save the node.
11. Go to admin/settings/lightbox2/automatic and click to open the "custom class images" fieldset. Choose "lighbox grouped" for the handler, and enter your class "lbox".
View Step Image
12. return to the node, and right-click on the thumbnail. choose view image. This shows you that the thumbnail has been resize automagically by the imageresize filter and is optimized at the small size.
View Step Image
View Step Image
13. finally, while viewing the node (not editing), click on the thumbnail and the link should open the "large" image in the lightbox, along with all the other images you tagged "lbox" earlier.
View Step Image

subscribing

Subscribing

subscribe

Looks like the solution in #35 would work if you have one person working on a site.

It's a sort of work around.

Is anyone interested in working on this?

@ quicksketch in #21 - are you basically saying this is impossible?

"So basically, getting access to $node isn't possible at the time you're using FileField Insert, so any formatters that depend on it won't work."

Is there not a (hackish, ugly) way round this by just enabling this module (or bit of it) on nodes that are presaved?

I mean, put a message there to say "save the node and re-edit to manipulate images" (probs not even necessary?). Then maybe add a new node save button with a slightly different submit handler and redirect the page to edit itself again?

Bit of a crap way round it, but at least you'll have the node information. I've had to do something similar with rules force auto_nodetitle to do what I actually want, cos the nid wasn't available, in much the same way.

Last time I talked with quicksketch about it, he said he liked the idea outlined in #26. It would put the onus on the individual modules themselves to expose formatters to filefield_insert. This is waaay better, since filefield then doesn't have to attempt to care about which formatters are inappropriate for its use case.

"Oh. Right." :)

Doesn't it also mean we have to pummel each and every module maintainer to include support for this as well? How many modules are we talking about here?

"Doesn't it also mean we have to pummel each and every module maintainer to include support for this as well?"

It does, but will also mean a possibility for filefield_insert to make it into core in D8. :)

OK, I am trying this. Stella advised me the patch in #22 should work- as long as I don't want to link to a node. Which is good because I just want to link to another imagecache preset.

I applied the patch I got this error:

Hunk #9 FAILED at 236.
1 out of 9 hunks FAILED -- saving rejects to file filefield_insert.module.rej

So I manually applied the changes.
However the Send to text area button isn't working, er, neither is the menu to select the imagecache property?

This is the error from Firebug:

formatter_output is undefined
http://localhost/drupal/sites/all/modules/filefield_insert/filefield_ins...
Line 50

Obviously something wrong with how I applied the changes or the patch.

Any tips?

Patch re-roll

Thank you, Stella. This patch was older than the latest -dev version which I neglected to notice.

Previous: I have applied this patch now without errors. The menu is not appearing however, the same as when I manually applied this in #44 Hmm... See screenshot.

Edit: I just realised you have to go back to edit the content type and select "Enabled content formatters:"

Trying this again!

Edit Edit: YAYYYYY!! Doing a little happy dance!

Ian, very doubtful. See #41 :)

As q0rban has accurately reported, I prefer the approach taken in #26. This change was the cornerstone of a new version of FileField Insert, which has now been renamed to just Insert. This new approach doesn't directly make CCK Formatters all accessible, but instead makes a new hook for hook_insert_styles(). The rendering is now done on the PHP side, which makes for easier theming and changing of settings.

It still doesn't support Lightbox or other non-imagecache formatters, because no implementations have been written for other modules. Personally I'd like to avoid including any lightbox code in Insert, since I never use that module and generally discourage any use of Lightbox/Thickbox/Greybox/etc.

@quicksketch, so it sounds like this is fixed then?

@quicksketch: you said you "generally discourage any use of Lightbox/Thickbox/Greybox/etc."

insert with filefield/image seems to be the most future-forward way of doing inline images (with fckeditor/wysiwyg)

but i need thumbnail to big pic using image cache... what do you recommend for that without lightbox/thickbox, etc?

or do you have another recommendation?

Regardless of lightbox/thickbox/etc, it'd be nice if the 'insert' module provided support for CCK display formatters. It may do already (sorry haven't tested since the filefield insert switchover), then lightbox and the others will be automatically supported.

but i need thumbnail to big pic using image cache... what do you recommend for that without lightbox/thickbox, etc?

Hey Heather, if you're in that exact situation, then a Lightbox-ish solution is likely what you'll end up using. I'm suggesting that the paradigm of an inline-image that pops up in a larger view (but with nothing else) is generally what I like to avoid. Look at Amazon, NewEgg, Apple, CNN, etc. If you have a product, review, or news website, generally what you'll want is a dedicated location for your users to browse through all the product/story images. This way each individual image can be rated, commented, titled, bookmarked, etc.

Lightbox specifically I find annoying because it covers the entire page and disables the background. If it takes up the whole page, and I can't navigate anything until I close it, I would have preferred to just go to a different page then use the back button.

So basically I don't like the paradigm of small-inline-image-click-to-get-bigger. In some situations it might be perfectly appropriate, but most of the time I don't find it used necessarily or properly.

Regardless of lightbox/thickbox/etc, it'd be nice if the 'insert' module provided support for CCK display formatters.

Insert could be made to work globally with formatters, but as mentioned above, it doesn't make sense to list a lot of formatters that would not work (most notably any link-to-node formatter). Instead each module can implement hook_inline_styles() and specifically state what content should be available for inserting. I specifically made it a different hook because the content that is frequently inserted inline is very different from the content provided by a formatter (especially when the formatter outputs 3 extra DIVs and all you want is the image).

That said, I'd be happy to add more styles to the default package (though I would still prefer to not include Lightboxy things since there are so many alternatives available in that area).

So the capability is now there, let's open separate issues for individual modules/formatters that should be supported.

I just tested it, and unless i'm doing something wrong, it does not support CCK display formatters.

Maybe I have to attempt a fresh install instead of an upgrade. I do see a menu, for example, to select an image cache preset, but it only puts in the original image.

i'm still curious what quicksketch prefers in the case that users need to click thumbnail to larger version?

For posterity, I am uploading a screenshot of Patch #45

As I understand, quicksketch and #26 are recommending the links to content formatters are set from the CCK display menu- not as displayed in the screenshot. This means you could not do this on a per-image basis, however it would work for per content type. This is not working at this moment- and it won't likely be.

@quicksketch #54 - thanks for the response. sorry i was editing those posts and reinstalling while you were writing.

i really want to set something up that is forward-thinking. so keen to use imagefield.

just really liked the functionality of insert ever since i saw it. but in this case i need lightbox.

i see what you mean about the product catalogues. i can't think of situations where people have small images that don't link to bigger ones. but i suppose there's lots of ways to do it.

lightbox works well when you don't need to add additional content to an image or if for some reason you want to exclude UI distractions to view an image alone. maybe not your cup of tea (or even mine) but some people find it very attractive looking.

Thank you so much for the new insert modules and all the patches. I switched to insert and everything seems fine.

In my particular case (maybe many others too), I needed the Lightbox support. I tried to study the patch at #22 for clues, however I'm too green in php to understand all the codes. Please kindly guide me where to make the modifications in order to enable Lightbox just like the patch at #22.

Thank you so much.

@heather, @ccrackerjack, I would suggest opening a feature request on Lightbox2's issue queue for them to add the necessary hooks to work with insert. While you're at it you could open one up on highslide module as well, so that I remember to implement it there! ;)

Setting back to fixed. The support has been added, and now its up to Lightbox2 to implement it. Why is 'link to node' listed in the title of this issue? Removing that as well.

Per @quicksketch, open a new feature request for any other formatters that you feel should ship with insert.

Dear q0rban,

Thank you for your prompt response.

To prevent duplicate entries, do you mind opening the feature request on Lightbox2's issue queue? I'm sure you can organize the ticket much better than me :)

@ccrackerjack, I would, but I don't use lightbox. I needed this to be able to write my own implementations. ;)

I have added the feature request on Lightbox2 issue queue.

http://drupal.org/node/613946

I've also clarified the issue on Highslide's queue

http://drupal.org/node/498928#comment-2188950

More people need to know how freeking cool Insert is. I shall do my part.

Thanks quicksketch! I love all the image inserting and inline loveliness you are doing.

I've added needed hooks in fancybox module, fancy lightbox alternative. If anyone wants to play with it, code is attached here.

Unfortunately module is still lacking offical D6 release.

Congrats on an already awesome module, I have been playing with it today and this is going to make my life a whole lot easier. :) So big thanks to @quicksketch and everyone else who has contributed to Insert. I am dearly looking forward to the Lightbox functionality as I desperately need this on my site. Fingers Crossed that Lightbox picks up the request and includes Insert in the supported modules.

I am pretty new to Drupal, and am still struggling with patching modules, from what I can acsertain from post #45 if I use this patch I will have Lightbox functionality in the current module, is that right? Please excuse my naivety, I am more a frontend designer than a dev (But trying to learn!) and patches and CVS still phases me. :(

Anyway thanks again guys for the awesome Insert module, If my site ever makes any money! I will be sending you guys a nice donation :)

Cheers

TiG :)

subscribing

Is this feature committed yet?

Subscribing

@sinasalek, yes this is committed/fixed. If you are looking for support for a specific module, you need to hit up that module's maintainer, asking them to implement insert's hooks to expose its formatters.

@q0rban Glad to hear that, thanks

subscribing

it seems this feature of having Lightbox2 presets is broken after security update in Lightbox2 to 1.10
can anyone confirm ?

@hedac

I can confirm this. Everytime I've tried adding images, It will put in the anchor but it doesn't include the image inside the element. I have been playing around with some of the input filters. Do the filters need to be set up in a specific way for this to work?

Yep, Lightbox2 presets is broken.
I reopened the issue.

Please do not reopen this "feature request", as it has already been "fixed". Look in the Lightbox2 queue for problems with the Lightbox2 Insert styles.