Knowledge Base

CDN/PXL Implementation

Last Modified:
10 Feb 2020
User Level:
Administrator

With CDN/PXL you can serve files from a CDN to increase page load speed and give you more control over how images are output.

CDN/PXL is a service that allows you to serve files from a CDN to increase page load speed and give you more control over how images are output.

Later in 2020, we'll release an update to Terminalfour that will add a user interface to this feature to integrate it more closely with the product. Until then, these implementation steps are required to begin using the CDN/PXL platform. Once a Terminalfour version with tighter integration is released, you can switch over to that with a minor rework.

Steps

  1. Creating a Content Type
  2. Add your Content Type to the Site Structure
  3. Create your Content Layouts
  4. Create Navigation Objects
  5. Create Media Content Layouts
  6. Put it all together

1. Create a Content Type

Create a Content Type:

Content Type Name CDN/PXL Config

Add the following Content Elements:

NameDescriptionElement TypeMax SizeRequired
CDN url The URL for your CDN (Provided by Client Support) Plain Text 200 Yes
PXL client path Do not start or end with a slash e.g. "prod01/universityedu" Plain Text 200 Yes
PXL image manipulation url The URL for your PXL Implementation (Provided by Client Support) Plain Text 200 Yes

2. Add your Content Type to the Site Structure

Add an instance of this newly created Content Type to your Site Structure.

We recommend a dedicated hidden Section under "Home" named "CDN Config".

3. Create your Content Layouts

The first Content Layout we will create is used for a standard path output of the CDN.

We'll then create Content Layouts for each PXL filter we want to use. 

Standard CDN Layout

NameDescription
Name text/cdn-path
File extension Default
Syntax type JavaScript
Content layout processor JavaScript Content
try {
    importClass(com.terminalfour.publish.utils.BrokerUtils);
    var cdn = BrokerUtils.processT4Tags(dbStatement, publishCache, section, content, language, isPreview, '<t4 type="content" name="CDN url" output="normal" />','');
    var clientPath = BrokerUtils.processT4Tags(dbStatement, publishCache, section, content, language, isPreview, '<t4 type="content" name="CDN client path" output="normal" />','');   
    if(!isPreview) {
        document.write(cdn + clientPath);
    }
}
catch(err) {
    document.write(err);
}

PXL Filter Layouts

For each PXL Filter you intend to use create a Content Layout like the one below. In this example, we are creating a filter that will apply a 900px width to an image. Change the name of your Layout to describe your requirements.

NameDescription
Name text/900wide
File extension Default
Syntax type JavaScript
Content layout processor JavaScript Content

The value of the "filter" variable in the Programmable Layout will apply an image to the filter. You can use this resource to help you choose what Filters to use.

try {
    var filter = "/fit-in/900x10000/filters:quality(95)/";    // Just change this line
 
    importClass(com.terminalfour.publish.utils.BrokerUtils);
    var cdn = BrokerUtils.processT4Tags(dbStatement, publishCache, section, content, language, isPreview, '<t4 type="content" name="CDN image manipulation url" output="normal" enable-dedit="false" />','');
    var clientPath = BrokerUtils.processT4Tags(dbStatement, publishCache, section, content, language, isPreview, '<t4 type="content" name="CDN client path" output="normal" enable-dedit="false" />','');
    if(!isPreview) {
        document.write(cdn + filter + clientPath);
    }
}
catch(err) {
    document.write(err);
}

4. Create Navigation Objects

Firstly we'll create Related Content Navigation Object for the standard CDN (no filters applied).

Name Get CDN Path
Description Retrieves the path for the CDN Filter - text/cdn-path
Primary group None (leave as Global)
Options

Show pending content in preview [x]

Cache output [x]

Output title [Leave Blank]
Fetch method Use Section
Section Select the Section you added the Content in Step 2
Content Layouts Use alternate content layout
Alternate Content Layout text/cdn-path
Before HTML [Leave Blank]
After HTML [Leave Blank]

Next, we'll create similar Navigation Objects for each PXL filter layout we created in Step 3

They will be the same as above but with a different "Name", "Description" and "Alternate content layout". You can duplicate the first Navigation Object if required.

Name Get PXL Path - Filter 900Wide
Description Retrieves the path for the PXL Filter - text/900wide
Primary group None (leave as Global)
Options 

Show pending content in preview [x]

Cache output [x]

Output title  [Leave Blank]
Fetch method Use Section
Section Select the Section you added the Content in Step 2
Content Layouts Use alternate content layout
Alternate Content Layout  text/900wide
Before HTML [Leave Blank]
After HTML [Leave Blank]

5. Create Media Content Layouts

In this step, we'll create new Content Layouts on the Media Content Type. Then when we're adding images we can choose to output these rather than a standard image path.

CDN Path Layout

Go to Assets > Content Types and find the "Media" Content Type. Select the Content Layouts tab at the top of the page.

Create a new Content Layout ensuring there are no empty line breaks or whitespace at the start/end.

Be sure to update the Navigation Object with the id of the one created in Step 4.

Name path/cdn
File extension Default
Syntax type HTML
Content layout processor

JavaScript Content

try{
	var nav = '<t4 type="navigation" name="Get CDN Path" id="xxx" />';
    
	importClass(com.terminalfour.publish.utils.BrokerUtils);
	channel = publishCache.getChannel();
	var img = String(BrokerUtils.processT4Tags(dbStatement, publishCache, section, content, language, isPreview, '<t4 type="content" name="Media" output="file" />',''));
	var tag = String(BrokerUtils.processT4Tags(dbStatement, publishCache, section, content, language, isPreview, nav,''));
	var channelSiteRoot = channel.getSiteRoot();
	if(!channelSiteRoot.matches('/')) img = img.replace(new RegExp('^' + channelSiteRoot), '/');  
	document.write(tag + img);
}
catch(err) {}

PXL Filter Layout

Next, create a similar layout for each PXL Filter you created. Again, ensure there are no empty line breaks or whitespace at the start/end.

Be sure to update the Navigation Object with the id of the one created in Step 4 .

Name path/pxl-900
File extension Default
Syntax type HTML
Content layout processor 

T4 Standard Content

<t4 type="navigation" name="Get PXL Path - Filter 900Wide" id="xxx" /><t4 type="content" name="Media" output="file" />

6. Put it all together

You're all done! Now you can choose the correct Media Content Layout in your Content Layouts when you're outputting Media.

Below is an example of a text/html layout that outputs an image from an element called "Hero Image" through the CDN with a PXL filter applied. In this example, we're only interested in what is referenced inside the src attribute of the img tag. Notice the formatter attribute that references the Media Content Layout we created in Media Library.

<section class="hero">
 <figure>
  <img src="<t4 type="content" name="Hero Image" output="normal" formatter="path/pxl-900" />" alt="<t4 type="content" name="Alt Text" output="normal" modifiers="striptags,htmlentities" />" >
  <figcaption><t4 type="content" name="Description" output="normal" modifiers="striptags,htmlentities" /></figcaption>
 <figure>
</section>
Back to top