In Dynamic Media Classic terms, a template is a document that can be changed dynamically via the URL after the template has been published. Dynamic Media Classic offers Basic Templates, image-based templates called from the Image Server and consisting of images and rendered text.
One of the most powerful aspect of templates is that they have direct integration points that let you tie them to your database. So not only can you serve up an image and resize it, you can query your database to find new or sale items and make that appear as an overlay on the image. You can ask for a description of the item and make that appear as a label in a font you choose and layout. The possibilities are limitless.
Basic Templates can be implemented in many different ways, from simple to complex. For example:
It’s important to understand that Dynamic Media Classic only provides the visual portion of these templates-based applications. Dynamic Media Classic companies or their integration partners must supply the business rules, the database, and development skills to create the applications. There is no “built-in” template application; designers set up the template in Dynamic Media Classic, and developers use URL calls to change the variables in the template.
By the end of this section of the tutorial you will know how to:
All URLs in this chapter are for illustrative purposes only; they are not live links.
The definition of a Basic Template (or just “template,” for short) is a URL-addressable layered image. The end result is an image, but one that can be altered by the URL. It can consist of photos, text, or graphics — any combination of P-TIFF assets in Dynamic Media Classic.
Templates are most similar to Photoshop PSD files, as they have a similar workflow and similar capabilities.
However, unlike Photoshop PSDs, layers can be entirely dynamic and controlled via a URL on the Image Server.
You only need to add a placeholder for each layer that will vary instead of putting all layers in a single file as you do in Photoshop, and showing and hiding them (although you can also do that too, if you prefer).
Using a placeholder, you can dynamically swap out a layer’s content with another published asset, and it will automatically take the same properties (such as size and rotation) of the layer it replaced.
Because Basic Templates are typically designed in Photoshop but deployed via a URL, a template project requires a mixture of both design and technical skills. We generally assume that the person doing the creative template work is a Photoshop designer, and the person implementing the template is a web developer. The creative and development teams must work closely together for the template to be successful.
Template projects can be relatively simple or extremely complex depending on the business rules and needs of the application. Basic Templates are called from the Image Server, however due to the flexibility of the Dynamic Media Classic environment, you can even nest templates inside other templates, allowing you to create fairly complex images that can be linked by commonly named variables.
When working with a Basic Template, you usually follow the workflow steps in the diagram below. Steps marked with dotted lines are optional if you are using dynamic text layers, and are indicated in the instructions below as “Text Workflow.” If not using text, follow the main path only.
The Basic Template workflow.
Before uploading your template assets to Dynamic Media Classic, you will need to complete a few preparatory steps.
Before uploading your Photoshop file to Dynamic Media Classic, simplify the layers in Photoshop to make it easier to work with and to have greatest compatibility with the Image Server. Your PSD file will often consist of many elements that Dynamic Media Classic does not recognize, and you may also end up with many little pieces that are difficult to manage. Be sure to save a backup of your master PSD in case you need to later edit the original. You will upload the simplified copy, and not the master.
Simplify the layer structure by merging/flattening related layers that need to be turned on/off together into a single layer. For example, the label “NEW” and the blue banner are merged into a single layer so you can show or hide them with a single click.
Some layers types and layer effects are not supported by Dynamic Media Classic or the Image Server and need to be rasterized prior to upload. Otherwise the effects might be ignored, or the layers discarded. Rasterizing a layer means converting if from being editable to being non-editable. To rasterize layer effects or text layers, create an empty layer, select both and merge using Layers > Merge Layers or CTRL + E/CMD + E.
You will also upload and publish your fonts if you need to generate dynamic text. The only font included with Dynamic Media Classic is Arial.
It is each company’s responsibility to obtain a license to use a font on the web — simply having a font installed on your computer does not give you the right to use it commercially on the web, and your company could face legal action from the font publisher if used without permission. Also, license terms vary — you might need separate licenses for print versus screen display, for example.
Dynamic Media Classic supports standard OpenType (OTF), TrueType (TTF) and Type 1 Postscript fonts. Mac- only suitcase fonts, type collection files, Windows system fonts and proprietary machine fonts (like fonts used by engraving or embroidery machines) are all not supported — you will have to convert them to one of the standard font formats or substitute a similar font to use in Dynamic Media Classic and on the Image Server.
After fonts are uploaded to Dynamic Media Classic, like any other asset, they must also be published to the Image Server. A very common template error is to forget to publish your fonts, which will result in an image error — the Image Server will not substitute another font in its place. In addition, if you want to use the Extract Text option when uploading, you must upload your font files before uploading the PSD that uses those fonts. The Extract Text feature will attempt to recreate your text as an editable text layer and place it inside a Dynamic Media Classic template. This is discussed in the next topic, PSD Options.
Be aware that fonts have multiple internal names that are often different from their external filename. You can see all their different names on the Details page for that asset in Dynamic Media Classic. Here are the names for the font Adobe Caslon Pro Semibold, listed under the Metadata tab in Dynamic Media Classic:
Metadata tab on the Details page for a font in Dynamic Media Classic.
Dynamic Media Classic uses the filename of this font (ACaslonPro-Semibold) as its Asset ID, however that is not the name used by the template. The template uses the Rich Text Format (RTF) Name, listed at the bottom. RTF is the native “language” of the Image Server text engine.
If you need to change fonts via the URL, you must call to the RTF name of the font (not the Asset ID), or you will get an error. In this case, the proper name for this font would be “Adobe Caslon Pro.” We will discuss more about fonts and RTF in the topic RTF and Text Parameters, below.
The most common font file formats found on Windows and Mac systems are OpenType and TrueType. OpenType has a .OTF extension, while TrueType is .TTF. Both formats work equally well in Dynamic Media Classic.
You do not need to upload a Photoshop file (PSD) to create a template; a template can be built out of any image assets in Dynamic Media Classic. However uploading a PSD can make authoring easier because you’ll typically have these assets already in a layered PSD. In addition, Dynamic Media Classic will automatically generate a template when you upload a layered PSD.
Even though Dynamic Media Classic can automatically create a template from a layered PSD, you should know how to build the template manually. As explained above, there are certain times when you don’t want to use the template created by Dynamic Media Classic.
Let’s first get familiar with the editing interface.
In the left center is your work area showing a preview of your final template. On the right side are the Layers and Layer Properties panels. These areas are where you will be doing the most work.
Build Template Basics page.
Here are the workflow steps to start your Basic Template:
In Dynamic Media Classic, go to Build > Template Basics. You can either have nothing selected, or start by selecting an image, which will become the first layer of your template.
Choose a Size and press OK. This size should match the size you designed in Photoshop. The template editor will load.
If you didn’t have an image selected in step 1, search for or browse to an image in the asset panel on the left and drag it onto the work area.
Resize or reposition the layer directly in the work area, or by adjusting the settings in the Layer Properties panel.
Drag in additional image layers as needed. Add layers effects if you want as well. See the topic Adding Layer Effects, below.
Click Save, choose a location, and give the template a name. You can preview, however at this point your template will look exactly like a flattened Photoshop image — it is not changeable yet.
The Image Server supports a few programmatic layer effects — special effects that change the appearance of a layer’s contents. They work similarly to layer effects in Photoshop. They are attached to a layer but controlled independently of the layer. You can adjust or remove them without making a permanent change to the layer itself.
A layer with and without a drop shadow
To add an effect, click Add Effect, and choose an effect from the menu. Like normal layers, you can select an effect in the Layers panel and use the Layer Properties panel to adjust its settings.
Shadow effects are offset horizontally or vertically away from the layer, whereas Glow effects are applied evenly in all directions. Inner effects act on top of the opaque portions of the layer, whereas Outer effects only affect the transparent areas.
Learn more aboutAdding Layer Effects.
If all you do is combine layers and save them, then the net result is no different from a flattened Photoshop image. What makes templates special is the ability to add parameters to the properties of each layer, so they can be changed dynamically through the URL.
In Dynamic Media Classic terms, a parameter is a variable that can be linked to a template property so it can be manipulated via a URL. When you add a parameter to a layer, Dynamic Media Classic exposes that property in the URL by prefixing the name of your parameter with a dollar sign ($) — for example, if you create a parameter called “size” to change the size of a layer, Dynamic Media Classic will rename your parameter $size.
If you don’t add a parameter for a property, that property remains hidden in the Dynamic Media Classic database and doesn’t show up in the URL.
Without parameters, your URLs would typically be much longer, especially if you are also using dynamic text. Text adds many dozens of extra characters onto each URL.
Finally, your initial set of parameters will become the default values of properties in the template. If you build your template, add parameters, and then call the URL without its parameters, the Image Server will create the image with all the defaults you saved in the template. Parameters are only needed if you want to change a property. If a property does not need to change, you don’t need to set a parameter.
This is the workflow for creating parameters:
Click the Parameters button next to the name of the layer for which you want to create parameters. The Parameters screen opens. It lists each property on the layer and its value.
Select the On option beside the name of each property you want to make into a parameter. A default parameter name will appear. You can only add parameters to properties that have changed from their default state.
Rename the default parameter names to something that will be easier to identify in the URL. For example, if you want to add a parameter to change the banner layer on top of an image, change the default name of “layer_2_src” to"banner."
Press Close to exit the Parameters screen.
Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters.
Save your changes when done.
Rename your parameters to something meaningful, and develop a naming convention to standardize those names. Be sure the naming convention is agreed upon in advance by both the design and development teams.
Can’t add a parameter because you don’t see the property? Just change the property of the layer from its default (by moving, resizing, hiding, etc.). You should now see that property exposed.
Learn more about Template Parameters.
Now you’ll learn how to create a Basic Template that includes text layers.
You now know how to build a Basic Template using image layers. For many applications this is all you need. As you saw in the previous exercise, layers that have simple text (such as “Sale” and “New”) can be rasterized and treated as images because their text does not need to change.
However, what if you needed to:
In that case, you’d want to add some dynamic text layers with parameters to control the text and/or formatting.
To create text, you need to upload some fonts — otherwise, Dynamic Media Classic will default to Arial. The fonts must also be published to the Image Server, or it will generate an error the moment it tries to render any text that uses that font.
In order to add variables to text using the Template Basics tool, you should understand how text is rendered. The Image Server generates text using the Adobe Text Engine, the same engine used by Photoshop and Illustrator, and composites it as a layer in the final image. To communicate with the engine, the Image Server uses Rich Text Format, or RTF.
RTF is a file format specification developed by Microsoft for specifying formatting of documents. It is a standard markup language used by most word processing and email software. If you wrote into a URL &text=\b1 Hello, the Image Server would generate an image with the word “Hello” in bold type, because \b1 is the RTF command for making the text bold.
The good news is that Dynamic Media Classic generates the RTF for you. Whenever you type text into a template and add formatting, Dynamic Media Classic quietly writes the RTF code into the template automatically. The reason we mention it is because you will be adding parameters directly to the RTF itself, so it is important that you are a little bit familiar with it.
You can create text layers in a template in Dynamic Media Classic in the following two ways:
You enter text using the Text Editor. The Text Editor is a WYSIWYG interface that allows you enter and format your text using formatting controls similar to those in Photoshop or Illustrator.
Template Basics Text Editor.
You’ll do most of your work in the Preview tab, which allows you to enter text and see it displayed as it will look in the template. There is also a Source tab, which is used to manually edit the RTF, if necessary.
The general workflow is to use the Preview tab to type some text.
Then you select the text and choose some formatting like font color, font size, or justification using the controls at the top. After the text is styled the way you want, click Apply to see it update in the work area preview. You then close the Text Editor to return to the Template Basics main window.
Here are the workflow steps for adding text inside the Template Basics build page:
Click the Text tool button at the top of the build page.
Drag out a text box where you want text to appear. The Text Editor window will open in a modal window. In the background, you will see your template, however it is not editable until you finish editing the text.
Type the sample text you want to appear when the template is first loaded. For example, if you are creating a text box for a personalized email image, your text might say “Hi Name. Now is the time to save!” Later you’d add a text parameter to replace Name with a value you send on the URL. Your text will not appear in the template beneath the window until you click Apply.
To format your text,select it by dragging with your mouse and choose a formatting control in the UI.
Click Apply to see your changes take effect in the work area window. You must click Apply, or else you will lose your edits.
When you are finished, click Close. If you want to go back to editing mode, double-click on the text layer to re-open the Text Editor.
The text editor will preview exactly how big the font will be if you have the font installed locally on your system.
We now follow a similar process for adding text parameters as we did for layer parameters. Text layers can also take layer parameters for size, position, and so on; however, they can take additional parameters that allow you to control any aspect of the RTF.
Unlike layer parameters, you only select the value you want to change and add a parameter to that rather than add a parameter to the entire property.
When examining the RTF, you need to figure out where each setting is that you want to change. In the RTF above, some of it might make some sense and you can see where the formatting comes from.
You can see the phrase Chocolate Mint Sandal — that is the text itself.
You have enough information to create your parameters, however there is a complete reference of all the RTF commands in the Image Serving documentation. Visit the Image Serving Documentation.
Here are the steps to add parameters to text layers.
To add parameters to the text color, separately add parameters for red, green, and blue. For example, if the RTF is
\red56\green53\blue46, you would add separate red, green, and blue parameters for the values 56, 53, and 46. In the URL, you would change the color by calling all three:
Learn how to Create Dynamic Text Parameters.
Creating a preset for your template is not a required step. We recommend it as a best practice so the template is always called at a 1:1 size and also to add sharpening to any large image layers that get resized to fit the template. If you call an image without a preset, the Image Server may arbitrarily resize your image to the default size (about 400 pixels), and will not apply default sharpening.
There is nothing special about an Image Preset for a template. If you already have a preset for a static image at the same size, you can use it instead.
You will need to run a publish to see your changes pushed live to the Image Server. Keep in mind what needs to get published: the various image asset layers, the fonts for dynamic text, and the template itself. Similar to other Dynamic Media Classic rich media assets like Image Sets and Spin Sets, a Basic Template is an artificial construction — it is a line item in the database that references the images and fonts using a series of Image Serving commands. So when you publish the template, all you are doing is updating data on the Image Server.
Learn more about Publishing Your Template.
A Basic Template has the same essential URL syntax as a normal image call as explained earlier. A template will typically have more modifiers — commands separated by an ampersand (&) — such as parameters with values. However the main difference is that you call to the template as your main image, instead of calling to a static image.
Unlike Image Presets, which have a dollar sign ($) on each side of the preset name, parameters have a single dollar sign at the beginning. The placement of those dollar signs is important.
$text=46-inch LCD HDTV
$text$=46-inch LCD HDTV
$text=46-inch LCD HDTV$
text=46-inch LCD HDTV
As noted earlier, parameters are used to change the template. If you call the template without parameters, it will revert back to its default settings as designed in the Template Basics authoring tool. If a property does not need to change, you don’t need to set a parameter.
Examples of a template without setting parameters (above) and with parameters (below).