Code block

Details

Get the right file type!

First, request the creation of proper page types: In order for your code to display properly, the code must be attached and outputted to a page with the proper file extension, such as (but not limited to) .php or .cfm. Site managers can submit the Page Type Request form, indicating what file extension you'll require. Once you've received confirmation and checked your New->Site Assets menu to see that the page file types have been added, you can proceed to your next step.

Audience:  Managers

Description:

The code block allows developers to add in an include to a piece of programming in the language of their choice. You can choose to have the code appended within the body of the page (between the main navigation and the footer), to the top of the page above the <DOCTYPE>, or within the page <HEAD>.

Attaching code in the page body: Technically, you can attach a code block wherever a block attachment in the content is allowed. You can use the block settings in case you want to change the width, the alignment, and whether or not the code is aligned right or left on the page. It will be up to you to make sure the rendered content displays correctly in the area of the page where it is attached.

Note: When the page is rendered inside the CMS, only the placeholder text will appear. The page must be published and served by your appropriately configured webserver before the server-side programming code will render on the live pages. If you insert raw code instead of an include path or you use an include path and the expected placeholder code does not show up in the page when previewed within Cascade, please review your code for syntax errors. Inserting raw code into the Code Content pane may result in quirky behavior, so staging your work for review prior to publishing to a live page is advised.

Best Practice: At this time the CMS Web Service team strongly recommends the use of an include statement instead of raw code. Doing so ensures greater success in producing the dynamic results intended. This avoids XML parsing issues that can occur if entire blocks of code are used in the code block instead of an include statement. The include method also allows code to be placed outside of the Web root and allows it to be maintained outside of Cascade.

Place code in the <HEAD>: On the Site configuration file for a site-wide include, or in Page Settings on a single page level, attach the code block to the site-specific/page-specific css/js/code block chooser.

Place code at the top of the page above the <DOCTYPE>: Attach the code block in Page Settings | Content for pre-main area (optional) using "page-specific css/js/code block". Make sure to check the "Prepend Code" box in the code block settings. Note, if you have toggled the the "Prepend Code" button in the code block settings and your code block is attached in a page content block region,  a warning will appear. This warning can be ignored if the desired outcome is to have code executed before the page renders, but not if the code is meant to render content within the page. Pay attention to this message if any HTML created by the code is meant to appear in the page. To avoid this message, toggle the "Prepend Code" button in the code block to its unchecked state.

Installation

  1. Using the Global drop-down menu, select Content Library and browse to the Administrator Library/Code Block/ folder and copy the code-block file into the Base Folder/_internal/_user-blocks folder.
  2. Click Edit, enter your include code in the Content for pre-main area (optional) section.
  3. Provide your placeholder text. Click Submit to save.
  4. Attach the code block to an area of the page as described above.
  5. Publish the page for the code to become active on the site.

How to create a Code block

Code block example

  1. Code Content - paste in your include code here.
  2. Prepend Code - if the code needs to be inserted above the DOCTYPE of the page, click the checkbox to activate the "Output code before page content?" feature.
  3. Placeholder content - Because of the nature of the CMS the programming code referenced by the include will not appear on the page inside of the CMS. The code will only go live once the page has been published out to a web server. As a default, you have the option to enter placeholder text to indicate the presence of the code block in the page.
  4. Comments - Useful for version control purposes. No comments here will appear on the page itself.

How to attach a Code block

Within the body of the page

How to attach a Code block

  1. Browse to the location of your code-block in the Base Folder/_user-blocks/ folder and click to choose and select, then Confirm to attach.
  2. Open the page that will display the block. Click Edit. Decide where on the page the block should appear in relationship to the particular repeating content block to which you're attaching it.
  3. Select the desired width of the block on the page. 100% will result in the block filling the entire width of the available page space.
  4. If less than 100% you have the option of having the block appear on the left side or the right side with any text on the page wrapping around it.
  5. If you wish the block to appear without a border, check the box to remove it.
  6. Click Submit to save your changes.

Within the <HEAD> of all the pages in the site

How to attach a code block to the site configuration file

You have the option to add a code block which can affect the site on a global level.

  1. Browse to /Base Folder/_Site configuration file.
  2. Under the Site setting >> Site-specific files >> CSS/JS/code for site >>Supplemental blocks/files, you have the option to add a site-specific CSS/JS/code block. The [+] allows you to add multiple blocks.
  3. Likewise, you can add multiple CSS and Javascript files.
  4. If order precedence is a concern, the [+] in the upper right corner will create multiple repeating supplemental blocks so you can add the files in whatever order you require. These files will be added to the <HEAD> of all the pages of the site.
  5. Click Submit to save.
  6. Please make certain to only add the blocks and files to the portion outlined in red. The lower portion will be removed at a later date once existing users have had a chance to attach their files to the next supplemental section.

Within the <HEAD> of a single page

Code block attachment in the Page Settings section

1. and 2. permit you to attach the block in the Page settings section, which results in the code being appended to the <HEAD> section of the page.

Please make certain to only add the blocks and files to the portion outlined in red. The lower portion will be removed at a later date once existing users have had a chance to attach their files to the next supplemental section.

Place code at the top of the page above the <DOCTYPE>

 Attach the code block under Page Settings using either "Page-specific CSS block" or "Page-specific JavaScript block". Make sure to toggle the "Prepend Code" button in the code block settings. Note, if you have toggled the the "Prepend Code" button in the code clock settings and your codeblock is attached in a page content block region,  a warning will appear. This warning can be ignored if the desired outcome is to have code executed before the page renders, but not if the code is meant to render content within the page. Pay attention to this message if any HTML created by the code is meant to appear in the page. To avoid this message, toggle the "Prepend Code" button in the code block to its unchecked state.

Demo

Example of the placeholder text that will appear in the page inside of the CMS:

Code block placeholder sample text

Here is the output of an attached code block that generates a PHP-based calendar month:

CSS Stylings

All blocks offered in the Content Library have a built-in hook to allow users to create custom stylings via the use of a supplemental style sheet. To date, the following classes have been created in conjunction with the available blocks:

  • Code block - class name: ._code-block
  • FAQ block - class name: ._faq1 (._faq-block)
  • Feature block - class name: ._feature-block
  • Jump menu block - class name: ._jumpmenu1
  • RSS block - class name: ._rssfeed1 (._rssfeed-block)
  • Slideshow block - class name: ._slideshow1 (._slideshow-block)
  • Title area links block - div id: #links
  • Video block - video2.css
  • XHTML Raw block - class name: ._xhtml-block