Print Friendly Format

There is a new type of templates introduced in Content Management for v3.2 - "Custom Inclusive Page" templates. While new type of templates is an extremely powerful way to manage content and facilitate certain tasks at the site, it seems to be overlooked. This article intend to provide tips and techniques for site management with "Custom Inclusive Page" templates.

What is SSI?

Before we actually get to templates, lets fill a gap in SSI understanding. SSI (Server Side Include) is a method available in any Server Side scripting technology (PHP, CGI, ASP ..etc) for including the content of one page into the precise location of another page with just one line of code. Why use SSI? For once it would facilitate the reusable code reference, where the same code (the code in this case could be HTML, ASP or just a plain text) needs be used on many pages. So instead of writing the same code on every other page, it is written once to a single page/file and then this page included into all other pages. In addition this method would help to create a more structured code, where separate content based on functionality is moved to a different page/file for easy maintenance.

If you open most any page at RC installation in a text editor and look at the top and the bottom of the page, you would see included header.asp and footer.asp pages. At the same time opening header.asp in an editor, would reveal a series of other pages included into that page most of which are located in content folder very same folder where all content templates are stored and managed from. Included pages you see here ARE some of the templates managed from Content Management. So that when you change something in logo_table template, you change the inclusive page content/logo_table.asp, which is included into header.asp, which in turn is included into all RC pages. Thus one small change in logo_table "propagated" into all RC pages which use header.

Including pages with SSI

Pages can be included with 2 following methods:

Include file
<!--#include file="filename"-->

Or include virtual:
<!--#include virtual="filename"-->

Any of the code above can only be included OUTSIDE of the ASP block code.

Following is invalid and would generate error:

<%
'Some asp code

<!--#include file="filename"-->

'Some other ASP code
%>


Following is a correct way to include one page into another inside an ASP code:

<%
'Some asp code
%>


<!--#include file="filename"-->

<%
'Some other ASP code
%>

Include file - <!--#include file="filename"-->

filename is a relative path to the page which would be included into other page. If for instance you have a page named new_template.asp located in content folder and you need to include that page into the default.asp located at the root of your RC installation, then the correct syntax to include a page would be:

<!--#include file="content/new_template.asp"-->

You might find term root confusing in some cases. Lets clarify it.

Say you have RC installed at the domain http://www.your-domain.com that is when someone types your-domain.com in a browser, they get redirected to http://www.your-domain.com/default.asp The domain root in this case would be the same as RC installation root and would be: http://www.your-domain.com 

If you look at your site from FTP browser/application, you might find number of folders among which "httpdocs" or "wwwpages" ..etc (depends on hosting provider). This is the folder where pages/files (those can be navigated to in a browser) for your domain are located and can be considered as a site root folder. That is when you place a test.asp page directly into "httpdocs", it can be navigated as: http://www.your-domain.com/test.asp 

Now consider the case where you installed RC in a subfolder "class" inside "httpdocs" folder. The installation can be navigated as: http://www.your-domain.com/class/default.asp Your site root is still http://www.your-domain.com but the RC installation root is now different and is http://www.your-domain.com/class

Include virtual - <!--#include virtual="filename"-->

filename is a virtual path to the page which would be included into other page. So what is a virtual path? A virtual path is also a relative path but it must always be relative to the site root (note: not to the installation root as it might be different from the site root) http://www.your-domain.com/. Regardless which folder you installed the RC in, the relative path must start with "/" and be relative to the site root. Example:

RC Installation is in http://www.your-domain.com/class/auto/ 
You create a page advert.asp in "content" folder and need to include it virtual in a default.asp page. The syntax would be:

<!--#include virtual="/class/auto/content/advert.asp"-->

You could also use "file" method to include a page as:

<!--#include file="content/advert.asp"-->

But then why use "virtual" method as oppose to "file". Well, its more robust when it comes to figuring out a relative path and including a page into other pages, which are located in different subfolders. Consider now that you have a page advert.asp in content folder (as per example above in http://www.your-domain.com/class/auto/content/) but you need to include it into the page default.asp located at second RC installation http://www.your-domain.com/class/pets/ (lets say advert.asp contains a Google AdSense advertising and you wish to maintain only one template for both sites). How would you do it? With virtual include method, you would use exactly the same syntax for page insertion:

<!--#include virtual="/class/auto/content/advert.asp"-->

But with file include method you need to figure a proper relational path and make sure web server supports a back (parent) path statement (../). The syntax would be:

<!--#include file="../auto/content/advert.asp"-->

On the other hand include virtual method has its own disadvantages. If you ever rename folder class (as per example above) you would face a problem with the virtual path where the class was specified. Moreover for the first example where you had include virtual as:

<!--#include virtual="/class/auto/content/advert.asp"-->

and include file:

<!--#include file="content/advert.asp"-->

You would face a problem with include virtual if you ever moved your site to the site root or other folder, while include file would not affect the site functionality.

When you fully understand the difference between 2 methods, youd need to decide which one to use. A file include method is preferred when the source page would be included into destination pages and destination pages are located at the same folder. For most of the cases in RC, source pages would be located in "content" folder and be included into pages located at the RC root and therefore file include method would be more appropriate. If there is a need to do the opposite to include a page from a site root into the page located in "content" folder, then virtual include would be more appropriate to overcome the parent path usage, which might not be supported at current hosting.

Including "Custom Inclusive Page" templates

When you create a new custom inclusive template, the page with .asp extension is created in content folder. If for instance you created template and named it google_adsense then the page google_adsense.asp would be created in "content" folder. Every time you modify google_adsense template in CM (Content Management), you are actually modifying content/google_adsense.asp page.

Lets see how to include created google_adsense.asp template into other pages.

What page to include it to? Practically into any page you think would be appropriate. You may include this page into viewad.asp and display Google Advertising on every full ad view page. Including into viewscat.asp would display advertising at every subcategory page.

How to include? The syntax might be as following:

<!--#include file="content/google_adsense.asp"-->
Or:
<!--#include virtual="/content/google_adsense.asp"-->

Note: From here on, the include virtual example assumes that the site is located at the site root.

Where to include? This would vary from page to page and might require some HTML experience. First create a backup of the page where you intended to include the other page to. Make sure the inclusive code is placed outside of ASP block code. Find a most appropriate location at the page within HTML code. While the location would certainly be different for every inclusive page, destination page, insertion purpose and insertion content, its a best practice to place the code before <table.. > or after the </table> tags. But again, there might be many tables on a page and tables might be nested, so youd have to experiment until you found a best possible location for page inclusion without generating an error on a page or breaking design structure.

Converting Main_Page_Center template into "Custom Inclusive Page"

The default Main_Page_Center template is stored in database and cannot accept ASP code nor include any other page with SSI. To overcome this, you may convert Main_Page_Center into custom inclusive template.

Create a new "Custom Inclusive Page" template and name it Main_Page_Include (name may be different).
Switch WYSIWYG editor off
Choose Main_Page_Center template in a drop-down selector and then copy the entire content of the template.
Choose newly created Main_Page_Include, paste the copied content, save and backup (with backup button) the template.
Now open default.asp page in a text editor. Remove the following code:

<%
'*** [strbody] is a "Main_Page_Center" page content template.
Response.Write Build_RSS(strbody)
%>


and place the following code instead:

<!--#include file="content/Main_Page_Include.asp"-->

The default page appearance now can be maintained by modifying Main_Page_Include custom inclusive template.

Note: If you had an RSS or Banners zone textual code inserted into Main_Page_Center, then after template conversion, replace the textual representation with the ASP code representation. See RSS Management and/or Banners Rotator admin pages for the respective ASP code for your Feed/Banners Zone

Nesting Templates

There is something interesting arise from the conversion in the chapter above. You may now include other inclusive templates/pages into the Main_Page_Include template.

Why would you need to include other pages/templates? For once it would create a better structure of your template code. For instance a javascripts are not handled well in Innova Studio editor. That is when you edit a template which includes javascript with Innova WYSIWYG, the part of javascript may get altered. As a result javascript would stop working. By creating a separate template containing a javascript code and then including this template into the Main_Page_Include for instance you would overcome this problem, because physically a javascript is no longer part of the template and only reference to the nested template is included. Very well suited for mentioned AdSense advertising at main page.

Note: When you included a template into the code and then edit it with Innova, youd still have to mind that the "include file/virtual" line is invisible in Innova design view. If you cut/delete part of the design HTML structure, you might accidentally remove the "include" line(s) of code. When substantial amendments of template code took place, save the template and switch off WYSIWYG; verify that the "include" lines were not altered while code was modified.

How to properly nest templates? There might be different scenarios for which a different include methods might be used. For the example with AdSense, create a new template google_adsense_main and include it into Main_Page_Include template as:

<!--#include file="google_adsense_main.asp"-->

This would create a Google AdSense advertisement at the main page, which is maintained separately at the google_adsense_main template so there would be no need to dig into loaded with HTML code Main_Page_Include in case you need to replace or change Google code.

As you might see, there is no content folder reference in the path. This is because both google_adsense_main.asp and Main_Page_Include.asp are located within the same content folder.


Next, you may try to include a page located at the RC root into the template locate in content folder.
The default.asp page includes 3 pages: epick.asp, newads.asp and tophotlist.asp. All 3 pages are included below main template. What if you need to display editors pick list (epick.asp) somewhere inside the main template - between some other content. As you learned, when Main_Page_Center is converted into Custom Inclusive Page, you may include other pages into it.

The page from RC root (epick.asp in this case) may be included into Custom Inclusive Page templates located in content folder (Main_Page_Include in this case):

Remove line <!--#include file="epick.asp"--> from default.asp
Find appropriate location within the code at Main_Page_Include (created in Converting Main_Page_Center template chapter)
Include the editors pick page as following:

<!--#include file="../epick.asp"-->

The "../" at the beginning of the path means that the file is located at the parent folder. Indeed, for Main_Page_Include.asp page (located in content folder), the epick.asp is located at the parent folder.

Note: The code above may not work if the hosting does not support "parent" path statement. Ask hosting support before using the "../" parent path reference. On some hosting this may be enabled within hosting control panel.

Alternatively you may include editors pick list as virtual:

<!--#include virtual="/epick.asp"-->

Note: See Include virtual chapter for properly forming the path for your case.

Templates may be nested into any level deep as long as you keep track which templates are included into other template.

Including custom code into classified pages.

There are times when you need to amend pages at classified and include custom code (ASP/HTML or simply a text), which you might need to be updated from time to time. You can sure open the page in an editor and simply add the code to the appropriate location. But when the time comes to update the code, youd have to download the page, edit it over and upload back to the site.

This is highly inconvenient way to manage custom content at the site. Instead of adding the code to the page directly, create a new custom inclusive template, add the code to that template and include template to the destination page by any method described in chapters above.

Here is an example. Article http://www.4u2ges.com/article.asp?id=18 "Simple Search Form for Local or Remote Site" describes how to include a simple search form to your site. The code can be included into Main_Page_Include template. But its hard to manage it that way if you need to add/amend forms/values, where the form might be located among hundreds of lines of the main template. Other parts of the code may be accidentally amended. If you create a separate inclusive template, place the search form into that template and then include template into Main_Page_Include (or any other part of the web site), you would have a clean search form in a separate template which would be easy to manage.

Note: You must convert Main_Page_Center into custom inclusive template, before other templates may be included into it. See Converting Main_Page_Center template into "Custom Inclusive Page" chapter above.

Another reason for splitting the code and storing it in separate templates is to make the code reusable. If you need the same snippet of code to be used in a few different pages, then there is no better way than to create a separate template for this code and include that template to other destination page. This way you centralize the code management, where only one template would have to be amended instead of editing every other page where the code might need to appear. Again the Google AdSense or other advertisement content might be used on different pages but managed from one location.

Combined with proper ASP programming (obviously for experienced developers), the same inclusive template may be configured to display dynamic content based on a page where the template is included.

Here is an example for those who have at list moderate ASP skills. There is a global variable (scr_Name) which identifies any page at classified which in turn has header.asp included (99% of the pages). If you need to distinguish the content based on a page currently navigated in a browser, then the simple ASP routine may be written to do so (note: there is a powerful "Relative Content Links Plug-in" is available based on this idea for certain pages). This routine along with respective content may be used to create a separate inclusive template and include it into... well, most anywhere... header.asp for instance; or into portal/side bars; or into specific pages. Furthermore the templates could also be nested and the ASP code separated from the content and the content for each particular case stored in a separate template.

Consider creating the following nested inclusive templates with respective content:

Template: content_selector
Content:
<%
Select Case scr_Name
Case "hotlist.asp"
%>

<!--#include file="hotlist_content.asp"-->
<%
Case "browse.asp"
%>

<!--#include file="browse_content.asp"-->
<%
Case "forum.asp"
%>

<!--#include file="forum_content.asp"-->
<%
Case Else
%>

<!--#include file="other_content.asp"-->
<%
End Select
%>


Template: hotlist_content
Content: This is a hotlist page

Template: browse_content
Content: This is a category browser page

Template: forum_content
Content: This is a forum page

Template: other_content
Content: This is some other page

After you have created 5 templates, open the right_advert1 template in CM and paste the following:

<!--#include file="content_selector.asp"-->

If you have enabled first right side bar at Side "Bars Content & Geometry" admin page, then while navigating to the specified in content_selector template pages, you should see a different text inside that side bar based on created 4 nested templates.

So the actual dynamic content could be changed by editing respective nested templates (hotlist_content, browse_content, forum_content, other_content) without the need to amend content_selector filled with ASP code. If you need to add more pages, then create a respective nested template and add a new Case to content_selector similarly as it was done in a given example.

This was a demonstration of a simple way to create and manage a dynamic content with custom inclusive templates. The routine can be made more complex with more templates in a picture and can be included practically into any page (or other template) at classified.

Portal bars and Custom Inclusive Templates

Another way to facilitate content management is to include templates into portal bars when you need to expand number of portal boxes (default is 3 boxes on each side).

Templates left_portal and right_portal (in CM) contain box expansion code for adding more boxes respectively at the left and right portals. The code for adding 4-th box (in addition to three default boxes) at left_portal looks like:

' *** START CUSTOM BOX 1

'Call Build_Box_Top(with_left, 200, "Box Head", "xl4")
%>
<!-- Replace this line with your HTML Content as needed -->
<%
'Call Build_Box_Bottom("Box Head")

' *** END CUSTOM BOX 1


As per instructions in chapter 3.3 of Admin Help, you first need to enable custom box by removing comment character ['] in front of "Call" functions. Start/End comments may also be removed so the code would look like:

Call Build_Box_Top(with_left, 200, "Box Head", "xl4")
%>
<!-- Replace this line with your HTML Content as needed -->
<%
Call Build_Box_Bottom("Box Head")

Save left_portal template.
Now create a new "Custom Inclusive Page" template. As with previous examples let's assume the template name is google_adsense for hosting Google AdSense advertising. Insert the appropriate Google code into new template and save it.

Go back to left_portal template, assign a box header (replacing the text Box Head inside function) and include newly created template into the 4-th box. The final code would look like:

Call Build_Box_Top(with_left, 200, "Ads By Google", "xl4")
%>
<!--#include file="google_adsense.asp"-->
<%
Call Build_Box_Bottom("Box Head")


Other boxes may be create on the fly similarly. Just remove the comment character ['] in the front respective "Call" functions to enable appropriate boxes. Let's enable custom boxes 2 and 3, create two more "Custom Inclusive Page" templates - sponsors and partners and include them respectively into custom box 2 and 3.

Custom boxes may be moved around to create custom order. If for instance you need the custom box with AdSense at the left portal to be the second from the top, then move it inside left_portal template. The final code in left_portal template with all three custom boxes enabled and changed order, might look like (less comments):

<%

Call Build_Box(with_left, 200, head_left1, BuildContent(display_left1, top_left1, 1), "xl1")

Call Build_Box_Top(with_left, 200, "Ads By Google", "xl4")
%>
<!--#include file="google_adsense.asp"-->
<%
Call Build_Box_Bottom("Box Head")

Call Build_Box(with_left, 200, head_left2, BuildContent(display_left2, top_left2, 2), "xl2")

Call Build_Box(with_left, 200, head_left3, BuildContent(display_left3, top_left3, 3), "xl3")

Call Build_Box_Top(with_left, 200, "Our Sponsors", "xl5")
%>
<!--#include file="sponsors.asp"-->
<%
Call Build_Box_Bottom("Box Head")

Call Build_Box_Top(with_left, 200, "Our Partners", "xl6")
%>
<!--#include file="partners.asp"-->
<%
Call Build_Box_Bottom("Box Head")

%>

Remember, Call Build_Box(... code creates a default box, the content for which is maintained via "Main Page Configuration" admin page.
The code Call Build_Box_Top(... Call Build_Box_Bottom(... creates custom box. So according to the code at the example above, you have enabled 6 boxes in the following order:

1. Default box 1 - content is maintained in "Main Page Configuration" for the first left box.
2. Custom box 1 - content from google_adsense template.
3. Default box 2 - content is maintained in "Main Page Configuration" for the second left box.
4. Default box 3 - content is maintained in "Main Page Configuration" for the third left box.
5. Custom box 2 - content from sponsors template.
6. Custom box 3 - content from partners template.

2003-2007 GA Soft. All Rights Reserved.