SplashTags

cshapiro edited this page Oct 4, 2011 · 36 revisions
Clone this wiki locally

SplashTags are used to render content somewhere in pages, layouts and snippets. Here is a list of all current SplashTags and their attributes.

Title tag

This tag represents the Title attribute of a page element. If you would like to render the title of the current page in your layout, simply use the following tag:

<s:title />

This will be replaced by the value of the pages title.
You still need to wrap the tag with the meta tags. Example: <title><s:title /></title>

Description tag

This tag represents the description attribute of a page element. If you would like to render the meta description of the current page in your layout, simply use the following tag:

<s:description />

This will be replaced by the value of the pages description coded into a meta tag.
Rendered html will be <meta name="description" content="your description here" />

Keyword tag

This tag represents the Keywords attribute of a page element. If you would like to render the meta keywords of the current page in your layout, simply use the following tag:

<s:keywords />

This will be replaced by the value of the pages keywords coded into a meta tag.
Rendered html will be <meta name="keywords" content="your keywords here" />

Content tag

The content tag can be used in layouts to render the contents of a page. In order to render the part of the page that you want, you have to pass it the part attribute.

<s:content part="body">

<s:content part="right-sidebar" />

Snippet tag

The snippet tag can be used in pages or layouts to output the content of a snippet. Simply pass it the name of the snippet your created in the Snippets section of the admin.

<s:snippet name="header" />

<s:snippet name="footer" />

<s:snippet name="mainNavigation" />

Navigation tag

The navigation tag can be used in snippets, pages or layouts. Any place that you want to build a menu element for your website. Lets look at an example of the tag the builds a menu using an unordered list.


     <s:navigation urls="Home: /|Features: /features|Download: /download|Contact: /contact" enclosingTag="li" currentState="active" />

The navigation tag takes three attributes, urls, enclosingTag and currentState. The enclosingTag attribute is optional and is used to wrap each navigation item in an html container such as a list item. This makes it easier to style your menus. The currentState attribute is optional and you can pass the name of a css class that you would like applied to the element when the current page is active.

The urls attribute is required and warrants a little more explanation. The format of the urls attributes is basically a list of navigation Titles and Links separated using the “|” (pipe) character in the following format:

Label: URL | Label 2: URL2 | Label 3: URL3

Each element consists of the label (the text that is displayed in the menu) and the url (the link you want the element to point to). Currently only single level navigation elements can be built, however, work has already begun on expanding this tag to allow for nested menus based directly off of your pages in the admin.

Find tag

The find tag looks up the page specified by the slug attribute, and stores the page object for the found page at request.tags.page. Nested tags can then use this page object to display data or perform additional operations.

  
    <s:find slug="slug_to_find">
      ...
    </s:find>
  

Children-Each tag

The children-each tag finds all the child pages of the current page stored in request.tags.page. It then loops through each of the children pages. Nested tags can access the current child page, request.tags.currentChild, to display data or perform additional operations.


         <s:children-each>
            ...
         </s:children-each>

The children-each tag uses the CFWheels findAll model method, and the attributes of the findAll method are supported. The returnAs attribute is not supported as this tag must return objects in order to support any nested tags.

Children-First tag

The children-first tag finds the first child pages of the current page stored in request.tags.page. Nested tags can access the current child page, request.tags.currentChild, to display data or perform additional operations.

Takes the same attributes as <s:children-each>.

<s:children-first> ... </s:children-first>

Children-Last tag

The children-last tag finds the last child pages of the current page stored in request.tags.page. Nested tags can access the current child page, request.tags.currentChild, to display data or perform additional operations.

Takes the same attributes as <s:children-each>.

<s:children-last> ... </s:children-last>

Children-Count tag

NOTE: The children-count tag MUST be nested inside a <s:children-each> tag.

The tag counts the number of children in a children-each collection and returns
the data in request.tags.childrenCount.

<s:children-count />

ifFirst tag

NOTE: The ifFirst tag MUST be nested inside a <s:children-each> tag.

The tag checks to see if the currentChild is the first child in a children-each collection. If so, it
passes the currentChild page to decendent tags as request.tags.currentChild.

If the currentChild is not first child, the tag terminates.


         <s:children-each>
            <s:ifFirst>
              ...
            </s:ifFirst>
         </s:children-each>

unlessFirst tag

NOTE: The unlessFirst tag be nested inside a <s:children-each> tag.

The tag checks to see if the currentChild is the first child in a children-each collection. If NOT, it
passes the currentChild page to decendent tags as request.tags.currentChild.

If the currentChild is is the first child, the tag terminates.


         <s:children-each>
            <s:unlessFirst >
              ...
            </s:unlessFirst >
         </s:children-each>

ifLast tag

NOTE: The ifLast tag MUST be nested inside a <s:children-each> tag.

The tag checks to see if the currentChild is the last child in a children-each collection. If so, it
passes the currentChild page to decendent tags as request.tags.currentChild.

If the currentChild is not the last child, the tag terminates.


         <s:children-each>
            <s:ifLast >
              ...
            </s:ifLast >
         </s:children-each>

unlessLast tag

NOTE: The unlessLast tag MUST be nested inside a <s:children-each> tag.

The tag checks to see if the currentChild is the last one in a children-each collection. If NOT, it
passes the currentChild page to decendent tags as request.tags.currentChild.

If the currentChild is is the last child, the tag terminates.


         <s:children-each>
            <s:unlessLast >
              ...
            </s:unlessLast >
         </s:children-each>

Breadcrumbs

Adding breadcrumbs is a piece of cake. Just add

<s:breadcrumbs />

Splash automagically adds class=“crumbs” to your ul tag so you can style it easily.
Note: As of this writing, the breadcrumbs file is displaying the title of the page.