Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • stevo 63 posts 106 karma points
    Feb 16, 2012 @ 21:17
    stevo
    0

    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

  • Mike Chambers 636 posts 1253 karma points c-trib
    Feb 16, 2012 @ 21:51
    Mike Chambers
    0

    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.

  • stevo 63 posts 106 karma points
    Feb 16, 2012 @ 22:20
    stevo
    0

    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

  • Badzi 7 posts 27 karma points
    Jul 11, 2012 @ 15:00
    Badzi
    0

     

    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

     

  • David Peck 690 posts 1896 karma points c-trib
    Jul 12, 2012 @ 19:19
    David Peck
    0

    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.

Please Sign in or register to post replies

Write your reply to:

Draft