scalialaw – Web Design and Services

Add Top Alert Message In Cascade

Go to Site Setup. Edit the Alert field. Submit
Publish the include alert file (maybe this isn’t necessary)
Publish the alerts-json file

How to Create a Cascade Format in Velocity for Breadcrumbs

Add a system-region in the template for the breadcrumbs:

<system-region name="BREADCRUMBS"/>

Create a format in Velocity to populate the breadcrumbs:

#macro(getParentFolders, $asset)
	#set($parent = $asset.parentFolder)
	#set($count = $count + 1)
	#if($parent.name != "/" && $count < 20)
		#set($dummy = $crumbs.add(0, $parent))
		#getParentFolders($parent)
	#else 
		#break
	#end
#end
#set($count = 0)
#set($crumbs = [$currentPage])
#getParentFolders($currentPage)

#set($x = $crumbs.size() - 1)
#if($currentPage.name == "index")
	#set($dummy = $crumbs.remove($x))
#end
#if($currentPagePath != "index")
	Home
#else 
	Home
#end
#foreach($crumb in $crumbs)
	#set($link = $crumb.link + "/index")
	#set($title = $crumb.metadata.title)
	#if($foreach.hasNext)
		>> $_EscapeTool.xml($title)
	#else 
		>> $_EscapeTool.xml($title)
	#end
#end

How to Create a Cascade Format in Velocity for a Carousel

This is the context page from template for reference:

<system-data-structure>
  <carousel>yes</carousel>
    <slide>
      <image type="file">
      <content></content>
      <path>/_images/paintbrush.jpeg</path>
      <link>site://DEV-Donny/_images/paintbrush.jpeg</link>
      <site>DEV-Donny</site>
      <name>paintbrush.jpeg</name>
     <file-size>330352</file-size>
     <width>1920</width>
     <height>1280</height>
     </image>
     <heading>Paintbrushes</heading>
     <alt>Paintbrushes</alt>
   </slide>
   <slide>
     <image>
     <path>/</path>
     </image>
     <heading/>
     <alt><alt/>
   </slide>
   <slide>
     <image type="file">
     <content></content>
     <path>/_images/computer-coffee.jpeg</path>
     <link>site://DEV-Donny/_images/computer-coffee.jpeg</link>
     <site>DEV-Donny</site>
     <name>computer-coffee.jpeg</name>
     <file-size>174729</file-size>
     <width>1920</width>
     <height>1080</height>
     </image>
     <heading>Computer &amp; Coffee</heading>
     <alt>Computer and Coffee</alt>
  </slide>
  <editor>This is my first page.</editor>
</system-data-structure>

Create Cascade format using Velocity:

#set($array = $currentPage.getStructuredDataNodes("slide"))
#set($slides = [])
#foreach($item in $array)
#if($item.getChild("image").asset.path)
#set($dummy = $slides.add($item))
#end
#end
#if($slides.size() > 0 && $currentPage.getStructuredDataNode("carousel").textValue == "yes" )
<header class="carousel slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
#foreach($slide in $slides)
#if($foreach.count == 1)
#set($class = "active")
#else 
#set($class = "")
#end
#set($slideNumber = $foreach.index)
<li class="${class}" data-slide-to="${slideNumber}" data-target="#myCarousel"></li>
#end
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
#foreach($slide in $slides)
#if($foreach.count == 1)
#set($class = "active")
#else 
#set($class = "")
#end
#set($image = $slide.getChild("image").asset.link)
#set($heading = $slide.getChild("heading").textValue)
<div class="item ${class}">
<div class="fill" style="background-image:url('[system-asset]${image}[/system-asset]');"></div>
<div class="carousel-caption">
<h1>$_EscapeTool.xml($heading)</h1>
</div>
</div>
#end
</div>
<!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#myCarousel">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" data-slide="next" href="#myCarousel">
<span class="icon-next"></span>
</a>
</header>
#end

This is the transformation result:

#set($array = $currentPage.getStructuredDataNodes("slide"))
#set($slides = [])
#foreach($item in $array)
#if($item.getChild("image").asset.path)
#set($dummy = $slides.add($item))
#end
#end
#if($slides.size() > 0 && $currentPage.getStructuredDataNode("carousel").textValue == "yes" )
<header class="carousel slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
#foreach($slide in $slides)
#if($foreach.count == 1)
#set($class = "active")
#else 
#set($class = "")
#end
#set($slideNumber = $foreach.index)
<li class="${class}" data-slide-to="${slideNumber}" data-target="#myCarousel"></li>
#end
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
#foreach($slide in $slides)
#if($foreach.count == 1)
#set($class = "active")
#else 
#set($class = "")
#end
#set($image = $slide.getChild("image").asset.link)
#set($heading = $slide.getChild("heading").textValue)
<div class="item ${class}">
<div class="fill" style="background-image:url('[system-asset]${image}[/system-asset]');"></div>
<div class="carousel-caption">
<h1>$_EscapeTool.xml($heading)</h1>
</div>
</div>
#end
</div>
<!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#myCarousel">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" data-slide="next" href="#myCarousel">
<span class="icon-next"></span>
</a>
</header>
#end

How to Create a Cascade Format in Velocity for Content Area

Add an editor region in the template template:

<system-data-structure>
     <editor>This is my first page.</editor>
</system-data-structure>

Create a format using Velocity:

#* this is a multiline comment in Cascade
$currentPageSiteName
$currentPagePath
$currentPage
$currentPage.assetId
$currentPage.assetType
$currentPage.label
$currentPage.metadata.title*#
## This is a single-line comment in Cascade
$currentPage.getStructuredDataNode("editor").textValue
##$_PropertyTool.outputProperties($currentPage)

This is the transformation result:

This is my first page.

Aligning Icons with Text on Landing Pages in Cascade

Example codes for aligning icon image with text. The class fcm (First Child Margin) is needed to align the first child with all rest of the children.

<div class="grid3 fcm">

<section class="icon-24">
<img alt="Mason Email" src="/render/file.act?path=/assets/images/icons/24-email.svg" width="50" /> 
<a href="https://mail.gmu.edu/">Email Login (Office 365)</a>
</section>

<section class="icon-24">
<img alt="Password Management Link" src="/render/file.act?path=/assets/images/icons/24-password.svg" width="50" /> 
<a href="https://password.gmu.edu">Password Management</a>
</section>

<section class="icon-24">
<img alt="Scalia Law Blackboard" src="/render/file.act?path=/assets/images/icons/24-blackboard.svg" width="50" /> 
<a href="https://mylawschoolportal.gmu.edu/">Blackboard (Law School)</a>
</section>

</div>

Grid Layouts in Cascade

Some HTML tips for creating grid layouts in Cascade.

Create a three-column grid with thumbnail and link text

<div class="grid3 fcm">
	<a href="">
           <img alt="" src="/render/file.act?path=/assets/images/photo.jpg" /> 
           Link text
        </a>
        <a href="">
           <img alt="" src="/render/file.act?path=/assets/images/photo.jpg" /> 
           Link text
        </a>
        <a href="">
           <img alt="" src="/render/file.act?path=/assets/images/photo.jpg" /> 
           Link text
        </a>
</div>

These classes grid2, grid3, grid4, grid5, grid6 can be used to set desired columns. The fcm class, which stands for First Child Margin, is required to reset the first child from the main CSS. The fcm class gives the first child the same margin as the rest of the children.

Use Span Classes

The grid2 class can be used for more flexibility. For example, let’s create a 3-column grid with one narrow column and a wide column:

<div class="grid3 fcm">
	<section></section>
        <section class="span2"></section>
</div>

These classes span2, span3, span4, span5 can be used to set desired span column.

Set Default Destination in Cascade

Go to Manage Site > Destinations > (select a destination to edit) Edit >
Scroll to the bottom, check/uncheck the Publish to this Destination by default option

These steps have to be repeated for each destination in each site that needs to be updated.

Go to Manage Site. Select Destinations on the left hand bar.
Click on the server. Hit Edit.
Go to Extensions to Strip field and enter: .html,.php

Source: Destinations

Antonin Scalia Law School

Author: scalialaw