Home → Velocity Formats →

changing class names in format using velocity

• Edit

matthew.wren

03 Jul, 2014 02:39 PM

I created an article page that uses velocity. There's a class name in the HTML that changes the effect of the article. I think the best way is to have a dropdown with the class name inside and it will replace the section of the name with that content.

Here is the page

Here's the Velocity

#set($author = $_XPathTool.selectSingleNode($contentRoot,"//author").value)
#set($datetime = $_XPathTool.selectSingleNode($contentRoot,"//datetime").value)
#set($mainContent = $_XPathTool.selectSingleNode($contentRoot,"//system-page/system-data-structure/main-content"))
#set($mainImage = $_XPathTool.selectSingleNode($contentRoot,"//mainImage/link").value)
#set($mainTitle = $_XPathTool.selectSingleNode($contentRoot,"//headline").value)
#set($tagline = $_XPathTool.selectSingleNode($contentRoot,"//tagline").value)

 <div class="container intro-effect-fadeout" id="container">
            <!-- Top Navigation -->
            <header class="header">
                <div class="bg-img">
                      <img src="$mainImage" alt="Celebrating 125 years" />
                </div>
                <div class="title">
                    <h1>$mainTitle</h1>
                    <p class="subline">
                        <p class="subline">$tagline</p>
                    </p>
                    <p>by <strong>$author</strong> &#8212; Posted in <strong>Animals</strong> on <strong>$datetime</strong></p>
                </div>
            </header>
            
            <article class="content">
                <div>
                    $_SerializerTool.serialize( $mainContent, true)
                </div>
            </article>
        </div>

Right now this line <div class="container intro-effect-fadeout" id="container"> has the name fadeout hardcoded into the format.

I created a dropdown with the other class names

<system-data-structure>
  <text type="dropdown" identifier="effect" label="Choose Effect">
    <dropdown-item value="push"/>
    <dropdown-item value="fadeout"/>
    <dropdown-item value="sliced"/>
    <dropdown-item value="side"/>
    <dropdown-item value="sidefixed"/>
    <dropdown-item value="grid"/>
    <dropdown-item value="jam3"/>
  </text>

How can I create it so that the dropdown inserts the name into the class name?

1. Support Staff 1 Posted by Tim on 03 Jul, 2014 03:13 PM

   

   Hi Matthew,

   If I understand correctly, you should just be able to create a variable to store the effect (much like you are setting the author, datetime, etc) and then place that effect variable in your <div> statement. At that point, for example, this line:
   

   <div class="container intro-effect-fadeout" id="container">
   

   would maybe look something like this:
   

   <div class="container intro-effect-$effect" id="container">
   

   (where $effect is the variable you've created that contains the setting from the Page)

   Hope this helps!

   • Edit

2. 2 Posted by matthew.wren on 03 Jul, 2014 03:21 PM

   

   okay that's what I thought!

   I added this to the format
   <div class="container intro-effect-$effect" id="container">

   but I don't' think I have this snippet written correctly
   #set($effect = $_XPathTool.selectSingleNode($contentRoot,"//dropdown").value)

   do I have to do something differently since it's a dropdown?

   • Edit

3. Support Staff 3 Posted by Tim on 03 Jul, 2014 03:46 PM

   

   do I have to do something differently since it's a dropdown?

   I would recommend taking a look at the XML output for a Page where you've selected an effect. This will give you an idea of how you'll need to write your XPath statement. If you still have trouble, feel free to attach the XML output for one of these Pages and I'll be happy to take a look.

   Thanks!

   • Edit

4. 4 Posted by matthew.wren on 03 Jul, 2014 05:19 PM

   

   I'm tried a few things with no success.

   this is the data structure XML
   

   <system-data-structure>
     <text type="dropdown" identifier="effect" label="Choose Effect">
       <dropdown-item value="push"/>
       <dropdown-item value="fadeout"/>
       <dropdown-item value="sliced"/>
       <dropdown-item value="side"/>
       <dropdown-item value="sidefixed"/>
       <dropdown-item value="grid"/>
       <dropdown-item value="jam3"/>
     </text>
     <text identifier="headline" label="Headline" default="Headline Goes Here" required="true"/>
     <text identifier="tagline" label="Tagline "/>
     <text identifier="author" label="Author"/>
     <asset type="file" identifier="mainImage" label="Main Image"/>
     <text type="datetime" identifier="publication-date" label="Publication Date"/>
     <text wysiwyg="true" identifier="main-content" label="Main Content"/>
   </system-data-structure>
   

   The Velocity Format
   

   #set($author = $_XPathTool.selectSingleNode($contentRoot,"//author").value)
   #set($datetime = $_XPathTool.selectSingleNode($contentRoot,"//datetime").value)
   #set($mainContent = $_XPathTool.selectSingleNode($contentRoot,"//system-page/system-data-structure/main-content"))
   #set($mainImage = $_XPathTool.selectSingleNode($contentRoot,"//mainImage/link").value)
   #set($mainTitle = $_XPathTool.selectSingleNode($contentRoot,"//headline").value)
   #set($tagline = $_XPathTool.selectSingleNode($contentRoot,"//tagline").value)
   #set($effect = $_XPathTool.selectSingleNode($contentRoot,"//dropdown").value)
    <div class="container intro-effect-$effect" id="container">
               <!-- Top Navigation -->
               <header class="header">
                   <div class="bg-img">
                         <img src="$mainImage" alt="Celebrating 125 years" />
                   </div>
                   <div class="title">
                       <h1>$mainTitle</h1>
                       <p class="subline">
                           <p class="subline">$tagline</p>
                       </p>
                       <p>by <strong>$author</strong> &#8212; Posted in <strong>Animals</strong> on <strong>$datetime</strong></p>
                   </div>
               </header>
               <article class="content">
                   <div>
                       $_SerializerTool.serialize( $mainContent, true)
                   </div>
               </article>
           </div>
   

   And the format with the xml output from the page.
   

   <system-index-block current-time="1404407969444" name="calling-page" type="folder">
       <calling-page>
           <system-page current="true" id="ece79bc586c604b2389460029acae13f">
               <name>index</name>
               <system-data-structure definition-path="article-intro-effects/article">
                   <effect>fadeout</effect>
                   <headline>Headline Goes Here</headline>
                   <tagline>hello this is tagline</tagline>
                   <author>Matthew Wren</author>
                   <mainImage type="file">
                       <content/>
                       <path>/_private/experimental-page/img/2.jpg</path>
                       <link>site://www.scranton.edu/_private/experimental-page/img/2.jpg</link>
                       <site>www.scranton.edu</site>
                       <name>2.jpg</name>
                   </mainImage>
                   <publication-date>1403668800000</publication-date>
                   <main-content>
                       <p>We may define a food to be any substance which will repair the functional waste of the body, increase its growth, or maintain the heat, muscular, and nervous energy.</p>
                       <p>In its most comprehensive sense, the oxygen of the air is a food; as although it is admitted by the lungs, it passes into the blood, and there re-acts upon the other food which has passed through the stomach. It is usual, however, to restrict the term food to such nutriment as enters the body by the intestinal canal. Water is often spoken of as being distinct from food, but for this there is no sufficient reason.</p>
                       <p>Many popular writers have divided foods into flesh-formers, heat-givers, and bone-formers. Although attractive from its simplicity, this classification will not bear criticism. Flesh-formers are also heat-givers. Only a portion of the mineral matter goes to form bone.</p>
                       <p>These last are not strictly foods, if we keep to the definition already given; but they are consumed with the true foods or nutrients, comprised in the other two classes, and cannot well be excluded from consideration.</p>
                       <p>Water forms an essential part of all the tissues of the body. It is the solvent and carrier of other substances.</p>
                       <p>Mineral Matter or Salts, is left as an ash when food is thoroughly burnt. The most important salts are calcium phosphate, carbonate and fluoride, sodium chloride, potassium phosphate and chloride, and compounds of magnesium, iron and silicon.</p>
                       <h3>Flesh-formers, heat-givers, and bone-formers</h3>
                       <p>Mineral matter is quite as necessary for plant as for animal life, and is therefore present in all food, except in the case of some highly-prepared ones, such as sugar, starch and oil. Children require a good proportion of calcium phosphate for the growth of their bones, whilst adults require less. The outer part of the grain of cereals is the richest in mineral constituents, white flour and rice are deficient. Wheatmeal and oatmeal are especially recommended for the quantity of phosphates and other salts contained in them. Mineral matter is necessary not only for the bones but for every tissue of the body.</p>
                       <p>When haricots are cooked, the liquid is often thrown away, and the beans served nearly dry, or with parsley or other sauce. Not only is the food less tasty but important saline constituents are lost. The author has made the following experiments:&#8212;German whole lentils, Egyptian split red lentils and medium haricot beans were soaked all night (16 hours) in just sufficient cold water to keep them covered. The water was poured off and evaporated, the residue heated in the steam-oven to perfect dryness and weighed. After pouring off the water, the haricots were boiled in more water until thoroughly cooked, the liquid being kept as low as possible. The liquid was poured off as clear as possible, from the haricots, evaporated and dried. The ash was taken in each case, and the alkalinity of the water-soluble ash was calculated as potash (K2O). The quantity of water which could be poured off was with the German lentils, half as much more than the original weight of the pulse; not quite as much could be poured off the others.</p>
                   </main-content>
               </system-data-structure>
           </system-page>
       </calling-page>
   </system-index-block>
   

   • Edit

5. Support Staff 5 Posted by Tim on 03 Jul, 2014 07:19 PM

   

   So, it looks like in your Format you've done this:
   

   #set($effect = $_XPathTool.selectSingleNode($contentRoot,"//dropdown").value)
   

   But if you look at the actual output of the Page in question, you'll see that there is no 'dropdown' element. Instead, the effect is located here:
   

   <system-data-structure definition-path="article-intro-effects/article">
       <effect>fadeout</effect>
       ...
   </system-data-structure>
   

   So, you'll need to change your XPath statement to something like this:
   

   #set($effect = $_XPathTool.selectSingleNode($contentRoot, "//effect").value)
   

   Let me know if that makes sense.

   Thanks

   • Edit

6. 6 Posted by matthew.wren on 03 Jul, 2014 07:34 PM

   

   of course that makes sense...and works! Thank you! Are there more resources about velocity (and maybe xslt)? I've been looking at http://www.hannonhill.com/kb/Script-Formats/ but it's the only thing I've found about Velocity.

   • Edit

7. Support Staff 7 Posted by Tim on 03 Jul, 2014 07:55 PM

   

   Glad I could help!

   You can check out the Apache Velocity site for a decent intro to using Velocity. Just keep in mind that not all of the libraries they use throughout the Apache docs are available within Cascade Server.

   XSLT, on the other hand, has numerous resources available. The first one that comes to mind:

   http://www.w3schools.com/xsl/

   And actually, if you check out this post, you'll see folks mentioning a bunch of other resources that they find useful.

   Hope this helps!

   • Edit

8. Tim closed this discussion on 27 Apr, 2015 07:18 PM.