9 Replies Latest reply on Jan 27, 2015 3:57 PM by david.bastedo

    Image Map in Text Widget or Jive Document




      I'm looking to create an Image map in a Formatted Text Widget or a Document. I was able to generate the code from a 3rd party Image Map generator, but when I insert this image-map code snippet into a Formatted Text Widget or a Jive Document, it does not render the image correctly.


      The code that contains the <area> tag (and all its attribute like shape, href, style and target) is just shown as plain text when I save (render) the document or the text widget. I am copying the code and pasting into the Text widget/document in HTML format by clicking on the 'HTML' button in the toolbar, which displays the html code behind any content in the formatted text widget or a document.


      We are using Jive SBS 8c4.2 .

      What is the best way to enable an Image map in a Formatted Text Widget or a Jive Document? I am not a developer, so if you can guide me for enabling any settings, that would be helpful as well.




        • Re: Image Map in Text Widget or Jive Document

          Hi Mandar - You may have better luck with the "HTML Widget", as this can sometimes work better with custom HTML like what you're using.  The formatted text widget will strip out various types of HTML tags in order to maintain a consistent style.

            • Re: Image Map in Text Widget or Jive Document

              Thanks for your response David.


              The problem with this is that I will need to create a sub-space or a project everytime I need to do an Image map, since the HTML widget is a 'Widget' and Widgets can only be placed in a sub-space or a project page. Hence, if I have many such image-maps, I will need to create many such sub-spaces/project pages which does not look feasible in the long run. Also, there is the huge banner being displayed at the top of each sub-page, which I would like to remove.


              Bottom line is that this kind of content that I have is best suited for a Jive document. I tried doing this, but as you said, the formatted text widget or the Jive document is stripping out various HTML tags, in this case namely - <Area> tag and its attributes for the image mapping.


              Is there any way I can add these tags into a 'Safe' list in the Admin console, which I have access to, so that these tags are not stripped off? If so, can you please let me know where I need to add it and how to then enable (activate) it?

                • Re: Image Map in Text Widget or Jive Document

                  One option may be to go into Admin Console: Spaces > Settings > Filters & Macros > HTMLFilter


                  You'll see some sections which control what types of HTML tags and attributes are stripped out of various pieces of content. Although this section doesn't reference the area html tag, there may be other tags or attributes you're pasting in that are causing the content to be stripped out.

              • Re: Image Map in Text Widget or Jive Document

                Another disadvantage of using the HTML widget on a sub-space that I just remembered is that I loose the ability to Like, Comment, Rate etc - all the collaboration features that Jive was built for.


                Anyways, would you kindly help me in identifying the exact Name/value pair in Admin Console: Spaces > Settings > Filters & Macros -> HTML:HTMLFilter, which I have to modify?



                There are a lot of options, none of which contain a mention of the <Area> tag. I did find the <Style> tag though, but removing it, make no impact:


                Can you please tell me the exact tag that is being stripped out in the screenshot above? Here is the HTML Image Map code that is not rendering correctly in a Text Widget/Jive Document:


                <img id="some_image_id" src="<http: some http url>" border="0" width="1250" height="369" orgWidth="1250" orgHeight="369" usemap="#some_image" alt="" />


                <map name="some_image" id="some_image_id">

                <area alt="" title="Yahoo" href="http://www.yahoo.com/" shape="poly" coords="149,115,312,115,394,201,312,287,147,285,227,200" style="outline:none;" target="_self"     />

                <area alt="" title="CNN" href="http://www.cnn.com/" shape="poly" coords="321,114,484,114,566,200,483,287,317,287,399,201" style="outline:none;" target="_self"     />



                Thanks again,


                • Re: Image Map in Text Widget or Jive Document

                  David, the problem is not with the HTML Widget. The code above and every other HTML code for Image mapping runs fine in an 'HTML Widget'. I have no issues with the HTML widget when it comes to Image mapping.


                  The issue is, that I don't want to use an HTML Widget. I want to use an Image map in a 'Formatted Text Widget' or a Jive Document (Actions -> Create 'Document'). When I use the <HTML> button in the Text editor, I see the HTML code behind the Text that I have in my text editor. If I place the above HTML code in that HTML view of the Text editor, it does not render correctly. See below for screenshot:



                  For some reason the Text Editor is completely decimating the above code and making it appear as below:

                  I cannot see the <Image Id> tag. The '<' and '>' are also not showing correctly.


                  Hence my questions below:

                  1. Why is the text editor stripping out the HTML code?
                  2. Is there anything I can do in the 'Admin Console' so that it does not strip out those HTML tags that render an image map?


                  Can you help?

                    • Re: Image Map in Text Widget or Jive Document

                      Ah - I see.  Sorry about the confusion there!


                      From what I can tell from my testing and research isn't a way to prevent the HTML filter in documents / formatted text widgets from filtering out the ID property on HTML elements.  This seems to be what is happening here with the custom HTML.  This is something that our rich text editor does on the fly - For example, if you paste in the HTML with the "id" attribute and value and then flip to the "Editor" mode and then back to "HTML" mode you will see that the ID is immediately stripped out, even before saving the document.


                      This behavior looks to be a part of the built in HTML sanitation process in Jive's rich text editor, which is based on TinyMCE.  I can't speak to exactly why this happens, but I suspect it is to prevent users from accidentally or maliciously using HTML elements with IDs that would conflict with other elements on the page and thus causing potential errors or security vulnerabilities.


                      It does not look like there is any way out of box the to change this behavior or how the rich text editor cleans up certain HTML attributes like "id". This would likely require some sort of customization to the platform.


                      I apologize for the inability here to embed this type of HTML into Jive's documents or formatted text widget. Let me know if there are any follow up questions or anything I've missed.

                    • Re: Image Map in Text Widget or Jive Document

                      No need to apologize David. I can understand the technical complications. However, is there any ways to isolate that Image map ID in any way (iframe perhaps?), so that it does not conflict with other elements on the page? What is the customization that can be done on the platform to enable this?


                      Because I cannot place an image mapped image on a Jive Document, I'm loosing key collaboration features on Jive - the ability for someone to comment, like, rate, share the image. I can always use the HTML widget for image mapped images, but how will anyone be able to like, rate or comment on it?

                        • Re: Image Map in Text Widget or Jive Document

                          When it comes to trying to work around the rich text editor issue through a customization, like an extension, you may find more relevant resources in the Jive Developers space, since the Support community is mostly going to be catering to out of the box features.


                          I suspect that this also may be something worth posting over in Ideas for Jive  - I'm not sure exactly what your use case is with the mapped images, but it would be a good idea to post a new Idea over in Ideas for Jive space to see if the platform can formally support mapped images like what you're looking for. This is a place where our product managers review new feature requests for future versions.