Knowledge Base

CDN/PXL Implementation

Last Modified:
14 Jan 2020
User Level:
Administrator

Description

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.

In 2020 an update to Terminalfour will be released that will add a user interface to the feature and more closely integrate it 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'll be able to switch over to that and may have a small amount of rework.

This guide will walk you through setting up a Content Type where you can define the settings for your specific instance of CDN/PXL as well as defining any custom PXL Filters you may require.

It will also walk you through creating Navigation Objects for each PXL filter so you can reuse them across your site. If you want to change a filter, you'll be able to change it in one place and that change will be affected everywhere. However, as part of the initial set up, you will create three different assets to define a CDN Filter. This will be much simplified in the upcoming release.

Some Programmable Layouts are used to ensure your Page still previews correctly. Keep in mind that PXL Filters will not be applied in Preview mode so images may not look exactly the same in Preview as on the Published Page. The Terminalfour release with tighter integration will allow you to Preview images with PXL filters applied.

What we'll be doing:

  1. Create a new Content Type to outline your CDN and PXL settings
  2. Add this Content Type to the root of your Site Structure
  3. Create Content Layouts on that Content Type for every PXL filter you want to use
  4. Create a Navigation Object for each PXL Filter layout you created in Step 3
  5. Create a Media Content Layout for each PXL filter defined in Step 3
  6. Add media using your new Media Content Layouts

1. Creating 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
CDN client path Do not start or end with a slash e.g. "prod01/universityedu" Plain Text 200 Yes
CDN image manipulation url The URL for your PXL Implementation (Provided by Client Support) Plain Text 200 Yes

2. Add Content Type To 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. 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 a 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(nav + 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. Putting 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 Step 5.

<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>