Home → Velocity Formats →

Emulating Bricks with JS - issue handling images

• Edit

birwin

29 Jan, 2015 02:58 PM

Hi All, I must be missing something simple here - but I'm scratching my head trying to figure this out.

Our site is primarily in XSLT which make content replace (Bricks concept) very difficult. To port the idea to our site, I've made a "Britcionary" which is an index block, which index's blocks of content, whether that be a single word, or WYSIWYG content.

My Velocity script (I also tried writing in XSLT just cause) seems to handle words perfectly, some sentences, but seems to choke on images (html) content. I've tried using the Escape tool but had no luck being able to transform the html into escaped text so I can store in my JS dictionary.

This JS dictionary is used at run time to replace words in selected content block.

I've attached the sample Index block, the format and the current output. Also a crude example in XSLT, if anyone can assist me in transforming the

<brickValueSentence>
                <img alt="Alt Text" height="138" src="site://www.wlu.ca/_Brens Tests/c34sskxv56wdkmwg7nvt.gif" width="200" />
            </brickValueSentence>
            
 into an escaped string, I'd appreciate it - I use the "Sentence option" because it allows staff to choose images in content.
 
 Thanks kindly,
 
 Bren

• Bricks_-_Block.txt 3.83 KB
• Bricks_-_Format.txt 1.74 KB
• Bricks_-_output.txt 843 Bytes
• Bricks_-_Crude_example_in_XSLT.txt 2.31 KB

1. 1 Posted by Ryan Griffith on 29 Jan, 2015 03:30 PM

   

   Hi Brendon,

   If brickValueSentence is a WYSIWYG field, I am assuming the following is used to simply check to see if the value is HTML, plaintext, or empty?

   #if( $xml.children.size() == 0 )
       #set( $value =  $page.getChild('brickValueSentence').value )
       #set( $value = ${_EscapeTool.xml($value)} )
   #else
       #foreach( $child in $xml.children )
           #set( $value = ${_EscapeTool.xml($child.value)} ) ## works for sentence with quotes but not image
           
           #if( $value == "" )
                ##$child.getChild("src"); 
               
           #end
           
           
           ###if( $child
           ##set( $value =${_EscapeTool.html( ${_EscapeTool.xml($child.value)} ) } )
           ##set( $value = $value + $child.toString() )
       #end
   #end
   

   If so, we actually have a simpler version of checking for an WYSIWYG field posted here on our KB for future reference.

   When you have a moment, give the following a try and let me know how it works out:

   #set( $xml = $_XPathTool.selectSingleNode($page, "brickValueSentence") )
   ## Test to see if the Element's value is not empty, or if the Element has children
   #if ($xml.value != "" or $xml.getChildren().size() > 0)
       #set ($value = $_EscapeTool.html($_SerializerTool.serialize($wysiwygField, true)) 
   #end
   

   Note: I removed the extra EscapeTool.xml call because I am pretty sire the html method would be escaping the same characters anyway.

   Please let me know if you have any questions.

   Thanks!

   • Edit

2. 2 Posted by birwin on 29 Jan, 2015 06:06 PM

   

   Thanks Ryan, that certainly got me further along on the right track - I found if I removed both the EscapeTool.html, and the EscapeTool.xml, leaving just the SerialierTool (that one I could not remember) It gets me much closer to my end goal.

   I'm able to output something like so:

    new Array("[brick-picture]", '<img alt="Alt Text" height="138" src="site://www.wlu.ca/_Brens Tests/c34sskxv56wdkmwg7nvt.gif" width="200" />'),
   

   I'll worry about proper escaping later. The trouble with this, is if we look at the image src, it still uses the cascade Source, rather than the actual source. Can you think of away around that?

   Thanks again,

   Brendon

   • Edit

3. 3 Posted by Ryan Griffith on 29 Jan, 2015 06:44 PM

   

   Thank you for following up, Brendon, I am glad to hear my suggested change helped out.

   Regarding the escaping, you might be able to just get away with using EscapeTool.java and surround the string with double-quotes as opposed to single. What will happen is the java method will properly escape all of the the double-quotes within the string for you (eg \") and just leave the single quotes alone since you won't need to escape them anymore.

   For the image path, what are you seeing when you publish things out and test it? Is the path being rewritten by Cascade?

   Please let me know if you have any questions.

   Thanks!

   • Edit

4. 4 Posted by birwin on 29 Jan, 2015 07:09 PM

   

   Great idea using the Java escaper - that seems to work - I may have to check if all the escaping works the way we want it to, but the main issue (I think) may be the fact that I am building this dictionary within a velocity script which is used in a page whis is output as a js file. This JS file would then be included on subsequent pages so, if required we can publish 1 dictionary file rather than republishing the whole site to do some content replacement.

   • outputjs.txt 1.13 KB
   • sample_output.PNG 130 KB
   • sample_text.PNG 20.1 KB
   • Edit

5. 5 Posted by Ryan Griffith on 29 Jan, 2015 08:24 PM

   

   Hi Brendon,

   Based on that sample output screenshot, it definitely looks as though the path is not being tracked/rewritten by Cascade Server. I'm curious if the issue is that the path itself is being escaped (perhaps from the Escape Tool?) and that is causing Cascade to overlook it.

   Your snippet above looks different, though. Have you tried using the variation without the Escape Tool?

   Please let me know if you have any questions.

   Thanks!

   • Edit

6. 6 Posted by birwin on 29 Jan, 2015 08:34 PM

   

   Hmm,

   I have changed the format as follows:

               ##set ($value = ( ${_EscapeTool.java($_SerializerTool.serialize($xml, true))} ) )
               #set ($value = $_SerializerTool.serialize($xml, true) )

   The problem with this, is it outputs the un-escaped values

    new Array("[brick-word]", "<p>This is my sentence "Hello Brendon!", It's a lovely day isn't it? (Hopefully this is escapable)</p>"), (invalid js b/c of " / ' )
    new Array("[brick-picture]", "<img alt="Alt Text" height="138" src="site://www.wlu.ca/_Brens Tests/c34sskxv56wdkmwg7nvt.gif" width="200" />"),
    
    which is in-valid JS so I had left the .java in there to properly escape it.
    
    Is there a way to fix the paths and then escape?
    
    Thanks!
    
    Brendon

   • Edit

7. 7 Posted by Ryan Griffith on 29 Jan, 2015 08:53 PM

   

   Just to confirm, you are saying it is invalid due to the nested double quotes, right? If so, have you tried changing:

   new Array("$brickName","$value"),
   

   to the following (and leaving out the escaping as well):

   new Array("$brickName",'$value'),
   

   This would avoid the escaping of the slashes.

   Thanks!

   • Edit

8. 8 Posted by birwin on 29 Jan, 2015 09:15 PM

   

   Hi Ryan,

   Yep I had tried your example above. Which would work for our image scenario, but not when we have a sentence like "It's a beautiful day" said some guy.

   Hope that makes sense

   thanks for looking into this!

   Brendon

   • Edit

9. 9 Posted by Ryan Griffith on 30 Jan, 2015 02:51 PM

   

   Ah OK, definitely makes sense the single quotes would still need to be escaped.

   In that case, you could try passing the string through the following replacement call to escape all single quotes with a slash:

   #set ($value = $_SerializerTool.serialize($xml, true).replaceAll("'", "\\'") )
   
   ...
   
   new Array("$brickName",'$value'),
   

   Please let me know if you have any questions.

   Thanks!

   • Edit

10. 10 Posted by birwin on 30 Jan, 2015 04:24 PM

    

    Hi Ryan, still no luck - sorry!

    I used what you wrote and no luck, I even tried adding a .replaceAll('"', '\\"' ) so the string was escaped both ways, but the output was the same,

    the JS being output was valid - however, the CMS doesn't fix the site://

    Perhaps I am stuck doing a string replace on the site:// and removing it. In theory the images will be in the same spot once published, and this would work: #set ($value = $_SerializerTool.serialize($xml, true).replaceAll("'", "\\'").replaceAll("site://", "//" ) )

    but for our testers, where our Test web server is not our actual website - it wont output the correct links, so if the content isn't yet published to the life site it wont render.

    Any other thoughts?

    Thanks again for all the ideas!

    Brendon

    • Edit

11. 11 Posted by Ryan Griffith on 30 Jan, 2015 04:55 PM

    

    Thank you for testing, Brendon. I'm still convinced the paths should be tracked by Cascade.

    When you have a moment, please provide the XML for your _Brens Tests/Brick Data Definition and your Velocity Format at this point so I can do some local testing with this.

    Just to confirm, are you applying this Format and an Index Block (that indexes SD Blocks) to the region of the page who's WYSIWYG content contains one of these bricks?

    Thanks!

    • Edit

12. 12 Posted by birwin on 30 Jan, 2015 06:13 PM

    

    Hey if we can do it, awesome!

    Attached :
    Brick.xml - this is the data definitions
    javascript_code_export.xml - this is the template
    Brictionary.vel - the Brictionary script. I was going to build a surronding block to replace site name etc, but I have commented that out.

    Thanks!

    Brendon

    • Brick.xml 439 Bytes
    • javascript_code_export.xml 101 Bytes
    • Brictionary.vel 1.65 KB
    • Edit

13. 13 Posted by Ryan Griffith on 30 Jan, 2015 07:51 PM

    

    OK, so I was able to confirm these paths don't seem to be working, same for links to pages as well.

    To remedy this, I tweaked your format to run a replaceAll on the string to wrap any internal links (ie beginning with site:// or /) with [system-asset] pseudo tags to force Cascade to track the links. It should skip all other links, such as // or http(s)://.

    I also noticed that if your WYSIWYG brick has multiple lines, the JavaScript will fail because the value's string would be broken into multiple lines in the JS. To fix this, all we need to do is run the end result of the string in another replaceAll to remove newline characters.

    I've attached the updated Format for you to try out.

    Please let me know if you have any questions.

    Thanks!

    • Brictionary.vel 1.8 KB
    • Edit

14. 14 Posted by birwin on 30 Jan, 2015 07:54 PM

    

    Haha, Thanks Ryan, I had actually built a block "wrapper" which contained the index block of all the words, and then provides the user with the site name and server address so that site:// could be changed to either // (relative) or a http:// server address where the files are published. I'll have a peak at that format.

    So should this be placed in the bug tracker? Perhaps come next Cascade Conference you and I can demo some of these things I keep bugging you about. I got some... big ideas haha.

    Thanks again!

    Brendon

    • Edit

15. 15 Posted by Ryan Griffith on 02 Feb, 2015 01:34 PM

    

    Not a problem at all, Brendon. Please keep me posted on how the updated Format I provided works out.

    I had actually built a block "wrapper" which contained the index block of all the words, and then provides the user with the site name and server address so that site:// could be changed to either // (relative) or a http:// server address where the files are published.

    I've seen something similar, but the client actually used the Site's name as the URL with a delimiter for any subdirectories. For example, they had a Site named www.example.com_sub_directory and they would perform a replacement of the delimiter with slashes on the value of <site> and add the protocol on the front. So, in this case you would end up with something like //www.example.com/sub/directory.

    So should this be placed in the bug tracker?

    I've seen this in the past as well with Velocity formats. I think this behavior may be related to this logged improvement where internal links are not being tracked, but they are when surrounded with [system-asset] tags. I believe it is difficult to properly track internal links because Velocity isn't easily parseable; however, with the pseudo tags as tokens it is easier to locate such links. On top of that, we're loading the content dynamically, so I think at that point the additional XML serialization isn't running to rewrite internal links as well.

    Please let me know if you have any questions.

    Thanks!

    • Edit

16. Ryan Griffith closed this discussion on 16 Feb, 2015 02:11 PM.