Edit Content Layout
Content layouts provide a lot of flexibility to your website. Fields and custom HTML are easy to add, and can make your site much easier to work with.
To edit a content layout, first you have to view the content layouts details. You can see all your content layouts by clicking Content Layouts in the Pages app in the My Apps menu.
Click details to the left of the content layout you would like to edit.
In the details window, click Edit this content layout at the top of the details window to go to the Edit Content Layout screen.
Overview
The Edit Content Layout window has a Layout name field and a select menu that defines how to display the content.
The How to display the content select menu controls how the software handles the content layout when the page is accessed.
There are two different methods of displaying the content:
Save a parsed copy of this content layout and use that when displaying a page - the content layout can be parsed and saved when a page is accessed. Think of it as the page being cached - instead of the software having to build the content layout each time, it delivers a pre-made version so the page loads faster.
Parse the content layout for each page request - the benefits of having the software parse the content layout each time is that it uses fresh data each time. For example, if your content layout has an API that is pulling in data from another app and you are using a cached version of the content layout, sometimes the data from the API will not update in the layout because the layout is using cached data instead of updating with the new data from the API.
In addition to these settings, there are seven tabs that control the formatting of the content layout, which content blocks and snippets it is available to, linked CSS and Javascript files, inline CSS and Javascript, and content for thesection.
Layout
The layout tab is used to control all the logic and formatting of the content layout.
The formatting of a content layout typically involves the usage of AP code. All AP tags that are available to use within the Content Layout can be seen in the Layout Tags drop down menus on the right of the Edit Content Layout window.
When fields are added to a content layout, they appear as AP code tags in the top Layout Tags drop down menu.
To output the content of these fields, either type out the tag or copy and paste the tag from the Layout Tags menu into the editor.
These bits of AP code in the layout tag drop down menus are variables that contain information about the attribute when a content layout is used. Some attribute types are actually arrays that contain multiple levels of information about the attribute. For example, an Image attribute type is actually an array. Individual parameters in an array can be accessed by using a specific tag format:
{#variableName.parameter}
This will output the value that is contained within the parameter of that value. Any parameter of a variable is accessed by a period and then the parameter name. For example, if you wanted to get the src of an image attribute, you would use the tag:
{#image.srcValue}
Which would return the path to your image.
Arrays can also have multiple levels of arrays. Third level parameters (and beyond) are accessed the same way as a second level parameter:
{#variableName.parameter1.parameter2}
To see all the information that a variable contains, you can debug the variable, like so:
{#variable|debug}
Debugging a variable prints all the information about that variable. Debugging is a great way to get a visual representation about which parameters are located where, and which parameter you need to use in order to achieve your goals when editing your content layout.
You can also debug parameters of a variable:
{#variable.parameter|debug}
This will output all information from (and descendants of) that parameter.
There are multiple drop down menus in the Layout Tags menu. All of these tags are utilized the same way.
Content Blocks/Snippets
The Content Blocks/Snippets tab controls whether this content layout is able to be used by Content Snippets and which blocks this content layout can be placed in. These settings can be accessed by clicking the Content Blocks/Snippets tab.
By default, a Content Layout is available to Content Snippets and all Content Blocks.
If you don't want a Content Layout to be usable by Content Snippets, select No from the menu under Is this Layout available to Content Snippets?
To change which content blocks a content layout is available to, pick an option from the select menu under Content Blocks that this Layout is available on.
Choosing All Content Blocks will let you use the content layout in any content block.
Choosing Specific Content Blocks allows you specify certain content blocks to make it available to. This option shows all content blocks on your site as checkboxes under the menu.
Check off the boxes you want the content layout to be available to.
Choosing No Content Blocks will make your content layout inaccessible to any content blocks on your site.
For example, if you wanted a content layout to be used by only content snippets, choose Yes from the select menu under Is this Layout available to Content Snippets? and No Content Blocks from the menu under Content Blocks that this Layout is available on.
If you want your content layout to be available on all your content blocks but not available to content snippets, select No from the Is this Layout available to Content Snippets? menu and All Content Blocks from the menu under Content Blocks that this Layout is available on.
CSS and Javascript Files
CSS and Javascript files can be linked to a content layout by adding the file path to the files in their respective tabs.
Note that if your template(s) don't have the tags {ap_template:css} and {ap_template:javascript} in them, your inline CSS and Javascript won't be output.
For more information on linking CSS and Javascript files, view the documentation.
Inline CSS and Javascript
In addition to being able to link CSS and Javascript files to a content layout, you can also add inline CSS and Javascript to a content layout by placing code in the Inline CSS and Inline Javascript tabs, respectively.
Note that if your template(s) don't have the tags {ap_template:css} and {ap_template:javascript} in them, your inline CSS and Javascript won't be output.
View the documentation on inline CSS and Javascript for more information.
Head Content
Click the Head Content tab to access the Head Content editor.
The head content allows you to add any content you want to thesection of your site as long as the {ap_template:head} tag is placed within that section.
View the documentation on the content editor for more information.
Saving the Content Layout
Save your content layout when you are finished editing it.
Note that when saved, any pages or content snippets that use are using the content layout will be updated with any changes that are made.