Usage and Best Practices for RADIANT CMS-Part3

Some useful Radiant  tags for inserting contents :

As an illustration consider the following snippet of code:

Suppose that we have snippet named “site_footer” which is written for footer link/page  “About Us” which has following piece of code:


<r:navigation urls="About Us: /aboutus">

<r:normal><a href="<r:url />"><r:title /></a></r:normal>

<r:here><a href="<r:url />"><r:title /></a></r:here>

<r:selected><a href="<r:url />"class="ft_dom"><r:title /></a></r:selected>

</r:navigation>

In this code we consider that webpage corresponding to “About Us” have already been created as child page for “Home page” of the site.

For example: “About Us” page is created with following details:

PageTitle as “About Us”

Slug as “/aboutus”

Layout as “Normal”

Status as “Published”


Explanation on tags:

<Navigation> tag has 3 different states associated with it namely “normal” ,”here” and ”selected” . Among these state “normal” is the mandatory one . If you are not using <r:normal> inside <r:navigation> then you will get the Tag error as “navigation must include a normal tag”.

<r:normal> tag is the one where we specify actual navigation on event.

<r:here> tag is the one that shows state of the link currently being clicked. That means if you have some div/class defined for showing the selection of link after it is being clicked then you can make use of <r:here> tag to show the selection.

<r:selected> tag is the one that shows state of the link which is the child of some link. A typical example for this would be submenus. That means if we have menu as “New–> Specials” then our current link is for the “specials” which should be selected and its parent is “New” which also should be selected.

So in the given code snippet above for “About Us” it is sufficient to use only <r:normal> tag and no need to use <r:here> and <r:selected> tags as we don’t use any div/class for showing the selection of footer links. So above code snippet may be reduced as:


<r:navigation urls="About Us: /aboutus">

<r:normal><a href="<r:url />"><r:title /></a></r:normal>

</r:navigation>

Now consider the following snippet of code which is written for footer links/pages “Rates” and “FAQ”.


<r:navigation urls="Rates: /rates|FAQ: /faq">

<r:normal><a href="<r:url />"><r:title /></a></r:normal>

<r:between> <img src="images/sitename/ft_bar.jpg"  width="1" height="11" alt="" /> </r:between>

</r:navigation>

In this case for both footer links “Rates” and “FAQ” we use the same css class “ft_spl”. Hence it is possible to write generalized code for both these footer links.

As shown on line 1 we specify 2 url’s separated by | (vertical bar).

On line 2 we specify name of the css class “ft_spl” that we are applying for these 2 footer links

<r:between> tag:

On line 3 there is tag  <r:between> in which we are embedding the image of vertical bar. So <r:between> tag is used to specify what should be inserted inbetween each of these links.

Typical scenario where we can use all the 3 tags <r:normal>, <r:here> and <r:selected> for <r:navigation> tag :

For instance consider that there is MENUBAR having menu as “About Us” on  Site. It has 2 submenu’s associated with it namely “About Us” and “Hours & Directions”.

As mentioned earlier <r:normal> tag which is used to specify link of navigation is mandatory to be used in all the cases.

If you click on main “About Us” link directly and if you want to show the “About Us” tab as selected after navigation to “About Us” it is necessary to use <r:here> tag and apply the class for selection written in CSS file.


<r:navigation urls="About Us: /aboutus">

<r:normal><a href="<r:url />"><r:title /></a></r:normal>

<r:here><a href="<r:url />"><r:title /></a></r:here>

</r:navigation>

If you click on its sub-menu “Hours & Directions” link and if you want to show both parent link “About Us” and sub-menu “Hours & Directions” links selected then you need to use both <r:here> tag and <r:selected> tag.


<r:navigation urls="About Us: /aboutus |Hours & Directions: /hoursdirections">

<div>

<r:normal><a href="<r:url />"><r:title /></a></r:normal>

<r:here><a href="<r:url />"><r:title /></a></r:here>

<r:selected><a href="<r:url />"><r:title /></a></r:selected>

</div>

</r:navigation>

Note:

In order to use both these tags and have their effect it is necessary to implement the code for showing selection of links on hover and click in the CSS files.

For more details on these tags refer to link given below:

Reference link : http://wiki.github.com/radiant/radiant/tags-that-insert-content

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.