i would like to make it possible to insert images into TinyMCE editor which should appear in a lightbox on the clientside. So instead of inserting <img /> it should be <a href="orgImagePath" rel="lightbox"><img src="thundnailPath" /></a>.
I have already tried some solutions, but none of them make me happy as developer. I am also unsure of the caching and general umbraco performance mechanics resulting from the various aproaches.
Here are the quick solutions I am considering:
1. insert lightbox image over a macro: Create macro with a parameter from type "mediaCurrent".
Pro: - simple to develop - automatically generates the right thunbnail image size in the editor
Contra: - no direct access to macro (TinyMCE Button) - 4 clicks to insert an image - WYSIWYG might break? - performance issuses? in the /App_Data/Umbraco.config is instanceof the html snippet the macro call artifact
2. Parsing the output from the TinyMCE editor in the codebehind. Parse the output with "HtmlAgilityPack.dll" Library and repleace all <img /> with <a rel="lightbox" href="orgImagePath"><img src="thundnailPath" /></a>.
Pro: - The Editor will notice nothing / simple to use
Contra: - Performance? bypass the Umbraco caching mechanics?
3. create own TinyMCE plugin with an copy of the Umbraco insert image dialog (/umbraco/plugins/tinymce3/insertImage.aspx)
pro: - The Editor notice nothing / simple to use - could use the Umbraco caching mechanics?
Contra: - high complexity (not really test/develop yet) - copy Umbaco internal scource code - maybe problem by during update in the future
4. client side dom manipulation with jquery This point just came up as im writting this post.
pro: - The Editor notice nothing / simple to use - could use the Umbraco caching mechanics?
Contra: - dom manipulation on the client
What approach would you reccomend? Has anbody already implemented a similar solution? If yes how.
Thanks you in advance and sorry for my basic English. Stevo
We went with option 3 approach... only invovles updating 2 files in the insertImage.aspx and the related javascript file no need to recompile any source... and actually the functionality is somewhat already there from the original tinymce code for allowing javascript popup windows just commented out.... It's fairly easy to understand.
I think semantically this sits quite well as all you are actually doing is adding in the rel attribute to the existing link insertion techniques.
With regards to updating, as you may have seen from a recent umbraco blog post people rarely update between major versions, tending to stick to patch revisions. Our approach is to download the patch release and then use a comparisson tool to synchronise the bin, umbraco, umbraco_client and take note of any web.config changes. Total Commander is our tool of choice, you can see a side by side file contents comparisson and it serves as a prompt to show what's been changed and also a reminder of any of your own code modifications to reapply.
Hi, Can somebody indicate me which files need to be modified to accompish the modification 3 on the stevo's initial post. I can see the method "ImageDialog.insert()" on the umbraco image Dialog but unable to find javasript source code file on wich this "insert()" methos is implemented.
I would suggest just linking to an image, and giving is a CSS style. You can then use fancyBox (other plugins are available) to display all images at full size. You could even use ImageGen to create a thumbnail.
Lightbox with TinyMCE
Hello Guys,
i would like to make it possible to insert images into TinyMCE editor which should appear in a lightbox on the clientside. So instead of inserting <img /> it should be <a href="orgImagePath" rel="lightbox"><img src="thundnailPath" /></a>.
I have already tried some solutions, but none of them make me happy as developer. I am also unsure of the caching and general umbraco performance mechanics resulting from the various aproaches.
Here are the quick solutions I am considering:
1. insert lightbox image over a macro:
Create macro with a parameter from type "mediaCurrent".
Pro:
- simple to develop
- automatically generates the right thunbnail image size in the editor
Contra:
- no direct access to macro (TinyMCE Button)
- 4 clicks to insert an image
- WYSIWYG might break?
- performance issuses? in the /App_Data/Umbraco.config is instanceof the html snippet the macro call artifact
2. Parsing the output from the TinyMCE editor in the codebehind.
Parse the output with "HtmlAgilityPack.dll" Library and repleace all <img /> with <a rel="lightbox" href="orgImagePath"><img src="thundnailPath" /></a>.
Pro:
- The Editor will notice nothing / simple to use
Contra:
- Performance? bypass the Umbraco caching mechanics?
3. create own TinyMCE plugin with an copy of the Umbraco insert image dialog (/umbraco/plugins/tinymce3/insertImage.aspx)
pro:
- The Editor notice nothing / simple to use
- could use the Umbraco caching mechanics?
Contra:
- high complexity (not really test/develop yet)
- copy Umbaco internal scource code
- maybe problem by during update in the future
4. client side dom manipulation with jquery
This point just came up as im writting this post.
pro:
- The Editor notice nothing / simple to use
- could use the Umbraco caching mechanics?
Contra:
- dom manipulation on the client
What approach would you reccomend? Has anbody already implemented a similar solution? If yes how.
Thanks you in advance and sorry for my basic English.
Stevo
We went with option 3 approach... only invovles updating 2 files in the insertImage.aspx and the related javascript file no need to recompile any source... and actually the functionality is somewhat already there from the original tinymce code for allowing javascript popup windows just commented out.... It's fairly easy to understand.
I think semantically this sits quite well as all you are actually doing is adding in the rel attribute to the existing link insertion techniques.
With regards to updating, as you may have seen from a recent umbraco blog post people rarely update between major versions, tending to stick to patch revisions. Our approach is to download the patch release and then use a comparisson tool to synchronise the bin, umbraco, umbraco_client and take note of any web.config changes. Total Commander is our tool of choice, you can see a side by side file contents comparisson and it serves as a prompt to show what's been changed and also a reminder of any of your own code modifications to reapply.
Hey Mike,
thanks a lot for your quick reply!
Would you like to share the two files with us or upload somewhere?
This would be awesome!
thx, stevo
Hi,
Can somebody indicate me which files need to be modified to accompish the modification 3 on the stevo's initial post.
I can see the method "ImageDialog.insert()" on the umbraco image Dialog but unable to find javasript source code file on wich this "insert()" methos is implemented.
<input id="SubmitInsertImage" type="submit" value="{#insert}" style="width: 60px;" onclick="ImageDialog.insert();return false;" />Thank you in advance for your help
-Badzi
I would suggest just linking to an image, and giving is a CSS style. You can then use fancyBox (other plugins are available) to display all images at full size. You could even use ImageGen to create a thumbnail.
is working on a reply...