Usage and Best Practices for RADIANT CMS-Part1

Addition of snippets to webpages :

Consider snippet which has been created with name “site_footer”. In order to include this snippet either in any of the created webpages or any of the layouts you can use the command as given below:


<r:snippet name=”site_footer”>Lower part</r:snippet>

In the above command context “Lower part” is for our reference. It may or may not be given.

Note: It is also possible to use nested snippets wherein you call one snippet (let’s call it child snippet) into another snippet (let’s call it parent snippet). Then you can simply include the parent snippet in your layout.


Addition of assets to webpages :

In order to use assets in your radiant application you need to follow the link given below:

http://wiki.github.com/radiant/radiant/paperclipped-extension

Usage:

In this case there are 2 different ways by which you can add Assets to your web pages:

1. Upload Assets at runtime and then use them in your webpages

2. Create the Assets in advance and then use them in your webpages

1. Upload Assets at runtime and then use them in your webpages:

Follow the steps as given below:

1.1   Goto webpage (edit webpage) to which you want to add Asset

1.2   Click on button “Show Assets bucket” at the top

1.3   Goto “Upload” tab and upload some suitable file

1.4   Save and upload. Your Asset will be added under the tab “Attached Assets”

1.5   Then you can simply drag that Asset (image icon) onto the <body> of page.

It will generate command as given below in your source code depending upon id of your asset:


<r:assets:image size="original" />

2. Create the Assets in advance and then use them in your webpages

Follow the steps as given below:

2.1   Goto “Assets” tab

2.2   Create some “Asset” using button “New Asset”

2.3   The created Asset will be listed on Assets page

2.4   Click on link “Add to bucket” corresponding to your asset

2.5   It will be added to the “Bucket” section below. Now once it is added to bucket you can use it on any page.

2.6   Goto webpage (edit webpage) to which you want to add Asset

2.7   Click on button “Show Assets bucket” at the top

2.8   Click on tab “Bucket” where you can find your created Assets

2.9   Simply drag that Asset (image icon) onto the <body> of page.

Important note: The Assets added by “Admin” user to bucket will not be visible to “Developer” user under bucket after login. Similarly Assets added by “Developer” user to the bucket will be visible to the “Developer” user only and not the “Admin” user. That means the Assets created by either the “Admin” user or “Developer” user for a particular site can be seen by each other only if not added to bucket.

Recommendation: All the images that are required in designing the webpages can be uploaded as Assets. But uploading of each and every image having its reference in stylesheet (such as background images) can be cumbersome. So it’s better to put all such images at  “\public\images\” of the root during the setup itself. All the other images which are actual Assets (such as cars in case of all car websites) and are likely to be changed can be uploaded as “Assets”.


Addition of parts to webpage :

Your page may have different parts associated with it. It is possible to include each of these parts into main <body> part or the layout used by these parts. Since these parts are part of same page all of them will be using the same Layout if at all any of the part uses the layout.

For example: Consider that we have HOMEPAGE having following 3 parts namely:

Body

LeftSidebar

RightSidebar

And we have layout used by them say HomeLayout then we need to add following commands in the source () of the HomeLayout:


<r:content />     (for <Body> part)

<r:content part="LeftSidebar" inherit="true" />

<r:content part="RightSidebar" inherit="true" />

“Part” attribute is used to select specific page part. By default the “Part” attribute is set to <Body>. “Inherit” attribute is used to specify that the page does not have a content part by that name that the tag should render parent’s content part. By default its value is set to “false”.

Each of these commands can be placed in separate “div’s” as better practice so that we can play with positions of each of these parts easily.

Note: It is also possible to use nested parts wherein you call one part (let’s call it child part) into another part (let’s call it parent part). Then you can simply include the parent part in your layout.

For example, consider that we have 2 PAGE PARTS :

1. Testimonials

2. Latest News

So we can include PAGE PART “Latest News” in the PAGE PART “Testimonials” and then we can simply include PAGE PART “Testimonials” in the LAYOUT that we are using to take the effect of both the parts. However it is convenient to use NESTED PAGE PARTS only for those page sections which fall within same <div>’s otherwise we may land into issues of alignment of these PAGE PARTS.

Significance of “Inherit” attribute used with <r:content /> tag :

Illustration :

Consider that we have some page called “AboutUs”. This page has 2 parts in it say “LeftContainer” and “RightContainer”.

Also consider that the “AboutUs” page has 2 child pages “ContactUs” ,”ManagementTeam”.

Now it is possible to use part say “LeftContainer” in “AboutUs” page directly as:


<r:content part=”LeftContainer”>

But we directly cannot use the part “LeftContainer” in child page “ContactUs” simply because this page part belongs to page “AboutUs”. However Radiant has provided the facility to use the page part of one page into another page using this “Inherit” attribute. So we can use the page part “LeftContainer” in child page “AboutUs” as:


<r:content part=”LeftContainer” inherit=”true”>

This allows page part to be inherited from another page more precisely the part will be inherited from Parent by child page.

Advertisements
This entry was posted in CMS, Radiant. Bookmark the permalink.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s