Mobile: Billboards

Use these instructions to modify the billboards on the home page data definitions (WWW, Division, Department) and corresponding format(s).

1. Data Definition

Why: We already have fields for the image and URL. We need to add text fields for a headline, teaser, and link text, as well as radio buttons for layout style. Also, we don't need the background image file chooser anymore, since we are removing the "Enjoy the View" feature.

In these data definitions:

• site://_library/Data Definitions/Campus Home Environment/home-page
• site://_library/Data Definitions/Department or Division/Department or Division Home

Replace the <group> element with the following XML:

<group identifier="billboards" label="Billboard Image" multiple="true">
    <text identifier="headline" label="Headline"/>
    <text multi-line="true" identifier="teaser" label="Teaser text" help-text="Limit to 250 characters"/>
    <asset type="file" identifier="image" label="Image" required="true"/>
    <text identifier="alt-text" label="Alternate text for image"/>
    <asset type="page" identifier="page" label="Internal link"/>
    <asset type="symlink" identifier="symlink" label="External link"/>
    <text identifier="url" label="Manual URL"/>
    <text identifier="link-text" label="Link text" help-text="What the user will see."/>
    <text type="radiobutton" identifier="layout" label="Layout style" default="left" help-text="Choose a layout for your headline, teaser, and link.">
        <radio-item value="left"/>
        <radio-item value="right"/>
        <radio-item value="top"/>
        <radio-item value="bottom"/>
    </text>
    <text type="radiobutton" identifier="color" label="Background color" default="blue" help-text="The slide background will be this color.">
        <radio-item value="blue"/>
        <radio-item value="gold"/>
    </text>
</group>
```

Also, remove this line from the WWW Home Page data definition:

`<asset identifier="background" label="Background Image" type="file"/>`


***

## 2. Create an XHTML block to include and initialize javascript for billboards.

1. In `site://_library/global/blocks/features/`, create an XHTML block called `Billboards JS`.
2. Add the following code to the block:

```` javascript
[system-view:internal]
<script src="/render/file.act?path=site://static/_responsive/lib/owlcarousel/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
[/system-view:internal]

[system-view:external]
<script src="http://static.ucsc.edu/_responsive/lib/owlcarousel/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
[/system-view:external]

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
      var owl = $("#slides");
      owl.owlCarousel({
        autoPlay : 5000,
        stopOnHover : true,
        navigation:true,
        paginationSpeed : 1000,
        goToFirstSpeed : 2000,
        singleItem : true,
        autoHeight : true,
        lazyLoad : true,
        transitionStyle:"fade"
      });
      
    });
// ]]></script>

---

3. Create an XHTML block to include the stylesheet for billboards.

1. In site://_library/global/blocks/features/, create an XHTML block called Billboards CSS.
2. Add the following code to the block:

[system-view:internal]
<link href="site://static/_responsive/lib/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css" />
[/system-view:internal]
[system-view:external]
<link href="http://static.ucsc.edu/_responsive/lib/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css" />
[/system-view:external]

---

4. Create a new global billboards XSLT format to for the new billboard styles.

1. In site://_library/global/formats/, create a xslt format called billboards and add the following code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output indent="yes" method="xml" omit-xml-declaration="yes"/>

  <xsl:template match="/system-index-block">
    <div id="slides" class="owl-carousel">
      <xsl:if test="calling-page/system-page/system-data-structure/billboards-random/value = 'Yes'">
        <xsl:attribute name="class">random</xsl:attribute>
      </xsl:if>
      <xsl:apply-templates select="calling-page/system-page/system-data-structure/billboards"/>
    </div>
  </xsl:template>

  <xsl:template match="billboards">
  
  <div class="slide">
    <!-- If there is a headline and teaser, we use the new style -->
    <xsl:if test="headline != '' and teaser != ''">
      <!-- <xsl:variable name="layout-class" select="layout"></xsl:variable> -->
      <div>
        <xsl:attribute name="class">slide-body <xsl:value-of select="layout"/> <xsl:value-of select="color"/></xsl:attribute>
        <h1><xsl:value-of select="headline"/></h1>
        <p><xsl:value-of select="teaser"/></p>
        <!-- Depending on the URL (internal, symlink, or external), we change the href. -->
        <xsl:if test="link-text != ''">
          <xsl:choose>
            <xsl:when test="page/path != '/'">
              <a href="{page/link}"><xsl:value-of select="link-text"/></a>
            </xsl:when>
            <xsl:when test="symlink/path != '/'">
              <a href="{symlink/path}"><xsl:value-of select="link-text"/></a>
            </xsl:when>        
            <xsl:otherwise>  
              <a href="{url}"><xsl:value-of select="link-text"/></a>
            </xsl:otherwise>
          </xsl:choose>
        </xsl:if>
      </div>
      <img alt="{alt-text}" src="{image/path}" width="780"/>
    </xsl:if>
    
    <!-- If the headline and teaser are absent, we use the old style. [DEPRECATE] -->
    <xsl:if test="headline = '' and teaser = ''">
      <xsl:choose>
        <xsl:when test="page/path != '/'">
          <a href="{page/link}"><img alt="{alt-text}" src="{image/path}" width="780"/></a>
        </xsl:when>
        <xsl:when test="symlink/path != '/'">
          <a href="{symlink/path}"><img alt="{alt-text}" src="{image/path}" width="780"/></a>
        </xsl:when>
        <xsl:when test="url != ''">  
          <a href="{url}"><img alt="{alt-text}" src="{image/path}" width="780"/></a>
        </xsl:when>        
        <xsl:otherwise>  
          <img alt="{alt-text}" src="{image/path}" width="780"/>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:if>
    
  </div> 
  </xsl:template>
  
</xsl:stylesheet>

Explanation of changes:

We updated the XSL to account for the text content we're adding to the billboard feature. Billboards can now contain a headline, a teaser, and text link (styled as a button automatically).

The main logic here are the headline and teaser. We keep this feature backwards compatible by looking for the headline and teaser. If an individual billboard has a headline and a teaser, we use the new style. If the billboard does not have a headline and a teaser, we output the image in the old style, optionally linked to a URL (if one is provided).

Our goal is to keep this feature backward compatible for users who do not wish to make immediate changes to their billboards after we launch the new templates.