best practices guide · 2020-05-23 · a given topic, we’ll point you to relevant webinars, blog...
TRANSCRIPT
Best Practices Guide
346
141719233045596162
Contents
Welcome to the Dynamic Media Classic Best Practices Guide
Chapter 1 Overview of Dynamic Media Classic
Chapter 2 The Dynamic Media Classic Main Workflow and Previewing Assets
Chapter 3 Determine Your Folder Structure and File Naming Convention
Chapter 4 Image Presets
Chapter 5 Image Swatch Spin and Mixed Media Sets
Chapter 6 Cropping Adjusted Images and Zoom Targets
Chapter 7 Introduction to Basic Templates
Chapter 8 Video Overview
Chapter 9 Smart Imaging
Chapter 10 Valuable Reports for Administrators
Conclusion
3
This guide is intended to help current and new users of Dynamic Media Classic more fully understand what they can do with their powerful rich media solution from Adobe Wersquoll do that by
bull Introducing you to Dynamic Media Classic describing what it is and providing an overview of its core capabilities and user interface (UI)
bull Explaining the general Create Author and Deliver workflow yoursquoll follow when working with assets in the solution
bull Discussing important items to set up prior to jumping in and using the solution
bull Taking a deep dive into using several of the solutionrsquos core capabilities
Throughout the guide wersquoll provide examples tips and best practices Wersquoll also explain important terms and concepts with which you should be familiar when working with Dynamic Media Classic And when available for a given topic wersquoll point you to relevant webinars blog posts and online documentation
We hope this guide provides you the information you need to unlock tremendous value from your Dynamic Media Classic solution To more easily navigate the chapters of this guide click the bookmark icon on the left side of the guide to see its contents
Welcome to the Dynamic Media Classic Best Practices Guide
4
Dynamic Media Classic is the hub around which customers create author and deliver rich media content Dynamic Media Classic is an integrated rich media management publishing and serving environment Rich media can be delivered to all marketing and sales channels including the web print material e-mail campaigns web applications desktops and devices
Image serving is perhaps the most used function of Dynamic Media Classic In fact most customers use Dynamic Media Classic to serve up all the images on their websites including images for zoom or rich media However it can also be used for many other purposes including delivery of video and use of AI to optimize images delivered
Core Capabilities of Dynamic Media ClassicIn this guide wersquoll discuss the following core capabilities of Dynamic Media Classic
bull Dynamic Imaging The umbrella term for real-time editing formatting and sizing and interactive zoom and pan color and texture swatching 360-degree spin image templates and multimedia viewers
bull Video Upload final videos publish them and progressively download them into configurable video viewers
bull Smart Imaging Technology that leverages Adobe Sensei AI capabilities and works with existing ldquoImage Presetsrdquo to enhance image delivery performance by automatically optimizing image format size and quality based on client browser capabilities
To discover additional capabilities of the solution visit the Documentation for Dynamic Media Classic
The Dynamic Media Classic User Interface (UI)The Dynamic Media Classic main UI consists of three major areas the Global Navigation bar Asset Library and Browse PanelBuild Panel
Overview of Dynamic Media ClassicChapter 1
Dynamic Media Classic UI
5
Note
Best Practice
Important
Global Navigation Bar Located at the top of your screen yoursquoll use the buttons on this bar to access key areas and capabilities of the solution For example yoursquoll use it to access upload capabilities open various asset building areas (image set spin set etc) perform important tasks such as setting up Image Presets and Viewer Presets and publish your assets From here you can also monitor your jobs see recent activities and choose from a variety of help options
Asset Library Located down the left side of your screen is the Asset Library a panel that you use to organize your assets in folders and subfolders that you create At the top of the panel yoursquoll find search and filters to help you locate assets Advanced Search allows you to search by specifying multiple options as criteria for your search including hidden metadata fields attached to that asset At the bottom of the panel you can see deleted items by clicking the Trash icon Initially you do not start with any folders except the top-level folder which has the same name as your account name
Assets in the Trash will automatically be deleted permanently seven days after they were put there unless you restore them
BrowseBuild Panel The is the center of the UI where yoursquoll either browse assets in Browse mode or if in Build mode yoursquoll use it as a canvas for building assets as part of a workflow When you first sign in yoursquoll see the Browse Panel In the center of the screen are thumbnail versions of your images in a Grid view You can change to a List view or select an asset and view details about it using the Detail view
Beside each Asset ID is the Mark for Publish switch When the toggle is on (green) that indicates that the asset is marked for publish
Select the Publish After Uploading checkbox in the Upload dialog to automatically publish assets upon upload
Learn more about Navigating the UI of Dynamic Media Classic
Ready to Publish Not Ready to Publish
6
The Dynamic Media Classic Main Workflow and Previewing AssetsChapter 2
Dynamic Media supports a Create (and Upload) Author (and Publish) and Deliver workflow process You start by uploading assets then doing something with those assets such as building an Image Set and finally publishing to make them live The Build step is optional for some workflows For example if your goal is to only do dynamic sizing and zoom on images or convert and publish video for streaming there are no necessary Build steps
The workflow in Dynamic Media Classic solutions consists of three main steps
1 Create (and Upload) Source Content
2 Author (and Publish) Assets
3 Deliver Assets
Step 1 Create (and Upload)
This is the beginning of the workflow In this step you gather or create the source content that fits into the workflow you are using and upload it into Dynamic Media Classic The system supports multiple file types for images video and fonts but also for PDF Adobe Illustrator and Adobe InDesign
See the complete list of Supported File Types
You can upload source content in several different ways
bull Directly from your desktop or local network Learn how
bull From a Dynamic Media Classic FTP server Learn how
7
Note
Best Practice
The default mode is From Desktop where you browse for files on your local network and start the upload
Do not manually add your folders Instead run an upload from FTP and use the Include Subfolders option to recreate your folder structure inside Dynamic Media Classic
The two most important upload options are enabled by default mdash Mark for Publish which wersquove discussed earlier and Overwrite Overwrite means that if the file being uploaded has the same name as a file already in the system the new file will replace the existing version If you uncheck this option the file might not be uploaded
Learn more about the Overwrite Images Option
Overwrite Options When Uploading ImagesThere are four variations of the Overwrite Image option that can be set for your entire company and they are often misunderstood In short either you set the rules such that you want assets that have the same name to be overwritten more frequently or you want overwrites to occur less frequently (in which case the new image will get renamed with a ldquo-1rdquo or ldquo-2rdquo extension)
bull Overwrite in current folder same base image nameextension This option is the strictest rule for replacement It requires that you upload the replacement image to the same folder as the original and that the replacement image has the same filename extension as the original If these requirements are not met a duplicate is created
bull Overwrite in current folder same base asset name regardless of extension Requires that you upload the replacement image to the same folder as the original however the filename extension can be different from the original For example chairtif replaces chairjpg
bull Overwrite in any folder same base asset nameextension Requires that the replacement image has the same filename extension as the original image (for example chairjpg must replace chairjpg not chairtif ) However you can upload the replacement image to a different folder than the original The updated image resides in the new folder the file can no longer be found in its original location
8
Concept
bull Overwrite in any folder same base asset name regardless of extension This option is the most inclusive replacement rule You can upload a replacement image to a different folder than the original upload a file with a different filename extension and replace the original file If the original file is in a different folder the replacement image resides in the new folder to which it was uploaded
Although not required while uploading using either of the two methods above you can specify Job Options specific for that upload mdash for example to schedule a recurring upload set cropping options upon upload and many others These can be valuable for some workflows so itrsquos worth considering if they can be for yours
Learn more about Job Options
Uploading is the first necessary step in any workflow because Dynamic Media Classic cannot work with any content that is not already in its system Behind the scenes during upload the system registers every uploaded asset with the centralized Dynamic Media Classic database assigns an ID and copies it to storage In addition the system converts image files to a format that allows dynamic resizing and zoom and converts video files to the MP4 web-friendly format
What happens to images when you upload them to Dynamic Media ClassicWhen you upload an image of any type to Dynamic Media Classic it is converted to a master image format called a Pyramid TIFF or P-TIFF A P-TIFF is similar to the format of a layered TIFF bitmap image except that instead of different layers the file contains multiple sizes (resolutions) of the same image
Conversion to P-TIFF on upload
1112 1418 116132etc
As the image is converted Dynamic Media Classic takes a ldquosnapshotrdquo of the full size of the image scales that by half and saves it scales it by half again and saves it and so on until it is filled with even multiples of the original size For example a 2000 pixel P-TIFF will have 1000 500 250 and 125 pixel sizes (and smaller) in the same file The P-TIFF file is the format of whatrsquos called a ldquomaster imagerdquo in Dynamic Media Classic
9
Best Practice
When you request a certain size image creating the P-TIFF allows the Image Server for Dynamic Media Classic to quickly find the next larger size and scale it down For example if you upload a 2000-pixel image and request a 100-pixel image Dynamic Media Classic will find the 125-pixel version and scale it down to 100 pixels rather than scaling from 2000 to 100 pixels This makes the operation very fast In addition when zooming on an image this enables the zoom viewer to only request a tile of the image being zoomed rather than the entire full resolution image This is how the master image format the P-TIFF file supports both dynamic sizing and zoom
Similarly you can upload your master source video to Dynamic Media Classic and on upload Dynamic Media Classic can automatically resize it and convert it to the MP4 web-friendly format
Rules of Thumb for Determining Optimal Size for the Images You UploadUpload images in the largest size you need
bull If you need to zoom upload a high resolution image of a range of 1500-2500 pixels in the longest dimension Consider how much detail you want to give the quality of your source images and the size of the product being shown For example upload a 1000-pixel image for a tiny ring but a 3000-pixel image for an entire room scene
bull If you donrsquot need to zoom then upload it at the exact size it will be seen For example if you have logos or splashbanner images to place on your pages upload them exactly at their 11 size and call them exactly at that size
Never upsample or blow up your images before uploading to Dynamic Media Classic For example donrsquot upsample a smaller image to make it a 2000 pixel image It wonrsquot look good Make your images as close to perfect as possible before upload
There is no minimum size for zoom but by default the viewers wonrsquot zoom beyond 100 If your image is too small it wonrsquot zoom at all or will only zoom a tiny amount to prevent it from looking bad
While therersquos no minimum for image size we donrsquot recommend uploading giant images A giant image can be considered 4000+ pixels Uploading images this size can show potential flaws like grains of dust or hairs in the image Such images will also take up more space on the Dynamic Media Classic server which can cause you to surpass your contracted storage limits
Learn more about Uploading Files
10
Important
Concept
Step 2 Author (and Publish)
After creating and uploading your content yoursquoll author new rich media assets from your uploaded assets by performing one or more sub-workflows This includes all the different types of set collections mdash Image Swatch Spin and Mixed Media sets as well as Templates It also includes video Wersquoll go into much greater detail about each type of image collection set and video rich media later However in almost all cases you start by selecting one or more assets (or have no assets selected) and choosing the type of asset you want to build For example you might select a main image and a few views of that image and choose to build an Image Set a collection of alternate views of the same product
Make sure that all your assets are marked for publish While by default all assets are automatically marked for publish on upload any newly authored assets from your uploaded content will need to be marked for publish as well
After yoursquove built your new asset you will run a publish job You can do that manually or schedule a publish job that runs automatically Publishing copies all content from the private Dynamic Media Classic sphere to the public publish server sphere of the equation The product of a Dynamic Media Publish job is a unique URL for each published asset
Understanding the Dynamic Media Classic URLThe final product of a Dynamic Media Classic workflow is a URL that points to the asset (whether image set or adaptive video set) These URLs are very predictable and follow the same pattern In the case of images each image is generated from the P-TIFF master image
Here is the syntax for the URL of an image with a couple of examples
In the URL everything to the left of the question mark is the virtual path to a specific image Everything to the right of the question mark is an Image Server modifier an instruction for how to process the image When you have multiple modifiers they are separated by ampersands
11
Best Practice
Concept
In the first example the virtual path to the image ldquoBackpack_Ardquo is The Image Server modifiers resize the image to a width of 250
pixels (from wid=250) and resamples the image using the Lanczos interpolation algorithm which sharpens as it resizes (from resMode=sharp2)
The second example applies whatrsquos known as an ldquoimage presetrdquo to the same Backpack_A image as indicated by $_template300$ The $ symbols on either side of the expression indicate that an image preset a packaged set of image modifiers is being applied to the image
Once you understand how Dynamic Media Classic URLs are put together then you understand how to change them programmatically and how to integrate them deeper into your site and backend systems
The server you publish to depends on the type of content and workflow For example all images go to the Image Server and streaming video to the FMS Server For convenience wersquoll speak of a ldquopublishrdquo as a single event to a single server
Publishing publishes all content marked for publish mdash not just your content A single administrator typically publishes on behalf of everyone rather than individual users running a publish The administrator can publish as needed or set up a recurring daily weekly or even every 10 minutes job that will publish automatically Publish on a schedule that makes sense for your business
Automate your publish jobs and schedule a Full Publish to run every day at 1200AM or any time late in the evening
Understanding the Caching DelayNewly uploaded and published assets will be seen right away whereas updated assets may be subject to the 10-hour caching delay By default all published assets have a minimum of 10 hours before they expire We say minimum because every time the image is viewed it starts a clock that will not expire until 10 hours have elapsed in which no one has viewed that image This 10ndashhour period is the ldquoTime to Liverdquo for an asset Once the cache expires for that asset the updated version can be delivered
This typically is not an issue unless a mistake occurred and the imageasset has the same name as the previously published version but there is a problem with the image For example you accidentally uploaded a low resolution version or your art director didnrsquot approve the image In this case you want to recall the original image and replace it with a new version using the same Asset ID
Learn how to Manually Clear the Cache for the URLs That Need to Be Updated
12
Important
Best Practice
To avoid issues with caching delay always work ahead mdash an evening a day two weeks etc Build in time for QAacceptance for internal parties to proof your work before releasing to the public Even working an evening before allows you to make changes and re-publish that evening By morning the 10 hours has elapsed and the cache updates with the correct image
Learn more about Creating a Publishing Job
Learn more about Publishing
Step 3 Deliver
Remember that the final product of a Dynamic Media Classic workflow is a URL that points to the asset The URL might point to an individual image an Image Set a Spin Set or some other Image Set collection or video You need to take that URL and do something with it such as edit your HTML so that the ltIMGgt tags point to the Dynamic Media Classic image instead of pointing to an image coming from your current site
In the Deliver step you must integrate those URLs into your web site mobile app email campaign or any other digital touchpoint on which you want to display the asset
Example of integrating the Dynamic Media Classic URL for an image into a website
The URL in red is the only element specific to Dynamic Media Classic
Your IT team or integration partner can take the lead on writing and changing code to integrate Dynamic Media Classic URLs into your site Adobe has a consulting team that can help in this effort either by providing technical creative or general guidance
For more complex solutions such as zoom viewers or viewers that combine zoom with alternate views typically the URL points to a viewer that is hosted by Dynamic Media Classic and also within that URL is a reference to an Asset ID
Example of a link (in red) that will open an Image Set in a viewer in a new pop-up window
You need to integrate the Dynamic Media Classic URLs into your website mobile app email and other digital touchpoints mdash Dynamic Media Classic canrsquot do that for you
13
Previewing Assets Yoursquoll probably want to preview the assets yoursquove uploaded or are creating or editing to make sure they appear as you want when your customers view them You can access the Preview window by clicking any Preview button either on the thumbnail of the asset at the top of the BrowseBuild Panel or by going to File gt Preview In a browser window it will preview whichever asset is currently in the panel whether that is an image video or built asset like an Image Set
Dynamic Size Preview (Image Presets) You can preview your images in multiple sizes using the Sizes preview This loads a list of your available Image Presets Wersquoll discuss Image Presets later but think of them as ldquorecipesrdquo for loading your image at a named size with specific amounts of sharpening and image quality
Zoom Preview You can also use the Zoom option to preview your image in one of many pre-built zoom presets which are based on different included zoom viewers
Learn more about Previewing Assets
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
346
141719233045596162
Contents
Welcome to the Dynamic Media Classic Best Practices Guide
Chapter 1 Overview of Dynamic Media Classic
Chapter 2 The Dynamic Media Classic Main Workflow and Previewing Assets
Chapter 3 Determine Your Folder Structure and File Naming Convention
Chapter 4 Image Presets
Chapter 5 Image Swatch Spin and Mixed Media Sets
Chapter 6 Cropping Adjusted Images and Zoom Targets
Chapter 7 Introduction to Basic Templates
Chapter 8 Video Overview
Chapter 9 Smart Imaging
Chapter 10 Valuable Reports for Administrators
Conclusion
3
This guide is intended to help current and new users of Dynamic Media Classic more fully understand what they can do with their powerful rich media solution from Adobe Wersquoll do that by
bull Introducing you to Dynamic Media Classic describing what it is and providing an overview of its core capabilities and user interface (UI)
bull Explaining the general Create Author and Deliver workflow yoursquoll follow when working with assets in the solution
bull Discussing important items to set up prior to jumping in and using the solution
bull Taking a deep dive into using several of the solutionrsquos core capabilities
Throughout the guide wersquoll provide examples tips and best practices Wersquoll also explain important terms and concepts with which you should be familiar when working with Dynamic Media Classic And when available for a given topic wersquoll point you to relevant webinars blog posts and online documentation
We hope this guide provides you the information you need to unlock tremendous value from your Dynamic Media Classic solution To more easily navigate the chapters of this guide click the bookmark icon on the left side of the guide to see its contents
Welcome to the Dynamic Media Classic Best Practices Guide
4
Dynamic Media Classic is the hub around which customers create author and deliver rich media content Dynamic Media Classic is an integrated rich media management publishing and serving environment Rich media can be delivered to all marketing and sales channels including the web print material e-mail campaigns web applications desktops and devices
Image serving is perhaps the most used function of Dynamic Media Classic In fact most customers use Dynamic Media Classic to serve up all the images on their websites including images for zoom or rich media However it can also be used for many other purposes including delivery of video and use of AI to optimize images delivered
Core Capabilities of Dynamic Media ClassicIn this guide wersquoll discuss the following core capabilities of Dynamic Media Classic
bull Dynamic Imaging The umbrella term for real-time editing formatting and sizing and interactive zoom and pan color and texture swatching 360-degree spin image templates and multimedia viewers
bull Video Upload final videos publish them and progressively download them into configurable video viewers
bull Smart Imaging Technology that leverages Adobe Sensei AI capabilities and works with existing ldquoImage Presetsrdquo to enhance image delivery performance by automatically optimizing image format size and quality based on client browser capabilities
To discover additional capabilities of the solution visit the Documentation for Dynamic Media Classic
The Dynamic Media Classic User Interface (UI)The Dynamic Media Classic main UI consists of three major areas the Global Navigation bar Asset Library and Browse PanelBuild Panel
Overview of Dynamic Media ClassicChapter 1
Dynamic Media Classic UI
5
Note
Best Practice
Important
Global Navigation Bar Located at the top of your screen yoursquoll use the buttons on this bar to access key areas and capabilities of the solution For example yoursquoll use it to access upload capabilities open various asset building areas (image set spin set etc) perform important tasks such as setting up Image Presets and Viewer Presets and publish your assets From here you can also monitor your jobs see recent activities and choose from a variety of help options
Asset Library Located down the left side of your screen is the Asset Library a panel that you use to organize your assets in folders and subfolders that you create At the top of the panel yoursquoll find search and filters to help you locate assets Advanced Search allows you to search by specifying multiple options as criteria for your search including hidden metadata fields attached to that asset At the bottom of the panel you can see deleted items by clicking the Trash icon Initially you do not start with any folders except the top-level folder which has the same name as your account name
Assets in the Trash will automatically be deleted permanently seven days after they were put there unless you restore them
BrowseBuild Panel The is the center of the UI where yoursquoll either browse assets in Browse mode or if in Build mode yoursquoll use it as a canvas for building assets as part of a workflow When you first sign in yoursquoll see the Browse Panel In the center of the screen are thumbnail versions of your images in a Grid view You can change to a List view or select an asset and view details about it using the Detail view
Beside each Asset ID is the Mark for Publish switch When the toggle is on (green) that indicates that the asset is marked for publish
Select the Publish After Uploading checkbox in the Upload dialog to automatically publish assets upon upload
Learn more about Navigating the UI of Dynamic Media Classic
Ready to Publish Not Ready to Publish
6
The Dynamic Media Classic Main Workflow and Previewing AssetsChapter 2
Dynamic Media supports a Create (and Upload) Author (and Publish) and Deliver workflow process You start by uploading assets then doing something with those assets such as building an Image Set and finally publishing to make them live The Build step is optional for some workflows For example if your goal is to only do dynamic sizing and zoom on images or convert and publish video for streaming there are no necessary Build steps
The workflow in Dynamic Media Classic solutions consists of three main steps
1 Create (and Upload) Source Content
2 Author (and Publish) Assets
3 Deliver Assets
Step 1 Create (and Upload)
This is the beginning of the workflow In this step you gather or create the source content that fits into the workflow you are using and upload it into Dynamic Media Classic The system supports multiple file types for images video and fonts but also for PDF Adobe Illustrator and Adobe InDesign
See the complete list of Supported File Types
You can upload source content in several different ways
bull Directly from your desktop or local network Learn how
bull From a Dynamic Media Classic FTP server Learn how
7
Note
Best Practice
The default mode is From Desktop where you browse for files on your local network and start the upload
Do not manually add your folders Instead run an upload from FTP and use the Include Subfolders option to recreate your folder structure inside Dynamic Media Classic
The two most important upload options are enabled by default mdash Mark for Publish which wersquove discussed earlier and Overwrite Overwrite means that if the file being uploaded has the same name as a file already in the system the new file will replace the existing version If you uncheck this option the file might not be uploaded
Learn more about the Overwrite Images Option
Overwrite Options When Uploading ImagesThere are four variations of the Overwrite Image option that can be set for your entire company and they are often misunderstood In short either you set the rules such that you want assets that have the same name to be overwritten more frequently or you want overwrites to occur less frequently (in which case the new image will get renamed with a ldquo-1rdquo or ldquo-2rdquo extension)
bull Overwrite in current folder same base image nameextension This option is the strictest rule for replacement It requires that you upload the replacement image to the same folder as the original and that the replacement image has the same filename extension as the original If these requirements are not met a duplicate is created
bull Overwrite in current folder same base asset name regardless of extension Requires that you upload the replacement image to the same folder as the original however the filename extension can be different from the original For example chairtif replaces chairjpg
bull Overwrite in any folder same base asset nameextension Requires that the replacement image has the same filename extension as the original image (for example chairjpg must replace chairjpg not chairtif ) However you can upload the replacement image to a different folder than the original The updated image resides in the new folder the file can no longer be found in its original location
8
Concept
bull Overwrite in any folder same base asset name regardless of extension This option is the most inclusive replacement rule You can upload a replacement image to a different folder than the original upload a file with a different filename extension and replace the original file If the original file is in a different folder the replacement image resides in the new folder to which it was uploaded
Although not required while uploading using either of the two methods above you can specify Job Options specific for that upload mdash for example to schedule a recurring upload set cropping options upon upload and many others These can be valuable for some workflows so itrsquos worth considering if they can be for yours
Learn more about Job Options
Uploading is the first necessary step in any workflow because Dynamic Media Classic cannot work with any content that is not already in its system Behind the scenes during upload the system registers every uploaded asset with the centralized Dynamic Media Classic database assigns an ID and copies it to storage In addition the system converts image files to a format that allows dynamic resizing and zoom and converts video files to the MP4 web-friendly format
What happens to images when you upload them to Dynamic Media ClassicWhen you upload an image of any type to Dynamic Media Classic it is converted to a master image format called a Pyramid TIFF or P-TIFF A P-TIFF is similar to the format of a layered TIFF bitmap image except that instead of different layers the file contains multiple sizes (resolutions) of the same image
Conversion to P-TIFF on upload
1112 1418 116132etc
As the image is converted Dynamic Media Classic takes a ldquosnapshotrdquo of the full size of the image scales that by half and saves it scales it by half again and saves it and so on until it is filled with even multiples of the original size For example a 2000 pixel P-TIFF will have 1000 500 250 and 125 pixel sizes (and smaller) in the same file The P-TIFF file is the format of whatrsquos called a ldquomaster imagerdquo in Dynamic Media Classic
9
Best Practice
When you request a certain size image creating the P-TIFF allows the Image Server for Dynamic Media Classic to quickly find the next larger size and scale it down For example if you upload a 2000-pixel image and request a 100-pixel image Dynamic Media Classic will find the 125-pixel version and scale it down to 100 pixels rather than scaling from 2000 to 100 pixels This makes the operation very fast In addition when zooming on an image this enables the zoom viewer to only request a tile of the image being zoomed rather than the entire full resolution image This is how the master image format the P-TIFF file supports both dynamic sizing and zoom
Similarly you can upload your master source video to Dynamic Media Classic and on upload Dynamic Media Classic can automatically resize it and convert it to the MP4 web-friendly format
Rules of Thumb for Determining Optimal Size for the Images You UploadUpload images in the largest size you need
bull If you need to zoom upload a high resolution image of a range of 1500-2500 pixels in the longest dimension Consider how much detail you want to give the quality of your source images and the size of the product being shown For example upload a 1000-pixel image for a tiny ring but a 3000-pixel image for an entire room scene
bull If you donrsquot need to zoom then upload it at the exact size it will be seen For example if you have logos or splashbanner images to place on your pages upload them exactly at their 11 size and call them exactly at that size
Never upsample or blow up your images before uploading to Dynamic Media Classic For example donrsquot upsample a smaller image to make it a 2000 pixel image It wonrsquot look good Make your images as close to perfect as possible before upload
There is no minimum size for zoom but by default the viewers wonrsquot zoom beyond 100 If your image is too small it wonrsquot zoom at all or will only zoom a tiny amount to prevent it from looking bad
While therersquos no minimum for image size we donrsquot recommend uploading giant images A giant image can be considered 4000+ pixels Uploading images this size can show potential flaws like grains of dust or hairs in the image Such images will also take up more space on the Dynamic Media Classic server which can cause you to surpass your contracted storage limits
Learn more about Uploading Files
10
Important
Concept
Step 2 Author (and Publish)
After creating and uploading your content yoursquoll author new rich media assets from your uploaded assets by performing one or more sub-workflows This includes all the different types of set collections mdash Image Swatch Spin and Mixed Media sets as well as Templates It also includes video Wersquoll go into much greater detail about each type of image collection set and video rich media later However in almost all cases you start by selecting one or more assets (or have no assets selected) and choosing the type of asset you want to build For example you might select a main image and a few views of that image and choose to build an Image Set a collection of alternate views of the same product
Make sure that all your assets are marked for publish While by default all assets are automatically marked for publish on upload any newly authored assets from your uploaded content will need to be marked for publish as well
After yoursquove built your new asset you will run a publish job You can do that manually or schedule a publish job that runs automatically Publishing copies all content from the private Dynamic Media Classic sphere to the public publish server sphere of the equation The product of a Dynamic Media Publish job is a unique URL for each published asset
Understanding the Dynamic Media Classic URLThe final product of a Dynamic Media Classic workflow is a URL that points to the asset (whether image set or adaptive video set) These URLs are very predictable and follow the same pattern In the case of images each image is generated from the P-TIFF master image
Here is the syntax for the URL of an image with a couple of examples
In the URL everything to the left of the question mark is the virtual path to a specific image Everything to the right of the question mark is an Image Server modifier an instruction for how to process the image When you have multiple modifiers they are separated by ampersands
11
Best Practice
Concept
In the first example the virtual path to the image ldquoBackpack_Ardquo is The Image Server modifiers resize the image to a width of 250
pixels (from wid=250) and resamples the image using the Lanczos interpolation algorithm which sharpens as it resizes (from resMode=sharp2)
The second example applies whatrsquos known as an ldquoimage presetrdquo to the same Backpack_A image as indicated by $_template300$ The $ symbols on either side of the expression indicate that an image preset a packaged set of image modifiers is being applied to the image
Once you understand how Dynamic Media Classic URLs are put together then you understand how to change them programmatically and how to integrate them deeper into your site and backend systems
The server you publish to depends on the type of content and workflow For example all images go to the Image Server and streaming video to the FMS Server For convenience wersquoll speak of a ldquopublishrdquo as a single event to a single server
Publishing publishes all content marked for publish mdash not just your content A single administrator typically publishes on behalf of everyone rather than individual users running a publish The administrator can publish as needed or set up a recurring daily weekly or even every 10 minutes job that will publish automatically Publish on a schedule that makes sense for your business
Automate your publish jobs and schedule a Full Publish to run every day at 1200AM or any time late in the evening
Understanding the Caching DelayNewly uploaded and published assets will be seen right away whereas updated assets may be subject to the 10-hour caching delay By default all published assets have a minimum of 10 hours before they expire We say minimum because every time the image is viewed it starts a clock that will not expire until 10 hours have elapsed in which no one has viewed that image This 10ndashhour period is the ldquoTime to Liverdquo for an asset Once the cache expires for that asset the updated version can be delivered
This typically is not an issue unless a mistake occurred and the imageasset has the same name as the previously published version but there is a problem with the image For example you accidentally uploaded a low resolution version or your art director didnrsquot approve the image In this case you want to recall the original image and replace it with a new version using the same Asset ID
Learn how to Manually Clear the Cache for the URLs That Need to Be Updated
12
Important
Best Practice
To avoid issues with caching delay always work ahead mdash an evening a day two weeks etc Build in time for QAacceptance for internal parties to proof your work before releasing to the public Even working an evening before allows you to make changes and re-publish that evening By morning the 10 hours has elapsed and the cache updates with the correct image
Learn more about Creating a Publishing Job
Learn more about Publishing
Step 3 Deliver
Remember that the final product of a Dynamic Media Classic workflow is a URL that points to the asset The URL might point to an individual image an Image Set a Spin Set or some other Image Set collection or video You need to take that URL and do something with it such as edit your HTML so that the ltIMGgt tags point to the Dynamic Media Classic image instead of pointing to an image coming from your current site
In the Deliver step you must integrate those URLs into your web site mobile app email campaign or any other digital touchpoint on which you want to display the asset
Example of integrating the Dynamic Media Classic URL for an image into a website
The URL in red is the only element specific to Dynamic Media Classic
Your IT team or integration partner can take the lead on writing and changing code to integrate Dynamic Media Classic URLs into your site Adobe has a consulting team that can help in this effort either by providing technical creative or general guidance
For more complex solutions such as zoom viewers or viewers that combine zoom with alternate views typically the URL points to a viewer that is hosted by Dynamic Media Classic and also within that URL is a reference to an Asset ID
Example of a link (in red) that will open an Image Set in a viewer in a new pop-up window
You need to integrate the Dynamic Media Classic URLs into your website mobile app email and other digital touchpoints mdash Dynamic Media Classic canrsquot do that for you
13
Previewing Assets Yoursquoll probably want to preview the assets yoursquove uploaded or are creating or editing to make sure they appear as you want when your customers view them You can access the Preview window by clicking any Preview button either on the thumbnail of the asset at the top of the BrowseBuild Panel or by going to File gt Preview In a browser window it will preview whichever asset is currently in the panel whether that is an image video or built asset like an Image Set
Dynamic Size Preview (Image Presets) You can preview your images in multiple sizes using the Sizes preview This loads a list of your available Image Presets Wersquoll discuss Image Presets later but think of them as ldquorecipesrdquo for loading your image at a named size with specific amounts of sharpening and image quality
Zoom Preview You can also use the Zoom option to preview your image in one of many pre-built zoom presets which are based on different included zoom viewers
Learn more about Previewing Assets
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
3
This guide is intended to help current and new users of Dynamic Media Classic more fully understand what they can do with their powerful rich media solution from Adobe Wersquoll do that by
bull Introducing you to Dynamic Media Classic describing what it is and providing an overview of its core capabilities and user interface (UI)
bull Explaining the general Create Author and Deliver workflow yoursquoll follow when working with assets in the solution
bull Discussing important items to set up prior to jumping in and using the solution
bull Taking a deep dive into using several of the solutionrsquos core capabilities
Throughout the guide wersquoll provide examples tips and best practices Wersquoll also explain important terms and concepts with which you should be familiar when working with Dynamic Media Classic And when available for a given topic wersquoll point you to relevant webinars blog posts and online documentation
We hope this guide provides you the information you need to unlock tremendous value from your Dynamic Media Classic solution To more easily navigate the chapters of this guide click the bookmark icon on the left side of the guide to see its contents
Welcome to the Dynamic Media Classic Best Practices Guide
4
Dynamic Media Classic is the hub around which customers create author and deliver rich media content Dynamic Media Classic is an integrated rich media management publishing and serving environment Rich media can be delivered to all marketing and sales channels including the web print material e-mail campaigns web applications desktops and devices
Image serving is perhaps the most used function of Dynamic Media Classic In fact most customers use Dynamic Media Classic to serve up all the images on their websites including images for zoom or rich media However it can also be used for many other purposes including delivery of video and use of AI to optimize images delivered
Core Capabilities of Dynamic Media ClassicIn this guide wersquoll discuss the following core capabilities of Dynamic Media Classic
bull Dynamic Imaging The umbrella term for real-time editing formatting and sizing and interactive zoom and pan color and texture swatching 360-degree spin image templates and multimedia viewers
bull Video Upload final videos publish them and progressively download them into configurable video viewers
bull Smart Imaging Technology that leverages Adobe Sensei AI capabilities and works with existing ldquoImage Presetsrdquo to enhance image delivery performance by automatically optimizing image format size and quality based on client browser capabilities
To discover additional capabilities of the solution visit the Documentation for Dynamic Media Classic
The Dynamic Media Classic User Interface (UI)The Dynamic Media Classic main UI consists of three major areas the Global Navigation bar Asset Library and Browse PanelBuild Panel
Overview of Dynamic Media ClassicChapter 1
Dynamic Media Classic UI
5
Note
Best Practice
Important
Global Navigation Bar Located at the top of your screen yoursquoll use the buttons on this bar to access key areas and capabilities of the solution For example yoursquoll use it to access upload capabilities open various asset building areas (image set spin set etc) perform important tasks such as setting up Image Presets and Viewer Presets and publish your assets From here you can also monitor your jobs see recent activities and choose from a variety of help options
Asset Library Located down the left side of your screen is the Asset Library a panel that you use to organize your assets in folders and subfolders that you create At the top of the panel yoursquoll find search and filters to help you locate assets Advanced Search allows you to search by specifying multiple options as criteria for your search including hidden metadata fields attached to that asset At the bottom of the panel you can see deleted items by clicking the Trash icon Initially you do not start with any folders except the top-level folder which has the same name as your account name
Assets in the Trash will automatically be deleted permanently seven days after they were put there unless you restore them
BrowseBuild Panel The is the center of the UI where yoursquoll either browse assets in Browse mode or if in Build mode yoursquoll use it as a canvas for building assets as part of a workflow When you first sign in yoursquoll see the Browse Panel In the center of the screen are thumbnail versions of your images in a Grid view You can change to a List view or select an asset and view details about it using the Detail view
Beside each Asset ID is the Mark for Publish switch When the toggle is on (green) that indicates that the asset is marked for publish
Select the Publish After Uploading checkbox in the Upload dialog to automatically publish assets upon upload
Learn more about Navigating the UI of Dynamic Media Classic
Ready to Publish Not Ready to Publish
6
The Dynamic Media Classic Main Workflow and Previewing AssetsChapter 2
Dynamic Media supports a Create (and Upload) Author (and Publish) and Deliver workflow process You start by uploading assets then doing something with those assets such as building an Image Set and finally publishing to make them live The Build step is optional for some workflows For example if your goal is to only do dynamic sizing and zoom on images or convert and publish video for streaming there are no necessary Build steps
The workflow in Dynamic Media Classic solutions consists of three main steps
1 Create (and Upload) Source Content
2 Author (and Publish) Assets
3 Deliver Assets
Step 1 Create (and Upload)
This is the beginning of the workflow In this step you gather or create the source content that fits into the workflow you are using and upload it into Dynamic Media Classic The system supports multiple file types for images video and fonts but also for PDF Adobe Illustrator and Adobe InDesign
See the complete list of Supported File Types
You can upload source content in several different ways
bull Directly from your desktop or local network Learn how
bull From a Dynamic Media Classic FTP server Learn how
7
Note
Best Practice
The default mode is From Desktop where you browse for files on your local network and start the upload
Do not manually add your folders Instead run an upload from FTP and use the Include Subfolders option to recreate your folder structure inside Dynamic Media Classic
The two most important upload options are enabled by default mdash Mark for Publish which wersquove discussed earlier and Overwrite Overwrite means that if the file being uploaded has the same name as a file already in the system the new file will replace the existing version If you uncheck this option the file might not be uploaded
Learn more about the Overwrite Images Option
Overwrite Options When Uploading ImagesThere are four variations of the Overwrite Image option that can be set for your entire company and they are often misunderstood In short either you set the rules such that you want assets that have the same name to be overwritten more frequently or you want overwrites to occur less frequently (in which case the new image will get renamed with a ldquo-1rdquo or ldquo-2rdquo extension)
bull Overwrite in current folder same base image nameextension This option is the strictest rule for replacement It requires that you upload the replacement image to the same folder as the original and that the replacement image has the same filename extension as the original If these requirements are not met a duplicate is created
bull Overwrite in current folder same base asset name regardless of extension Requires that you upload the replacement image to the same folder as the original however the filename extension can be different from the original For example chairtif replaces chairjpg
bull Overwrite in any folder same base asset nameextension Requires that the replacement image has the same filename extension as the original image (for example chairjpg must replace chairjpg not chairtif ) However you can upload the replacement image to a different folder than the original The updated image resides in the new folder the file can no longer be found in its original location
8
Concept
bull Overwrite in any folder same base asset name regardless of extension This option is the most inclusive replacement rule You can upload a replacement image to a different folder than the original upload a file with a different filename extension and replace the original file If the original file is in a different folder the replacement image resides in the new folder to which it was uploaded
Although not required while uploading using either of the two methods above you can specify Job Options specific for that upload mdash for example to schedule a recurring upload set cropping options upon upload and many others These can be valuable for some workflows so itrsquos worth considering if they can be for yours
Learn more about Job Options
Uploading is the first necessary step in any workflow because Dynamic Media Classic cannot work with any content that is not already in its system Behind the scenes during upload the system registers every uploaded asset with the centralized Dynamic Media Classic database assigns an ID and copies it to storage In addition the system converts image files to a format that allows dynamic resizing and zoom and converts video files to the MP4 web-friendly format
What happens to images when you upload them to Dynamic Media ClassicWhen you upload an image of any type to Dynamic Media Classic it is converted to a master image format called a Pyramid TIFF or P-TIFF A P-TIFF is similar to the format of a layered TIFF bitmap image except that instead of different layers the file contains multiple sizes (resolutions) of the same image
Conversion to P-TIFF on upload
1112 1418 116132etc
As the image is converted Dynamic Media Classic takes a ldquosnapshotrdquo of the full size of the image scales that by half and saves it scales it by half again and saves it and so on until it is filled with even multiples of the original size For example a 2000 pixel P-TIFF will have 1000 500 250 and 125 pixel sizes (and smaller) in the same file The P-TIFF file is the format of whatrsquos called a ldquomaster imagerdquo in Dynamic Media Classic
9
Best Practice
When you request a certain size image creating the P-TIFF allows the Image Server for Dynamic Media Classic to quickly find the next larger size and scale it down For example if you upload a 2000-pixel image and request a 100-pixel image Dynamic Media Classic will find the 125-pixel version and scale it down to 100 pixels rather than scaling from 2000 to 100 pixels This makes the operation very fast In addition when zooming on an image this enables the zoom viewer to only request a tile of the image being zoomed rather than the entire full resolution image This is how the master image format the P-TIFF file supports both dynamic sizing and zoom
Similarly you can upload your master source video to Dynamic Media Classic and on upload Dynamic Media Classic can automatically resize it and convert it to the MP4 web-friendly format
Rules of Thumb for Determining Optimal Size for the Images You UploadUpload images in the largest size you need
bull If you need to zoom upload a high resolution image of a range of 1500-2500 pixels in the longest dimension Consider how much detail you want to give the quality of your source images and the size of the product being shown For example upload a 1000-pixel image for a tiny ring but a 3000-pixel image for an entire room scene
bull If you donrsquot need to zoom then upload it at the exact size it will be seen For example if you have logos or splashbanner images to place on your pages upload them exactly at their 11 size and call them exactly at that size
Never upsample or blow up your images before uploading to Dynamic Media Classic For example donrsquot upsample a smaller image to make it a 2000 pixel image It wonrsquot look good Make your images as close to perfect as possible before upload
There is no minimum size for zoom but by default the viewers wonrsquot zoom beyond 100 If your image is too small it wonrsquot zoom at all or will only zoom a tiny amount to prevent it from looking bad
While therersquos no minimum for image size we donrsquot recommend uploading giant images A giant image can be considered 4000+ pixels Uploading images this size can show potential flaws like grains of dust or hairs in the image Such images will also take up more space on the Dynamic Media Classic server which can cause you to surpass your contracted storage limits
Learn more about Uploading Files
10
Important
Concept
Step 2 Author (and Publish)
After creating and uploading your content yoursquoll author new rich media assets from your uploaded assets by performing one or more sub-workflows This includes all the different types of set collections mdash Image Swatch Spin and Mixed Media sets as well as Templates It also includes video Wersquoll go into much greater detail about each type of image collection set and video rich media later However in almost all cases you start by selecting one or more assets (or have no assets selected) and choosing the type of asset you want to build For example you might select a main image and a few views of that image and choose to build an Image Set a collection of alternate views of the same product
Make sure that all your assets are marked for publish While by default all assets are automatically marked for publish on upload any newly authored assets from your uploaded content will need to be marked for publish as well
After yoursquove built your new asset you will run a publish job You can do that manually or schedule a publish job that runs automatically Publishing copies all content from the private Dynamic Media Classic sphere to the public publish server sphere of the equation The product of a Dynamic Media Publish job is a unique URL for each published asset
Understanding the Dynamic Media Classic URLThe final product of a Dynamic Media Classic workflow is a URL that points to the asset (whether image set or adaptive video set) These URLs are very predictable and follow the same pattern In the case of images each image is generated from the P-TIFF master image
Here is the syntax for the URL of an image with a couple of examples
In the URL everything to the left of the question mark is the virtual path to a specific image Everything to the right of the question mark is an Image Server modifier an instruction for how to process the image When you have multiple modifiers they are separated by ampersands
11
Best Practice
Concept
In the first example the virtual path to the image ldquoBackpack_Ardquo is The Image Server modifiers resize the image to a width of 250
pixels (from wid=250) and resamples the image using the Lanczos interpolation algorithm which sharpens as it resizes (from resMode=sharp2)
The second example applies whatrsquos known as an ldquoimage presetrdquo to the same Backpack_A image as indicated by $_template300$ The $ symbols on either side of the expression indicate that an image preset a packaged set of image modifiers is being applied to the image
Once you understand how Dynamic Media Classic URLs are put together then you understand how to change them programmatically and how to integrate them deeper into your site and backend systems
The server you publish to depends on the type of content and workflow For example all images go to the Image Server and streaming video to the FMS Server For convenience wersquoll speak of a ldquopublishrdquo as a single event to a single server
Publishing publishes all content marked for publish mdash not just your content A single administrator typically publishes on behalf of everyone rather than individual users running a publish The administrator can publish as needed or set up a recurring daily weekly or even every 10 minutes job that will publish automatically Publish on a schedule that makes sense for your business
Automate your publish jobs and schedule a Full Publish to run every day at 1200AM or any time late in the evening
Understanding the Caching DelayNewly uploaded and published assets will be seen right away whereas updated assets may be subject to the 10-hour caching delay By default all published assets have a minimum of 10 hours before they expire We say minimum because every time the image is viewed it starts a clock that will not expire until 10 hours have elapsed in which no one has viewed that image This 10ndashhour period is the ldquoTime to Liverdquo for an asset Once the cache expires for that asset the updated version can be delivered
This typically is not an issue unless a mistake occurred and the imageasset has the same name as the previously published version but there is a problem with the image For example you accidentally uploaded a low resolution version or your art director didnrsquot approve the image In this case you want to recall the original image and replace it with a new version using the same Asset ID
Learn how to Manually Clear the Cache for the URLs That Need to Be Updated
12
Important
Best Practice
To avoid issues with caching delay always work ahead mdash an evening a day two weeks etc Build in time for QAacceptance for internal parties to proof your work before releasing to the public Even working an evening before allows you to make changes and re-publish that evening By morning the 10 hours has elapsed and the cache updates with the correct image
Learn more about Creating a Publishing Job
Learn more about Publishing
Step 3 Deliver
Remember that the final product of a Dynamic Media Classic workflow is a URL that points to the asset The URL might point to an individual image an Image Set a Spin Set or some other Image Set collection or video You need to take that URL and do something with it such as edit your HTML so that the ltIMGgt tags point to the Dynamic Media Classic image instead of pointing to an image coming from your current site
In the Deliver step you must integrate those URLs into your web site mobile app email campaign or any other digital touchpoint on which you want to display the asset
Example of integrating the Dynamic Media Classic URL for an image into a website
The URL in red is the only element specific to Dynamic Media Classic
Your IT team or integration partner can take the lead on writing and changing code to integrate Dynamic Media Classic URLs into your site Adobe has a consulting team that can help in this effort either by providing technical creative or general guidance
For more complex solutions such as zoom viewers or viewers that combine zoom with alternate views typically the URL points to a viewer that is hosted by Dynamic Media Classic and also within that URL is a reference to an Asset ID
Example of a link (in red) that will open an Image Set in a viewer in a new pop-up window
You need to integrate the Dynamic Media Classic URLs into your website mobile app email and other digital touchpoints mdash Dynamic Media Classic canrsquot do that for you
13
Previewing Assets Yoursquoll probably want to preview the assets yoursquove uploaded or are creating or editing to make sure they appear as you want when your customers view them You can access the Preview window by clicking any Preview button either on the thumbnail of the asset at the top of the BrowseBuild Panel or by going to File gt Preview In a browser window it will preview whichever asset is currently in the panel whether that is an image video or built asset like an Image Set
Dynamic Size Preview (Image Presets) You can preview your images in multiple sizes using the Sizes preview This loads a list of your available Image Presets Wersquoll discuss Image Presets later but think of them as ldquorecipesrdquo for loading your image at a named size with specific amounts of sharpening and image quality
Zoom Preview You can also use the Zoom option to preview your image in one of many pre-built zoom presets which are based on different included zoom viewers
Learn more about Previewing Assets
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
4
Dynamic Media Classic is the hub around which customers create author and deliver rich media content Dynamic Media Classic is an integrated rich media management publishing and serving environment Rich media can be delivered to all marketing and sales channels including the web print material e-mail campaigns web applications desktops and devices
Image serving is perhaps the most used function of Dynamic Media Classic In fact most customers use Dynamic Media Classic to serve up all the images on their websites including images for zoom or rich media However it can also be used for many other purposes including delivery of video and use of AI to optimize images delivered
Core Capabilities of Dynamic Media ClassicIn this guide wersquoll discuss the following core capabilities of Dynamic Media Classic
bull Dynamic Imaging The umbrella term for real-time editing formatting and sizing and interactive zoom and pan color and texture swatching 360-degree spin image templates and multimedia viewers
bull Video Upload final videos publish them and progressively download them into configurable video viewers
bull Smart Imaging Technology that leverages Adobe Sensei AI capabilities and works with existing ldquoImage Presetsrdquo to enhance image delivery performance by automatically optimizing image format size and quality based on client browser capabilities
To discover additional capabilities of the solution visit the Documentation for Dynamic Media Classic
The Dynamic Media Classic User Interface (UI)The Dynamic Media Classic main UI consists of three major areas the Global Navigation bar Asset Library and Browse PanelBuild Panel
Overview of Dynamic Media ClassicChapter 1
Dynamic Media Classic UI
5
Note
Best Practice
Important
Global Navigation Bar Located at the top of your screen yoursquoll use the buttons on this bar to access key areas and capabilities of the solution For example yoursquoll use it to access upload capabilities open various asset building areas (image set spin set etc) perform important tasks such as setting up Image Presets and Viewer Presets and publish your assets From here you can also monitor your jobs see recent activities and choose from a variety of help options
Asset Library Located down the left side of your screen is the Asset Library a panel that you use to organize your assets in folders and subfolders that you create At the top of the panel yoursquoll find search and filters to help you locate assets Advanced Search allows you to search by specifying multiple options as criteria for your search including hidden metadata fields attached to that asset At the bottom of the panel you can see deleted items by clicking the Trash icon Initially you do not start with any folders except the top-level folder which has the same name as your account name
Assets in the Trash will automatically be deleted permanently seven days after they were put there unless you restore them
BrowseBuild Panel The is the center of the UI where yoursquoll either browse assets in Browse mode or if in Build mode yoursquoll use it as a canvas for building assets as part of a workflow When you first sign in yoursquoll see the Browse Panel In the center of the screen are thumbnail versions of your images in a Grid view You can change to a List view or select an asset and view details about it using the Detail view
Beside each Asset ID is the Mark for Publish switch When the toggle is on (green) that indicates that the asset is marked for publish
Select the Publish After Uploading checkbox in the Upload dialog to automatically publish assets upon upload
Learn more about Navigating the UI of Dynamic Media Classic
Ready to Publish Not Ready to Publish
6
The Dynamic Media Classic Main Workflow and Previewing AssetsChapter 2
Dynamic Media supports a Create (and Upload) Author (and Publish) and Deliver workflow process You start by uploading assets then doing something with those assets such as building an Image Set and finally publishing to make them live The Build step is optional for some workflows For example if your goal is to only do dynamic sizing and zoom on images or convert and publish video for streaming there are no necessary Build steps
The workflow in Dynamic Media Classic solutions consists of three main steps
1 Create (and Upload) Source Content
2 Author (and Publish) Assets
3 Deliver Assets
Step 1 Create (and Upload)
This is the beginning of the workflow In this step you gather or create the source content that fits into the workflow you are using and upload it into Dynamic Media Classic The system supports multiple file types for images video and fonts but also for PDF Adobe Illustrator and Adobe InDesign
See the complete list of Supported File Types
You can upload source content in several different ways
bull Directly from your desktop or local network Learn how
bull From a Dynamic Media Classic FTP server Learn how
7
Note
Best Practice
The default mode is From Desktop where you browse for files on your local network and start the upload
Do not manually add your folders Instead run an upload from FTP and use the Include Subfolders option to recreate your folder structure inside Dynamic Media Classic
The two most important upload options are enabled by default mdash Mark for Publish which wersquove discussed earlier and Overwrite Overwrite means that if the file being uploaded has the same name as a file already in the system the new file will replace the existing version If you uncheck this option the file might not be uploaded
Learn more about the Overwrite Images Option
Overwrite Options When Uploading ImagesThere are four variations of the Overwrite Image option that can be set for your entire company and they are often misunderstood In short either you set the rules such that you want assets that have the same name to be overwritten more frequently or you want overwrites to occur less frequently (in which case the new image will get renamed with a ldquo-1rdquo or ldquo-2rdquo extension)
bull Overwrite in current folder same base image nameextension This option is the strictest rule for replacement It requires that you upload the replacement image to the same folder as the original and that the replacement image has the same filename extension as the original If these requirements are not met a duplicate is created
bull Overwrite in current folder same base asset name regardless of extension Requires that you upload the replacement image to the same folder as the original however the filename extension can be different from the original For example chairtif replaces chairjpg
bull Overwrite in any folder same base asset nameextension Requires that the replacement image has the same filename extension as the original image (for example chairjpg must replace chairjpg not chairtif ) However you can upload the replacement image to a different folder than the original The updated image resides in the new folder the file can no longer be found in its original location
8
Concept
bull Overwrite in any folder same base asset name regardless of extension This option is the most inclusive replacement rule You can upload a replacement image to a different folder than the original upload a file with a different filename extension and replace the original file If the original file is in a different folder the replacement image resides in the new folder to which it was uploaded
Although not required while uploading using either of the two methods above you can specify Job Options specific for that upload mdash for example to schedule a recurring upload set cropping options upon upload and many others These can be valuable for some workflows so itrsquos worth considering if they can be for yours
Learn more about Job Options
Uploading is the first necessary step in any workflow because Dynamic Media Classic cannot work with any content that is not already in its system Behind the scenes during upload the system registers every uploaded asset with the centralized Dynamic Media Classic database assigns an ID and copies it to storage In addition the system converts image files to a format that allows dynamic resizing and zoom and converts video files to the MP4 web-friendly format
What happens to images when you upload them to Dynamic Media ClassicWhen you upload an image of any type to Dynamic Media Classic it is converted to a master image format called a Pyramid TIFF or P-TIFF A P-TIFF is similar to the format of a layered TIFF bitmap image except that instead of different layers the file contains multiple sizes (resolutions) of the same image
Conversion to P-TIFF on upload
1112 1418 116132etc
As the image is converted Dynamic Media Classic takes a ldquosnapshotrdquo of the full size of the image scales that by half and saves it scales it by half again and saves it and so on until it is filled with even multiples of the original size For example a 2000 pixel P-TIFF will have 1000 500 250 and 125 pixel sizes (and smaller) in the same file The P-TIFF file is the format of whatrsquos called a ldquomaster imagerdquo in Dynamic Media Classic
9
Best Practice
When you request a certain size image creating the P-TIFF allows the Image Server for Dynamic Media Classic to quickly find the next larger size and scale it down For example if you upload a 2000-pixel image and request a 100-pixel image Dynamic Media Classic will find the 125-pixel version and scale it down to 100 pixels rather than scaling from 2000 to 100 pixels This makes the operation very fast In addition when zooming on an image this enables the zoom viewer to only request a tile of the image being zoomed rather than the entire full resolution image This is how the master image format the P-TIFF file supports both dynamic sizing and zoom
Similarly you can upload your master source video to Dynamic Media Classic and on upload Dynamic Media Classic can automatically resize it and convert it to the MP4 web-friendly format
Rules of Thumb for Determining Optimal Size for the Images You UploadUpload images in the largest size you need
bull If you need to zoom upload a high resolution image of a range of 1500-2500 pixels in the longest dimension Consider how much detail you want to give the quality of your source images and the size of the product being shown For example upload a 1000-pixel image for a tiny ring but a 3000-pixel image for an entire room scene
bull If you donrsquot need to zoom then upload it at the exact size it will be seen For example if you have logos or splashbanner images to place on your pages upload them exactly at their 11 size and call them exactly at that size
Never upsample or blow up your images before uploading to Dynamic Media Classic For example donrsquot upsample a smaller image to make it a 2000 pixel image It wonrsquot look good Make your images as close to perfect as possible before upload
There is no minimum size for zoom but by default the viewers wonrsquot zoom beyond 100 If your image is too small it wonrsquot zoom at all or will only zoom a tiny amount to prevent it from looking bad
While therersquos no minimum for image size we donrsquot recommend uploading giant images A giant image can be considered 4000+ pixels Uploading images this size can show potential flaws like grains of dust or hairs in the image Such images will also take up more space on the Dynamic Media Classic server which can cause you to surpass your contracted storage limits
Learn more about Uploading Files
10
Important
Concept
Step 2 Author (and Publish)
After creating and uploading your content yoursquoll author new rich media assets from your uploaded assets by performing one or more sub-workflows This includes all the different types of set collections mdash Image Swatch Spin and Mixed Media sets as well as Templates It also includes video Wersquoll go into much greater detail about each type of image collection set and video rich media later However in almost all cases you start by selecting one or more assets (or have no assets selected) and choosing the type of asset you want to build For example you might select a main image and a few views of that image and choose to build an Image Set a collection of alternate views of the same product
Make sure that all your assets are marked for publish While by default all assets are automatically marked for publish on upload any newly authored assets from your uploaded content will need to be marked for publish as well
After yoursquove built your new asset you will run a publish job You can do that manually or schedule a publish job that runs automatically Publishing copies all content from the private Dynamic Media Classic sphere to the public publish server sphere of the equation The product of a Dynamic Media Publish job is a unique URL for each published asset
Understanding the Dynamic Media Classic URLThe final product of a Dynamic Media Classic workflow is a URL that points to the asset (whether image set or adaptive video set) These URLs are very predictable and follow the same pattern In the case of images each image is generated from the P-TIFF master image
Here is the syntax for the URL of an image with a couple of examples
In the URL everything to the left of the question mark is the virtual path to a specific image Everything to the right of the question mark is an Image Server modifier an instruction for how to process the image When you have multiple modifiers they are separated by ampersands
11
Best Practice
Concept
In the first example the virtual path to the image ldquoBackpack_Ardquo is The Image Server modifiers resize the image to a width of 250
pixels (from wid=250) and resamples the image using the Lanczos interpolation algorithm which sharpens as it resizes (from resMode=sharp2)
The second example applies whatrsquos known as an ldquoimage presetrdquo to the same Backpack_A image as indicated by $_template300$ The $ symbols on either side of the expression indicate that an image preset a packaged set of image modifiers is being applied to the image
Once you understand how Dynamic Media Classic URLs are put together then you understand how to change them programmatically and how to integrate them deeper into your site and backend systems
The server you publish to depends on the type of content and workflow For example all images go to the Image Server and streaming video to the FMS Server For convenience wersquoll speak of a ldquopublishrdquo as a single event to a single server
Publishing publishes all content marked for publish mdash not just your content A single administrator typically publishes on behalf of everyone rather than individual users running a publish The administrator can publish as needed or set up a recurring daily weekly or even every 10 minutes job that will publish automatically Publish on a schedule that makes sense for your business
Automate your publish jobs and schedule a Full Publish to run every day at 1200AM or any time late in the evening
Understanding the Caching DelayNewly uploaded and published assets will be seen right away whereas updated assets may be subject to the 10-hour caching delay By default all published assets have a minimum of 10 hours before they expire We say minimum because every time the image is viewed it starts a clock that will not expire until 10 hours have elapsed in which no one has viewed that image This 10ndashhour period is the ldquoTime to Liverdquo for an asset Once the cache expires for that asset the updated version can be delivered
This typically is not an issue unless a mistake occurred and the imageasset has the same name as the previously published version but there is a problem with the image For example you accidentally uploaded a low resolution version or your art director didnrsquot approve the image In this case you want to recall the original image and replace it with a new version using the same Asset ID
Learn how to Manually Clear the Cache for the URLs That Need to Be Updated
12
Important
Best Practice
To avoid issues with caching delay always work ahead mdash an evening a day two weeks etc Build in time for QAacceptance for internal parties to proof your work before releasing to the public Even working an evening before allows you to make changes and re-publish that evening By morning the 10 hours has elapsed and the cache updates with the correct image
Learn more about Creating a Publishing Job
Learn more about Publishing
Step 3 Deliver
Remember that the final product of a Dynamic Media Classic workflow is a URL that points to the asset The URL might point to an individual image an Image Set a Spin Set or some other Image Set collection or video You need to take that URL and do something with it such as edit your HTML so that the ltIMGgt tags point to the Dynamic Media Classic image instead of pointing to an image coming from your current site
In the Deliver step you must integrate those URLs into your web site mobile app email campaign or any other digital touchpoint on which you want to display the asset
Example of integrating the Dynamic Media Classic URL for an image into a website
The URL in red is the only element specific to Dynamic Media Classic
Your IT team or integration partner can take the lead on writing and changing code to integrate Dynamic Media Classic URLs into your site Adobe has a consulting team that can help in this effort either by providing technical creative or general guidance
For more complex solutions such as zoom viewers or viewers that combine zoom with alternate views typically the URL points to a viewer that is hosted by Dynamic Media Classic and also within that URL is a reference to an Asset ID
Example of a link (in red) that will open an Image Set in a viewer in a new pop-up window
You need to integrate the Dynamic Media Classic URLs into your website mobile app email and other digital touchpoints mdash Dynamic Media Classic canrsquot do that for you
13
Previewing Assets Yoursquoll probably want to preview the assets yoursquove uploaded or are creating or editing to make sure they appear as you want when your customers view them You can access the Preview window by clicking any Preview button either on the thumbnail of the asset at the top of the BrowseBuild Panel or by going to File gt Preview In a browser window it will preview whichever asset is currently in the panel whether that is an image video or built asset like an Image Set
Dynamic Size Preview (Image Presets) You can preview your images in multiple sizes using the Sizes preview This loads a list of your available Image Presets Wersquoll discuss Image Presets later but think of them as ldquorecipesrdquo for loading your image at a named size with specific amounts of sharpening and image quality
Zoom Preview You can also use the Zoom option to preview your image in one of many pre-built zoom presets which are based on different included zoom viewers
Learn more about Previewing Assets
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
5
Note
Best Practice
Important
Global Navigation Bar Located at the top of your screen yoursquoll use the buttons on this bar to access key areas and capabilities of the solution For example yoursquoll use it to access upload capabilities open various asset building areas (image set spin set etc) perform important tasks such as setting up Image Presets and Viewer Presets and publish your assets From here you can also monitor your jobs see recent activities and choose from a variety of help options
Asset Library Located down the left side of your screen is the Asset Library a panel that you use to organize your assets in folders and subfolders that you create At the top of the panel yoursquoll find search and filters to help you locate assets Advanced Search allows you to search by specifying multiple options as criteria for your search including hidden metadata fields attached to that asset At the bottom of the panel you can see deleted items by clicking the Trash icon Initially you do not start with any folders except the top-level folder which has the same name as your account name
Assets in the Trash will automatically be deleted permanently seven days after they were put there unless you restore them
BrowseBuild Panel The is the center of the UI where yoursquoll either browse assets in Browse mode or if in Build mode yoursquoll use it as a canvas for building assets as part of a workflow When you first sign in yoursquoll see the Browse Panel In the center of the screen are thumbnail versions of your images in a Grid view You can change to a List view or select an asset and view details about it using the Detail view
Beside each Asset ID is the Mark for Publish switch When the toggle is on (green) that indicates that the asset is marked for publish
Select the Publish After Uploading checkbox in the Upload dialog to automatically publish assets upon upload
Learn more about Navigating the UI of Dynamic Media Classic
Ready to Publish Not Ready to Publish
6
The Dynamic Media Classic Main Workflow and Previewing AssetsChapter 2
Dynamic Media supports a Create (and Upload) Author (and Publish) and Deliver workflow process You start by uploading assets then doing something with those assets such as building an Image Set and finally publishing to make them live The Build step is optional for some workflows For example if your goal is to only do dynamic sizing and zoom on images or convert and publish video for streaming there are no necessary Build steps
The workflow in Dynamic Media Classic solutions consists of three main steps
1 Create (and Upload) Source Content
2 Author (and Publish) Assets
3 Deliver Assets
Step 1 Create (and Upload)
This is the beginning of the workflow In this step you gather or create the source content that fits into the workflow you are using and upload it into Dynamic Media Classic The system supports multiple file types for images video and fonts but also for PDF Adobe Illustrator and Adobe InDesign
See the complete list of Supported File Types
You can upload source content in several different ways
bull Directly from your desktop or local network Learn how
bull From a Dynamic Media Classic FTP server Learn how
7
Note
Best Practice
The default mode is From Desktop where you browse for files on your local network and start the upload
Do not manually add your folders Instead run an upload from FTP and use the Include Subfolders option to recreate your folder structure inside Dynamic Media Classic
The two most important upload options are enabled by default mdash Mark for Publish which wersquove discussed earlier and Overwrite Overwrite means that if the file being uploaded has the same name as a file already in the system the new file will replace the existing version If you uncheck this option the file might not be uploaded
Learn more about the Overwrite Images Option
Overwrite Options When Uploading ImagesThere are four variations of the Overwrite Image option that can be set for your entire company and they are often misunderstood In short either you set the rules such that you want assets that have the same name to be overwritten more frequently or you want overwrites to occur less frequently (in which case the new image will get renamed with a ldquo-1rdquo or ldquo-2rdquo extension)
bull Overwrite in current folder same base image nameextension This option is the strictest rule for replacement It requires that you upload the replacement image to the same folder as the original and that the replacement image has the same filename extension as the original If these requirements are not met a duplicate is created
bull Overwrite in current folder same base asset name regardless of extension Requires that you upload the replacement image to the same folder as the original however the filename extension can be different from the original For example chairtif replaces chairjpg
bull Overwrite in any folder same base asset nameextension Requires that the replacement image has the same filename extension as the original image (for example chairjpg must replace chairjpg not chairtif ) However you can upload the replacement image to a different folder than the original The updated image resides in the new folder the file can no longer be found in its original location
8
Concept
bull Overwrite in any folder same base asset name regardless of extension This option is the most inclusive replacement rule You can upload a replacement image to a different folder than the original upload a file with a different filename extension and replace the original file If the original file is in a different folder the replacement image resides in the new folder to which it was uploaded
Although not required while uploading using either of the two methods above you can specify Job Options specific for that upload mdash for example to schedule a recurring upload set cropping options upon upload and many others These can be valuable for some workflows so itrsquos worth considering if they can be for yours
Learn more about Job Options
Uploading is the first necessary step in any workflow because Dynamic Media Classic cannot work with any content that is not already in its system Behind the scenes during upload the system registers every uploaded asset with the centralized Dynamic Media Classic database assigns an ID and copies it to storage In addition the system converts image files to a format that allows dynamic resizing and zoom and converts video files to the MP4 web-friendly format
What happens to images when you upload them to Dynamic Media ClassicWhen you upload an image of any type to Dynamic Media Classic it is converted to a master image format called a Pyramid TIFF or P-TIFF A P-TIFF is similar to the format of a layered TIFF bitmap image except that instead of different layers the file contains multiple sizes (resolutions) of the same image
Conversion to P-TIFF on upload
1112 1418 116132etc
As the image is converted Dynamic Media Classic takes a ldquosnapshotrdquo of the full size of the image scales that by half and saves it scales it by half again and saves it and so on until it is filled with even multiples of the original size For example a 2000 pixel P-TIFF will have 1000 500 250 and 125 pixel sizes (and smaller) in the same file The P-TIFF file is the format of whatrsquos called a ldquomaster imagerdquo in Dynamic Media Classic
9
Best Practice
When you request a certain size image creating the P-TIFF allows the Image Server for Dynamic Media Classic to quickly find the next larger size and scale it down For example if you upload a 2000-pixel image and request a 100-pixel image Dynamic Media Classic will find the 125-pixel version and scale it down to 100 pixels rather than scaling from 2000 to 100 pixels This makes the operation very fast In addition when zooming on an image this enables the zoom viewer to only request a tile of the image being zoomed rather than the entire full resolution image This is how the master image format the P-TIFF file supports both dynamic sizing and zoom
Similarly you can upload your master source video to Dynamic Media Classic and on upload Dynamic Media Classic can automatically resize it and convert it to the MP4 web-friendly format
Rules of Thumb for Determining Optimal Size for the Images You UploadUpload images in the largest size you need
bull If you need to zoom upload a high resolution image of a range of 1500-2500 pixels in the longest dimension Consider how much detail you want to give the quality of your source images and the size of the product being shown For example upload a 1000-pixel image for a tiny ring but a 3000-pixel image for an entire room scene
bull If you donrsquot need to zoom then upload it at the exact size it will be seen For example if you have logos or splashbanner images to place on your pages upload them exactly at their 11 size and call them exactly at that size
Never upsample or blow up your images before uploading to Dynamic Media Classic For example donrsquot upsample a smaller image to make it a 2000 pixel image It wonrsquot look good Make your images as close to perfect as possible before upload
There is no minimum size for zoom but by default the viewers wonrsquot zoom beyond 100 If your image is too small it wonrsquot zoom at all or will only zoom a tiny amount to prevent it from looking bad
While therersquos no minimum for image size we donrsquot recommend uploading giant images A giant image can be considered 4000+ pixels Uploading images this size can show potential flaws like grains of dust or hairs in the image Such images will also take up more space on the Dynamic Media Classic server which can cause you to surpass your contracted storage limits
Learn more about Uploading Files
10
Important
Concept
Step 2 Author (and Publish)
After creating and uploading your content yoursquoll author new rich media assets from your uploaded assets by performing one or more sub-workflows This includes all the different types of set collections mdash Image Swatch Spin and Mixed Media sets as well as Templates It also includes video Wersquoll go into much greater detail about each type of image collection set and video rich media later However in almost all cases you start by selecting one or more assets (or have no assets selected) and choosing the type of asset you want to build For example you might select a main image and a few views of that image and choose to build an Image Set a collection of alternate views of the same product
Make sure that all your assets are marked for publish While by default all assets are automatically marked for publish on upload any newly authored assets from your uploaded content will need to be marked for publish as well
After yoursquove built your new asset you will run a publish job You can do that manually or schedule a publish job that runs automatically Publishing copies all content from the private Dynamic Media Classic sphere to the public publish server sphere of the equation The product of a Dynamic Media Publish job is a unique URL for each published asset
Understanding the Dynamic Media Classic URLThe final product of a Dynamic Media Classic workflow is a URL that points to the asset (whether image set or adaptive video set) These URLs are very predictable and follow the same pattern In the case of images each image is generated from the P-TIFF master image
Here is the syntax for the URL of an image with a couple of examples
In the URL everything to the left of the question mark is the virtual path to a specific image Everything to the right of the question mark is an Image Server modifier an instruction for how to process the image When you have multiple modifiers they are separated by ampersands
11
Best Practice
Concept
In the first example the virtual path to the image ldquoBackpack_Ardquo is The Image Server modifiers resize the image to a width of 250
pixels (from wid=250) and resamples the image using the Lanczos interpolation algorithm which sharpens as it resizes (from resMode=sharp2)
The second example applies whatrsquos known as an ldquoimage presetrdquo to the same Backpack_A image as indicated by $_template300$ The $ symbols on either side of the expression indicate that an image preset a packaged set of image modifiers is being applied to the image
Once you understand how Dynamic Media Classic URLs are put together then you understand how to change them programmatically and how to integrate them deeper into your site and backend systems
The server you publish to depends on the type of content and workflow For example all images go to the Image Server and streaming video to the FMS Server For convenience wersquoll speak of a ldquopublishrdquo as a single event to a single server
Publishing publishes all content marked for publish mdash not just your content A single administrator typically publishes on behalf of everyone rather than individual users running a publish The administrator can publish as needed or set up a recurring daily weekly or even every 10 minutes job that will publish automatically Publish on a schedule that makes sense for your business
Automate your publish jobs and schedule a Full Publish to run every day at 1200AM or any time late in the evening
Understanding the Caching DelayNewly uploaded and published assets will be seen right away whereas updated assets may be subject to the 10-hour caching delay By default all published assets have a minimum of 10 hours before they expire We say minimum because every time the image is viewed it starts a clock that will not expire until 10 hours have elapsed in which no one has viewed that image This 10ndashhour period is the ldquoTime to Liverdquo for an asset Once the cache expires for that asset the updated version can be delivered
This typically is not an issue unless a mistake occurred and the imageasset has the same name as the previously published version but there is a problem with the image For example you accidentally uploaded a low resolution version or your art director didnrsquot approve the image In this case you want to recall the original image and replace it with a new version using the same Asset ID
Learn how to Manually Clear the Cache for the URLs That Need to Be Updated
12
Important
Best Practice
To avoid issues with caching delay always work ahead mdash an evening a day two weeks etc Build in time for QAacceptance for internal parties to proof your work before releasing to the public Even working an evening before allows you to make changes and re-publish that evening By morning the 10 hours has elapsed and the cache updates with the correct image
Learn more about Creating a Publishing Job
Learn more about Publishing
Step 3 Deliver
Remember that the final product of a Dynamic Media Classic workflow is a URL that points to the asset The URL might point to an individual image an Image Set a Spin Set or some other Image Set collection or video You need to take that URL and do something with it such as edit your HTML so that the ltIMGgt tags point to the Dynamic Media Classic image instead of pointing to an image coming from your current site
In the Deliver step you must integrate those URLs into your web site mobile app email campaign or any other digital touchpoint on which you want to display the asset
Example of integrating the Dynamic Media Classic URL for an image into a website
The URL in red is the only element specific to Dynamic Media Classic
Your IT team or integration partner can take the lead on writing and changing code to integrate Dynamic Media Classic URLs into your site Adobe has a consulting team that can help in this effort either by providing technical creative or general guidance
For more complex solutions such as zoom viewers or viewers that combine zoom with alternate views typically the URL points to a viewer that is hosted by Dynamic Media Classic and also within that URL is a reference to an Asset ID
Example of a link (in red) that will open an Image Set in a viewer in a new pop-up window
You need to integrate the Dynamic Media Classic URLs into your website mobile app email and other digital touchpoints mdash Dynamic Media Classic canrsquot do that for you
13
Previewing Assets Yoursquoll probably want to preview the assets yoursquove uploaded or are creating or editing to make sure they appear as you want when your customers view them You can access the Preview window by clicking any Preview button either on the thumbnail of the asset at the top of the BrowseBuild Panel or by going to File gt Preview In a browser window it will preview whichever asset is currently in the panel whether that is an image video or built asset like an Image Set
Dynamic Size Preview (Image Presets) You can preview your images in multiple sizes using the Sizes preview This loads a list of your available Image Presets Wersquoll discuss Image Presets later but think of them as ldquorecipesrdquo for loading your image at a named size with specific amounts of sharpening and image quality
Zoom Preview You can also use the Zoom option to preview your image in one of many pre-built zoom presets which are based on different included zoom viewers
Learn more about Previewing Assets
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
6
The Dynamic Media Classic Main Workflow and Previewing AssetsChapter 2
Dynamic Media supports a Create (and Upload) Author (and Publish) and Deliver workflow process You start by uploading assets then doing something with those assets such as building an Image Set and finally publishing to make them live The Build step is optional for some workflows For example if your goal is to only do dynamic sizing and zoom on images or convert and publish video for streaming there are no necessary Build steps
The workflow in Dynamic Media Classic solutions consists of three main steps
1 Create (and Upload) Source Content
2 Author (and Publish) Assets
3 Deliver Assets
Step 1 Create (and Upload)
This is the beginning of the workflow In this step you gather or create the source content that fits into the workflow you are using and upload it into Dynamic Media Classic The system supports multiple file types for images video and fonts but also for PDF Adobe Illustrator and Adobe InDesign
See the complete list of Supported File Types
You can upload source content in several different ways
bull Directly from your desktop or local network Learn how
bull From a Dynamic Media Classic FTP server Learn how
7
Note
Best Practice
The default mode is From Desktop where you browse for files on your local network and start the upload
Do not manually add your folders Instead run an upload from FTP and use the Include Subfolders option to recreate your folder structure inside Dynamic Media Classic
The two most important upload options are enabled by default mdash Mark for Publish which wersquove discussed earlier and Overwrite Overwrite means that if the file being uploaded has the same name as a file already in the system the new file will replace the existing version If you uncheck this option the file might not be uploaded
Learn more about the Overwrite Images Option
Overwrite Options When Uploading ImagesThere are four variations of the Overwrite Image option that can be set for your entire company and they are often misunderstood In short either you set the rules such that you want assets that have the same name to be overwritten more frequently or you want overwrites to occur less frequently (in which case the new image will get renamed with a ldquo-1rdquo or ldquo-2rdquo extension)
bull Overwrite in current folder same base image nameextension This option is the strictest rule for replacement It requires that you upload the replacement image to the same folder as the original and that the replacement image has the same filename extension as the original If these requirements are not met a duplicate is created
bull Overwrite in current folder same base asset name regardless of extension Requires that you upload the replacement image to the same folder as the original however the filename extension can be different from the original For example chairtif replaces chairjpg
bull Overwrite in any folder same base asset nameextension Requires that the replacement image has the same filename extension as the original image (for example chairjpg must replace chairjpg not chairtif ) However you can upload the replacement image to a different folder than the original The updated image resides in the new folder the file can no longer be found in its original location
8
Concept
bull Overwrite in any folder same base asset name regardless of extension This option is the most inclusive replacement rule You can upload a replacement image to a different folder than the original upload a file with a different filename extension and replace the original file If the original file is in a different folder the replacement image resides in the new folder to which it was uploaded
Although not required while uploading using either of the two methods above you can specify Job Options specific for that upload mdash for example to schedule a recurring upload set cropping options upon upload and many others These can be valuable for some workflows so itrsquos worth considering if they can be for yours
Learn more about Job Options
Uploading is the first necessary step in any workflow because Dynamic Media Classic cannot work with any content that is not already in its system Behind the scenes during upload the system registers every uploaded asset with the centralized Dynamic Media Classic database assigns an ID and copies it to storage In addition the system converts image files to a format that allows dynamic resizing and zoom and converts video files to the MP4 web-friendly format
What happens to images when you upload them to Dynamic Media ClassicWhen you upload an image of any type to Dynamic Media Classic it is converted to a master image format called a Pyramid TIFF or P-TIFF A P-TIFF is similar to the format of a layered TIFF bitmap image except that instead of different layers the file contains multiple sizes (resolutions) of the same image
Conversion to P-TIFF on upload
1112 1418 116132etc
As the image is converted Dynamic Media Classic takes a ldquosnapshotrdquo of the full size of the image scales that by half and saves it scales it by half again and saves it and so on until it is filled with even multiples of the original size For example a 2000 pixel P-TIFF will have 1000 500 250 and 125 pixel sizes (and smaller) in the same file The P-TIFF file is the format of whatrsquos called a ldquomaster imagerdquo in Dynamic Media Classic
9
Best Practice
When you request a certain size image creating the P-TIFF allows the Image Server for Dynamic Media Classic to quickly find the next larger size and scale it down For example if you upload a 2000-pixel image and request a 100-pixel image Dynamic Media Classic will find the 125-pixel version and scale it down to 100 pixels rather than scaling from 2000 to 100 pixels This makes the operation very fast In addition when zooming on an image this enables the zoom viewer to only request a tile of the image being zoomed rather than the entire full resolution image This is how the master image format the P-TIFF file supports both dynamic sizing and zoom
Similarly you can upload your master source video to Dynamic Media Classic and on upload Dynamic Media Classic can automatically resize it and convert it to the MP4 web-friendly format
Rules of Thumb for Determining Optimal Size for the Images You UploadUpload images in the largest size you need
bull If you need to zoom upload a high resolution image of a range of 1500-2500 pixels in the longest dimension Consider how much detail you want to give the quality of your source images and the size of the product being shown For example upload a 1000-pixel image for a tiny ring but a 3000-pixel image for an entire room scene
bull If you donrsquot need to zoom then upload it at the exact size it will be seen For example if you have logos or splashbanner images to place on your pages upload them exactly at their 11 size and call them exactly at that size
Never upsample or blow up your images before uploading to Dynamic Media Classic For example donrsquot upsample a smaller image to make it a 2000 pixel image It wonrsquot look good Make your images as close to perfect as possible before upload
There is no minimum size for zoom but by default the viewers wonrsquot zoom beyond 100 If your image is too small it wonrsquot zoom at all or will only zoom a tiny amount to prevent it from looking bad
While therersquos no minimum for image size we donrsquot recommend uploading giant images A giant image can be considered 4000+ pixels Uploading images this size can show potential flaws like grains of dust or hairs in the image Such images will also take up more space on the Dynamic Media Classic server which can cause you to surpass your contracted storage limits
Learn more about Uploading Files
10
Important
Concept
Step 2 Author (and Publish)
After creating and uploading your content yoursquoll author new rich media assets from your uploaded assets by performing one or more sub-workflows This includes all the different types of set collections mdash Image Swatch Spin and Mixed Media sets as well as Templates It also includes video Wersquoll go into much greater detail about each type of image collection set and video rich media later However in almost all cases you start by selecting one or more assets (or have no assets selected) and choosing the type of asset you want to build For example you might select a main image and a few views of that image and choose to build an Image Set a collection of alternate views of the same product
Make sure that all your assets are marked for publish While by default all assets are automatically marked for publish on upload any newly authored assets from your uploaded content will need to be marked for publish as well
After yoursquove built your new asset you will run a publish job You can do that manually or schedule a publish job that runs automatically Publishing copies all content from the private Dynamic Media Classic sphere to the public publish server sphere of the equation The product of a Dynamic Media Publish job is a unique URL for each published asset
Understanding the Dynamic Media Classic URLThe final product of a Dynamic Media Classic workflow is a URL that points to the asset (whether image set or adaptive video set) These URLs are very predictable and follow the same pattern In the case of images each image is generated from the P-TIFF master image
Here is the syntax for the URL of an image with a couple of examples
In the URL everything to the left of the question mark is the virtual path to a specific image Everything to the right of the question mark is an Image Server modifier an instruction for how to process the image When you have multiple modifiers they are separated by ampersands
11
Best Practice
Concept
In the first example the virtual path to the image ldquoBackpack_Ardquo is The Image Server modifiers resize the image to a width of 250
pixels (from wid=250) and resamples the image using the Lanczos interpolation algorithm which sharpens as it resizes (from resMode=sharp2)
The second example applies whatrsquos known as an ldquoimage presetrdquo to the same Backpack_A image as indicated by $_template300$ The $ symbols on either side of the expression indicate that an image preset a packaged set of image modifiers is being applied to the image
Once you understand how Dynamic Media Classic URLs are put together then you understand how to change them programmatically and how to integrate them deeper into your site and backend systems
The server you publish to depends on the type of content and workflow For example all images go to the Image Server and streaming video to the FMS Server For convenience wersquoll speak of a ldquopublishrdquo as a single event to a single server
Publishing publishes all content marked for publish mdash not just your content A single administrator typically publishes on behalf of everyone rather than individual users running a publish The administrator can publish as needed or set up a recurring daily weekly or even every 10 minutes job that will publish automatically Publish on a schedule that makes sense for your business
Automate your publish jobs and schedule a Full Publish to run every day at 1200AM or any time late in the evening
Understanding the Caching DelayNewly uploaded and published assets will be seen right away whereas updated assets may be subject to the 10-hour caching delay By default all published assets have a minimum of 10 hours before they expire We say minimum because every time the image is viewed it starts a clock that will not expire until 10 hours have elapsed in which no one has viewed that image This 10ndashhour period is the ldquoTime to Liverdquo for an asset Once the cache expires for that asset the updated version can be delivered
This typically is not an issue unless a mistake occurred and the imageasset has the same name as the previously published version but there is a problem with the image For example you accidentally uploaded a low resolution version or your art director didnrsquot approve the image In this case you want to recall the original image and replace it with a new version using the same Asset ID
Learn how to Manually Clear the Cache for the URLs That Need to Be Updated
12
Important
Best Practice
To avoid issues with caching delay always work ahead mdash an evening a day two weeks etc Build in time for QAacceptance for internal parties to proof your work before releasing to the public Even working an evening before allows you to make changes and re-publish that evening By morning the 10 hours has elapsed and the cache updates with the correct image
Learn more about Creating a Publishing Job
Learn more about Publishing
Step 3 Deliver
Remember that the final product of a Dynamic Media Classic workflow is a URL that points to the asset The URL might point to an individual image an Image Set a Spin Set or some other Image Set collection or video You need to take that URL and do something with it such as edit your HTML so that the ltIMGgt tags point to the Dynamic Media Classic image instead of pointing to an image coming from your current site
In the Deliver step you must integrate those URLs into your web site mobile app email campaign or any other digital touchpoint on which you want to display the asset
Example of integrating the Dynamic Media Classic URL for an image into a website
The URL in red is the only element specific to Dynamic Media Classic
Your IT team or integration partner can take the lead on writing and changing code to integrate Dynamic Media Classic URLs into your site Adobe has a consulting team that can help in this effort either by providing technical creative or general guidance
For more complex solutions such as zoom viewers or viewers that combine zoom with alternate views typically the URL points to a viewer that is hosted by Dynamic Media Classic and also within that URL is a reference to an Asset ID
Example of a link (in red) that will open an Image Set in a viewer in a new pop-up window
You need to integrate the Dynamic Media Classic URLs into your website mobile app email and other digital touchpoints mdash Dynamic Media Classic canrsquot do that for you
13
Previewing Assets Yoursquoll probably want to preview the assets yoursquove uploaded or are creating or editing to make sure they appear as you want when your customers view them You can access the Preview window by clicking any Preview button either on the thumbnail of the asset at the top of the BrowseBuild Panel or by going to File gt Preview In a browser window it will preview whichever asset is currently in the panel whether that is an image video or built asset like an Image Set
Dynamic Size Preview (Image Presets) You can preview your images in multiple sizes using the Sizes preview This loads a list of your available Image Presets Wersquoll discuss Image Presets later but think of them as ldquorecipesrdquo for loading your image at a named size with specific amounts of sharpening and image quality
Zoom Preview You can also use the Zoom option to preview your image in one of many pre-built zoom presets which are based on different included zoom viewers
Learn more about Previewing Assets
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
7
Note
Best Practice
The default mode is From Desktop where you browse for files on your local network and start the upload
Do not manually add your folders Instead run an upload from FTP and use the Include Subfolders option to recreate your folder structure inside Dynamic Media Classic
The two most important upload options are enabled by default mdash Mark for Publish which wersquove discussed earlier and Overwrite Overwrite means that if the file being uploaded has the same name as a file already in the system the new file will replace the existing version If you uncheck this option the file might not be uploaded
Learn more about the Overwrite Images Option
Overwrite Options When Uploading ImagesThere are four variations of the Overwrite Image option that can be set for your entire company and they are often misunderstood In short either you set the rules such that you want assets that have the same name to be overwritten more frequently or you want overwrites to occur less frequently (in which case the new image will get renamed with a ldquo-1rdquo or ldquo-2rdquo extension)
bull Overwrite in current folder same base image nameextension This option is the strictest rule for replacement It requires that you upload the replacement image to the same folder as the original and that the replacement image has the same filename extension as the original If these requirements are not met a duplicate is created
bull Overwrite in current folder same base asset name regardless of extension Requires that you upload the replacement image to the same folder as the original however the filename extension can be different from the original For example chairtif replaces chairjpg
bull Overwrite in any folder same base asset nameextension Requires that the replacement image has the same filename extension as the original image (for example chairjpg must replace chairjpg not chairtif ) However you can upload the replacement image to a different folder than the original The updated image resides in the new folder the file can no longer be found in its original location
8
Concept
bull Overwrite in any folder same base asset name regardless of extension This option is the most inclusive replacement rule You can upload a replacement image to a different folder than the original upload a file with a different filename extension and replace the original file If the original file is in a different folder the replacement image resides in the new folder to which it was uploaded
Although not required while uploading using either of the two methods above you can specify Job Options specific for that upload mdash for example to schedule a recurring upload set cropping options upon upload and many others These can be valuable for some workflows so itrsquos worth considering if they can be for yours
Learn more about Job Options
Uploading is the first necessary step in any workflow because Dynamic Media Classic cannot work with any content that is not already in its system Behind the scenes during upload the system registers every uploaded asset with the centralized Dynamic Media Classic database assigns an ID and copies it to storage In addition the system converts image files to a format that allows dynamic resizing and zoom and converts video files to the MP4 web-friendly format
What happens to images when you upload them to Dynamic Media ClassicWhen you upload an image of any type to Dynamic Media Classic it is converted to a master image format called a Pyramid TIFF or P-TIFF A P-TIFF is similar to the format of a layered TIFF bitmap image except that instead of different layers the file contains multiple sizes (resolutions) of the same image
Conversion to P-TIFF on upload
1112 1418 116132etc
As the image is converted Dynamic Media Classic takes a ldquosnapshotrdquo of the full size of the image scales that by half and saves it scales it by half again and saves it and so on until it is filled with even multiples of the original size For example a 2000 pixel P-TIFF will have 1000 500 250 and 125 pixel sizes (and smaller) in the same file The P-TIFF file is the format of whatrsquos called a ldquomaster imagerdquo in Dynamic Media Classic
9
Best Practice
When you request a certain size image creating the P-TIFF allows the Image Server for Dynamic Media Classic to quickly find the next larger size and scale it down For example if you upload a 2000-pixel image and request a 100-pixel image Dynamic Media Classic will find the 125-pixel version and scale it down to 100 pixels rather than scaling from 2000 to 100 pixels This makes the operation very fast In addition when zooming on an image this enables the zoom viewer to only request a tile of the image being zoomed rather than the entire full resolution image This is how the master image format the P-TIFF file supports both dynamic sizing and zoom
Similarly you can upload your master source video to Dynamic Media Classic and on upload Dynamic Media Classic can automatically resize it and convert it to the MP4 web-friendly format
Rules of Thumb for Determining Optimal Size for the Images You UploadUpload images in the largest size you need
bull If you need to zoom upload a high resolution image of a range of 1500-2500 pixels in the longest dimension Consider how much detail you want to give the quality of your source images and the size of the product being shown For example upload a 1000-pixel image for a tiny ring but a 3000-pixel image for an entire room scene
bull If you donrsquot need to zoom then upload it at the exact size it will be seen For example if you have logos or splashbanner images to place on your pages upload them exactly at their 11 size and call them exactly at that size
Never upsample or blow up your images before uploading to Dynamic Media Classic For example donrsquot upsample a smaller image to make it a 2000 pixel image It wonrsquot look good Make your images as close to perfect as possible before upload
There is no minimum size for zoom but by default the viewers wonrsquot zoom beyond 100 If your image is too small it wonrsquot zoom at all or will only zoom a tiny amount to prevent it from looking bad
While therersquos no minimum for image size we donrsquot recommend uploading giant images A giant image can be considered 4000+ pixels Uploading images this size can show potential flaws like grains of dust or hairs in the image Such images will also take up more space on the Dynamic Media Classic server which can cause you to surpass your contracted storage limits
Learn more about Uploading Files
10
Important
Concept
Step 2 Author (and Publish)
After creating and uploading your content yoursquoll author new rich media assets from your uploaded assets by performing one or more sub-workflows This includes all the different types of set collections mdash Image Swatch Spin and Mixed Media sets as well as Templates It also includes video Wersquoll go into much greater detail about each type of image collection set and video rich media later However in almost all cases you start by selecting one or more assets (or have no assets selected) and choosing the type of asset you want to build For example you might select a main image and a few views of that image and choose to build an Image Set a collection of alternate views of the same product
Make sure that all your assets are marked for publish While by default all assets are automatically marked for publish on upload any newly authored assets from your uploaded content will need to be marked for publish as well
After yoursquove built your new asset you will run a publish job You can do that manually or schedule a publish job that runs automatically Publishing copies all content from the private Dynamic Media Classic sphere to the public publish server sphere of the equation The product of a Dynamic Media Publish job is a unique URL for each published asset
Understanding the Dynamic Media Classic URLThe final product of a Dynamic Media Classic workflow is a URL that points to the asset (whether image set or adaptive video set) These URLs are very predictable and follow the same pattern In the case of images each image is generated from the P-TIFF master image
Here is the syntax for the URL of an image with a couple of examples
In the URL everything to the left of the question mark is the virtual path to a specific image Everything to the right of the question mark is an Image Server modifier an instruction for how to process the image When you have multiple modifiers they are separated by ampersands
11
Best Practice
Concept
In the first example the virtual path to the image ldquoBackpack_Ardquo is The Image Server modifiers resize the image to a width of 250
pixels (from wid=250) and resamples the image using the Lanczos interpolation algorithm which sharpens as it resizes (from resMode=sharp2)
The second example applies whatrsquos known as an ldquoimage presetrdquo to the same Backpack_A image as indicated by $_template300$ The $ symbols on either side of the expression indicate that an image preset a packaged set of image modifiers is being applied to the image
Once you understand how Dynamic Media Classic URLs are put together then you understand how to change them programmatically and how to integrate them deeper into your site and backend systems
The server you publish to depends on the type of content and workflow For example all images go to the Image Server and streaming video to the FMS Server For convenience wersquoll speak of a ldquopublishrdquo as a single event to a single server
Publishing publishes all content marked for publish mdash not just your content A single administrator typically publishes on behalf of everyone rather than individual users running a publish The administrator can publish as needed or set up a recurring daily weekly or even every 10 minutes job that will publish automatically Publish on a schedule that makes sense for your business
Automate your publish jobs and schedule a Full Publish to run every day at 1200AM or any time late in the evening
Understanding the Caching DelayNewly uploaded and published assets will be seen right away whereas updated assets may be subject to the 10-hour caching delay By default all published assets have a minimum of 10 hours before they expire We say minimum because every time the image is viewed it starts a clock that will not expire until 10 hours have elapsed in which no one has viewed that image This 10ndashhour period is the ldquoTime to Liverdquo for an asset Once the cache expires for that asset the updated version can be delivered
This typically is not an issue unless a mistake occurred and the imageasset has the same name as the previously published version but there is a problem with the image For example you accidentally uploaded a low resolution version or your art director didnrsquot approve the image In this case you want to recall the original image and replace it with a new version using the same Asset ID
Learn how to Manually Clear the Cache for the URLs That Need to Be Updated
12
Important
Best Practice
To avoid issues with caching delay always work ahead mdash an evening a day two weeks etc Build in time for QAacceptance for internal parties to proof your work before releasing to the public Even working an evening before allows you to make changes and re-publish that evening By morning the 10 hours has elapsed and the cache updates with the correct image
Learn more about Creating a Publishing Job
Learn more about Publishing
Step 3 Deliver
Remember that the final product of a Dynamic Media Classic workflow is a URL that points to the asset The URL might point to an individual image an Image Set a Spin Set or some other Image Set collection or video You need to take that URL and do something with it such as edit your HTML so that the ltIMGgt tags point to the Dynamic Media Classic image instead of pointing to an image coming from your current site
In the Deliver step you must integrate those URLs into your web site mobile app email campaign or any other digital touchpoint on which you want to display the asset
Example of integrating the Dynamic Media Classic URL for an image into a website
The URL in red is the only element specific to Dynamic Media Classic
Your IT team or integration partner can take the lead on writing and changing code to integrate Dynamic Media Classic URLs into your site Adobe has a consulting team that can help in this effort either by providing technical creative or general guidance
For more complex solutions such as zoom viewers or viewers that combine zoom with alternate views typically the URL points to a viewer that is hosted by Dynamic Media Classic and also within that URL is a reference to an Asset ID
Example of a link (in red) that will open an Image Set in a viewer in a new pop-up window
You need to integrate the Dynamic Media Classic URLs into your website mobile app email and other digital touchpoints mdash Dynamic Media Classic canrsquot do that for you
13
Previewing Assets Yoursquoll probably want to preview the assets yoursquove uploaded or are creating or editing to make sure they appear as you want when your customers view them You can access the Preview window by clicking any Preview button either on the thumbnail of the asset at the top of the BrowseBuild Panel or by going to File gt Preview In a browser window it will preview whichever asset is currently in the panel whether that is an image video or built asset like an Image Set
Dynamic Size Preview (Image Presets) You can preview your images in multiple sizes using the Sizes preview This loads a list of your available Image Presets Wersquoll discuss Image Presets later but think of them as ldquorecipesrdquo for loading your image at a named size with specific amounts of sharpening and image quality
Zoom Preview You can also use the Zoom option to preview your image in one of many pre-built zoom presets which are based on different included zoom viewers
Learn more about Previewing Assets
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
8
Concept
bull Overwrite in any folder same base asset name regardless of extension This option is the most inclusive replacement rule You can upload a replacement image to a different folder than the original upload a file with a different filename extension and replace the original file If the original file is in a different folder the replacement image resides in the new folder to which it was uploaded
Although not required while uploading using either of the two methods above you can specify Job Options specific for that upload mdash for example to schedule a recurring upload set cropping options upon upload and many others These can be valuable for some workflows so itrsquos worth considering if they can be for yours
Learn more about Job Options
Uploading is the first necessary step in any workflow because Dynamic Media Classic cannot work with any content that is not already in its system Behind the scenes during upload the system registers every uploaded asset with the centralized Dynamic Media Classic database assigns an ID and copies it to storage In addition the system converts image files to a format that allows dynamic resizing and zoom and converts video files to the MP4 web-friendly format
What happens to images when you upload them to Dynamic Media ClassicWhen you upload an image of any type to Dynamic Media Classic it is converted to a master image format called a Pyramid TIFF or P-TIFF A P-TIFF is similar to the format of a layered TIFF bitmap image except that instead of different layers the file contains multiple sizes (resolutions) of the same image
Conversion to P-TIFF on upload
1112 1418 116132etc
As the image is converted Dynamic Media Classic takes a ldquosnapshotrdquo of the full size of the image scales that by half and saves it scales it by half again and saves it and so on until it is filled with even multiples of the original size For example a 2000 pixel P-TIFF will have 1000 500 250 and 125 pixel sizes (and smaller) in the same file The P-TIFF file is the format of whatrsquos called a ldquomaster imagerdquo in Dynamic Media Classic
9
Best Practice
When you request a certain size image creating the P-TIFF allows the Image Server for Dynamic Media Classic to quickly find the next larger size and scale it down For example if you upload a 2000-pixel image and request a 100-pixel image Dynamic Media Classic will find the 125-pixel version and scale it down to 100 pixels rather than scaling from 2000 to 100 pixels This makes the operation very fast In addition when zooming on an image this enables the zoom viewer to only request a tile of the image being zoomed rather than the entire full resolution image This is how the master image format the P-TIFF file supports both dynamic sizing and zoom
Similarly you can upload your master source video to Dynamic Media Classic and on upload Dynamic Media Classic can automatically resize it and convert it to the MP4 web-friendly format
Rules of Thumb for Determining Optimal Size for the Images You UploadUpload images in the largest size you need
bull If you need to zoom upload a high resolution image of a range of 1500-2500 pixels in the longest dimension Consider how much detail you want to give the quality of your source images and the size of the product being shown For example upload a 1000-pixel image for a tiny ring but a 3000-pixel image for an entire room scene
bull If you donrsquot need to zoom then upload it at the exact size it will be seen For example if you have logos or splashbanner images to place on your pages upload them exactly at their 11 size and call them exactly at that size
Never upsample or blow up your images before uploading to Dynamic Media Classic For example donrsquot upsample a smaller image to make it a 2000 pixel image It wonrsquot look good Make your images as close to perfect as possible before upload
There is no minimum size for zoom but by default the viewers wonrsquot zoom beyond 100 If your image is too small it wonrsquot zoom at all or will only zoom a tiny amount to prevent it from looking bad
While therersquos no minimum for image size we donrsquot recommend uploading giant images A giant image can be considered 4000+ pixels Uploading images this size can show potential flaws like grains of dust or hairs in the image Such images will also take up more space on the Dynamic Media Classic server which can cause you to surpass your contracted storage limits
Learn more about Uploading Files
10
Important
Concept
Step 2 Author (and Publish)
After creating and uploading your content yoursquoll author new rich media assets from your uploaded assets by performing one or more sub-workflows This includes all the different types of set collections mdash Image Swatch Spin and Mixed Media sets as well as Templates It also includes video Wersquoll go into much greater detail about each type of image collection set and video rich media later However in almost all cases you start by selecting one or more assets (or have no assets selected) and choosing the type of asset you want to build For example you might select a main image and a few views of that image and choose to build an Image Set a collection of alternate views of the same product
Make sure that all your assets are marked for publish While by default all assets are automatically marked for publish on upload any newly authored assets from your uploaded content will need to be marked for publish as well
After yoursquove built your new asset you will run a publish job You can do that manually or schedule a publish job that runs automatically Publishing copies all content from the private Dynamic Media Classic sphere to the public publish server sphere of the equation The product of a Dynamic Media Publish job is a unique URL for each published asset
Understanding the Dynamic Media Classic URLThe final product of a Dynamic Media Classic workflow is a URL that points to the asset (whether image set or adaptive video set) These URLs are very predictable and follow the same pattern In the case of images each image is generated from the P-TIFF master image
Here is the syntax for the URL of an image with a couple of examples
In the URL everything to the left of the question mark is the virtual path to a specific image Everything to the right of the question mark is an Image Server modifier an instruction for how to process the image When you have multiple modifiers they are separated by ampersands
11
Best Practice
Concept
In the first example the virtual path to the image ldquoBackpack_Ardquo is The Image Server modifiers resize the image to a width of 250
pixels (from wid=250) and resamples the image using the Lanczos interpolation algorithm which sharpens as it resizes (from resMode=sharp2)
The second example applies whatrsquos known as an ldquoimage presetrdquo to the same Backpack_A image as indicated by $_template300$ The $ symbols on either side of the expression indicate that an image preset a packaged set of image modifiers is being applied to the image
Once you understand how Dynamic Media Classic URLs are put together then you understand how to change them programmatically and how to integrate them deeper into your site and backend systems
The server you publish to depends on the type of content and workflow For example all images go to the Image Server and streaming video to the FMS Server For convenience wersquoll speak of a ldquopublishrdquo as a single event to a single server
Publishing publishes all content marked for publish mdash not just your content A single administrator typically publishes on behalf of everyone rather than individual users running a publish The administrator can publish as needed or set up a recurring daily weekly or even every 10 minutes job that will publish automatically Publish on a schedule that makes sense for your business
Automate your publish jobs and schedule a Full Publish to run every day at 1200AM or any time late in the evening
Understanding the Caching DelayNewly uploaded and published assets will be seen right away whereas updated assets may be subject to the 10-hour caching delay By default all published assets have a minimum of 10 hours before they expire We say minimum because every time the image is viewed it starts a clock that will not expire until 10 hours have elapsed in which no one has viewed that image This 10ndashhour period is the ldquoTime to Liverdquo for an asset Once the cache expires for that asset the updated version can be delivered
This typically is not an issue unless a mistake occurred and the imageasset has the same name as the previously published version but there is a problem with the image For example you accidentally uploaded a low resolution version or your art director didnrsquot approve the image In this case you want to recall the original image and replace it with a new version using the same Asset ID
Learn how to Manually Clear the Cache for the URLs That Need to Be Updated
12
Important
Best Practice
To avoid issues with caching delay always work ahead mdash an evening a day two weeks etc Build in time for QAacceptance for internal parties to proof your work before releasing to the public Even working an evening before allows you to make changes and re-publish that evening By morning the 10 hours has elapsed and the cache updates with the correct image
Learn more about Creating a Publishing Job
Learn more about Publishing
Step 3 Deliver
Remember that the final product of a Dynamic Media Classic workflow is a URL that points to the asset The URL might point to an individual image an Image Set a Spin Set or some other Image Set collection or video You need to take that URL and do something with it such as edit your HTML so that the ltIMGgt tags point to the Dynamic Media Classic image instead of pointing to an image coming from your current site
In the Deliver step you must integrate those URLs into your web site mobile app email campaign or any other digital touchpoint on which you want to display the asset
Example of integrating the Dynamic Media Classic URL for an image into a website
The URL in red is the only element specific to Dynamic Media Classic
Your IT team or integration partner can take the lead on writing and changing code to integrate Dynamic Media Classic URLs into your site Adobe has a consulting team that can help in this effort either by providing technical creative or general guidance
For more complex solutions such as zoom viewers or viewers that combine zoom with alternate views typically the URL points to a viewer that is hosted by Dynamic Media Classic and also within that URL is a reference to an Asset ID
Example of a link (in red) that will open an Image Set in a viewer in a new pop-up window
You need to integrate the Dynamic Media Classic URLs into your website mobile app email and other digital touchpoints mdash Dynamic Media Classic canrsquot do that for you
13
Previewing Assets Yoursquoll probably want to preview the assets yoursquove uploaded or are creating or editing to make sure they appear as you want when your customers view them You can access the Preview window by clicking any Preview button either on the thumbnail of the asset at the top of the BrowseBuild Panel or by going to File gt Preview In a browser window it will preview whichever asset is currently in the panel whether that is an image video or built asset like an Image Set
Dynamic Size Preview (Image Presets) You can preview your images in multiple sizes using the Sizes preview This loads a list of your available Image Presets Wersquoll discuss Image Presets later but think of them as ldquorecipesrdquo for loading your image at a named size with specific amounts of sharpening and image quality
Zoom Preview You can also use the Zoom option to preview your image in one of many pre-built zoom presets which are based on different included zoom viewers
Learn more about Previewing Assets
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
9
Best Practice
When you request a certain size image creating the P-TIFF allows the Image Server for Dynamic Media Classic to quickly find the next larger size and scale it down For example if you upload a 2000-pixel image and request a 100-pixel image Dynamic Media Classic will find the 125-pixel version and scale it down to 100 pixels rather than scaling from 2000 to 100 pixels This makes the operation very fast In addition when zooming on an image this enables the zoom viewer to only request a tile of the image being zoomed rather than the entire full resolution image This is how the master image format the P-TIFF file supports both dynamic sizing and zoom
Similarly you can upload your master source video to Dynamic Media Classic and on upload Dynamic Media Classic can automatically resize it and convert it to the MP4 web-friendly format
Rules of Thumb for Determining Optimal Size for the Images You UploadUpload images in the largest size you need
bull If you need to zoom upload a high resolution image of a range of 1500-2500 pixels in the longest dimension Consider how much detail you want to give the quality of your source images and the size of the product being shown For example upload a 1000-pixel image for a tiny ring but a 3000-pixel image for an entire room scene
bull If you donrsquot need to zoom then upload it at the exact size it will be seen For example if you have logos or splashbanner images to place on your pages upload them exactly at their 11 size and call them exactly at that size
Never upsample or blow up your images before uploading to Dynamic Media Classic For example donrsquot upsample a smaller image to make it a 2000 pixel image It wonrsquot look good Make your images as close to perfect as possible before upload
There is no minimum size for zoom but by default the viewers wonrsquot zoom beyond 100 If your image is too small it wonrsquot zoom at all or will only zoom a tiny amount to prevent it from looking bad
While therersquos no minimum for image size we donrsquot recommend uploading giant images A giant image can be considered 4000+ pixels Uploading images this size can show potential flaws like grains of dust or hairs in the image Such images will also take up more space on the Dynamic Media Classic server which can cause you to surpass your contracted storage limits
Learn more about Uploading Files
10
Important
Concept
Step 2 Author (and Publish)
After creating and uploading your content yoursquoll author new rich media assets from your uploaded assets by performing one or more sub-workflows This includes all the different types of set collections mdash Image Swatch Spin and Mixed Media sets as well as Templates It also includes video Wersquoll go into much greater detail about each type of image collection set and video rich media later However in almost all cases you start by selecting one or more assets (or have no assets selected) and choosing the type of asset you want to build For example you might select a main image and a few views of that image and choose to build an Image Set a collection of alternate views of the same product
Make sure that all your assets are marked for publish While by default all assets are automatically marked for publish on upload any newly authored assets from your uploaded content will need to be marked for publish as well
After yoursquove built your new asset you will run a publish job You can do that manually or schedule a publish job that runs automatically Publishing copies all content from the private Dynamic Media Classic sphere to the public publish server sphere of the equation The product of a Dynamic Media Publish job is a unique URL for each published asset
Understanding the Dynamic Media Classic URLThe final product of a Dynamic Media Classic workflow is a URL that points to the asset (whether image set or adaptive video set) These URLs are very predictable and follow the same pattern In the case of images each image is generated from the P-TIFF master image
Here is the syntax for the URL of an image with a couple of examples
In the URL everything to the left of the question mark is the virtual path to a specific image Everything to the right of the question mark is an Image Server modifier an instruction for how to process the image When you have multiple modifiers they are separated by ampersands
11
Best Practice
Concept
In the first example the virtual path to the image ldquoBackpack_Ardquo is The Image Server modifiers resize the image to a width of 250
pixels (from wid=250) and resamples the image using the Lanczos interpolation algorithm which sharpens as it resizes (from resMode=sharp2)
The second example applies whatrsquos known as an ldquoimage presetrdquo to the same Backpack_A image as indicated by $_template300$ The $ symbols on either side of the expression indicate that an image preset a packaged set of image modifiers is being applied to the image
Once you understand how Dynamic Media Classic URLs are put together then you understand how to change them programmatically and how to integrate them deeper into your site and backend systems
The server you publish to depends on the type of content and workflow For example all images go to the Image Server and streaming video to the FMS Server For convenience wersquoll speak of a ldquopublishrdquo as a single event to a single server
Publishing publishes all content marked for publish mdash not just your content A single administrator typically publishes on behalf of everyone rather than individual users running a publish The administrator can publish as needed or set up a recurring daily weekly or even every 10 minutes job that will publish automatically Publish on a schedule that makes sense for your business
Automate your publish jobs and schedule a Full Publish to run every day at 1200AM or any time late in the evening
Understanding the Caching DelayNewly uploaded and published assets will be seen right away whereas updated assets may be subject to the 10-hour caching delay By default all published assets have a minimum of 10 hours before they expire We say minimum because every time the image is viewed it starts a clock that will not expire until 10 hours have elapsed in which no one has viewed that image This 10ndashhour period is the ldquoTime to Liverdquo for an asset Once the cache expires for that asset the updated version can be delivered
This typically is not an issue unless a mistake occurred and the imageasset has the same name as the previously published version but there is a problem with the image For example you accidentally uploaded a low resolution version or your art director didnrsquot approve the image In this case you want to recall the original image and replace it with a new version using the same Asset ID
Learn how to Manually Clear the Cache for the URLs That Need to Be Updated
12
Important
Best Practice
To avoid issues with caching delay always work ahead mdash an evening a day two weeks etc Build in time for QAacceptance for internal parties to proof your work before releasing to the public Even working an evening before allows you to make changes and re-publish that evening By morning the 10 hours has elapsed and the cache updates with the correct image
Learn more about Creating a Publishing Job
Learn more about Publishing
Step 3 Deliver
Remember that the final product of a Dynamic Media Classic workflow is a URL that points to the asset The URL might point to an individual image an Image Set a Spin Set or some other Image Set collection or video You need to take that URL and do something with it such as edit your HTML so that the ltIMGgt tags point to the Dynamic Media Classic image instead of pointing to an image coming from your current site
In the Deliver step you must integrate those URLs into your web site mobile app email campaign or any other digital touchpoint on which you want to display the asset
Example of integrating the Dynamic Media Classic URL for an image into a website
The URL in red is the only element specific to Dynamic Media Classic
Your IT team or integration partner can take the lead on writing and changing code to integrate Dynamic Media Classic URLs into your site Adobe has a consulting team that can help in this effort either by providing technical creative or general guidance
For more complex solutions such as zoom viewers or viewers that combine zoom with alternate views typically the URL points to a viewer that is hosted by Dynamic Media Classic and also within that URL is a reference to an Asset ID
Example of a link (in red) that will open an Image Set in a viewer in a new pop-up window
You need to integrate the Dynamic Media Classic URLs into your website mobile app email and other digital touchpoints mdash Dynamic Media Classic canrsquot do that for you
13
Previewing Assets Yoursquoll probably want to preview the assets yoursquove uploaded or are creating or editing to make sure they appear as you want when your customers view them You can access the Preview window by clicking any Preview button either on the thumbnail of the asset at the top of the BrowseBuild Panel or by going to File gt Preview In a browser window it will preview whichever asset is currently in the panel whether that is an image video or built asset like an Image Set
Dynamic Size Preview (Image Presets) You can preview your images in multiple sizes using the Sizes preview This loads a list of your available Image Presets Wersquoll discuss Image Presets later but think of them as ldquorecipesrdquo for loading your image at a named size with specific amounts of sharpening and image quality
Zoom Preview You can also use the Zoom option to preview your image in one of many pre-built zoom presets which are based on different included zoom viewers
Learn more about Previewing Assets
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
10
Important
Concept
Step 2 Author (and Publish)
After creating and uploading your content yoursquoll author new rich media assets from your uploaded assets by performing one or more sub-workflows This includes all the different types of set collections mdash Image Swatch Spin and Mixed Media sets as well as Templates It also includes video Wersquoll go into much greater detail about each type of image collection set and video rich media later However in almost all cases you start by selecting one or more assets (or have no assets selected) and choosing the type of asset you want to build For example you might select a main image and a few views of that image and choose to build an Image Set a collection of alternate views of the same product
Make sure that all your assets are marked for publish While by default all assets are automatically marked for publish on upload any newly authored assets from your uploaded content will need to be marked for publish as well
After yoursquove built your new asset you will run a publish job You can do that manually or schedule a publish job that runs automatically Publishing copies all content from the private Dynamic Media Classic sphere to the public publish server sphere of the equation The product of a Dynamic Media Publish job is a unique URL for each published asset
Understanding the Dynamic Media Classic URLThe final product of a Dynamic Media Classic workflow is a URL that points to the asset (whether image set or adaptive video set) These URLs are very predictable and follow the same pattern In the case of images each image is generated from the P-TIFF master image
Here is the syntax for the URL of an image with a couple of examples
In the URL everything to the left of the question mark is the virtual path to a specific image Everything to the right of the question mark is an Image Server modifier an instruction for how to process the image When you have multiple modifiers they are separated by ampersands
11
Best Practice
Concept
In the first example the virtual path to the image ldquoBackpack_Ardquo is The Image Server modifiers resize the image to a width of 250
pixels (from wid=250) and resamples the image using the Lanczos interpolation algorithm which sharpens as it resizes (from resMode=sharp2)
The second example applies whatrsquos known as an ldquoimage presetrdquo to the same Backpack_A image as indicated by $_template300$ The $ symbols on either side of the expression indicate that an image preset a packaged set of image modifiers is being applied to the image
Once you understand how Dynamic Media Classic URLs are put together then you understand how to change them programmatically and how to integrate them deeper into your site and backend systems
The server you publish to depends on the type of content and workflow For example all images go to the Image Server and streaming video to the FMS Server For convenience wersquoll speak of a ldquopublishrdquo as a single event to a single server
Publishing publishes all content marked for publish mdash not just your content A single administrator typically publishes on behalf of everyone rather than individual users running a publish The administrator can publish as needed or set up a recurring daily weekly or even every 10 minutes job that will publish automatically Publish on a schedule that makes sense for your business
Automate your publish jobs and schedule a Full Publish to run every day at 1200AM or any time late in the evening
Understanding the Caching DelayNewly uploaded and published assets will be seen right away whereas updated assets may be subject to the 10-hour caching delay By default all published assets have a minimum of 10 hours before they expire We say minimum because every time the image is viewed it starts a clock that will not expire until 10 hours have elapsed in which no one has viewed that image This 10ndashhour period is the ldquoTime to Liverdquo for an asset Once the cache expires for that asset the updated version can be delivered
This typically is not an issue unless a mistake occurred and the imageasset has the same name as the previously published version but there is a problem with the image For example you accidentally uploaded a low resolution version or your art director didnrsquot approve the image In this case you want to recall the original image and replace it with a new version using the same Asset ID
Learn how to Manually Clear the Cache for the URLs That Need to Be Updated
12
Important
Best Practice
To avoid issues with caching delay always work ahead mdash an evening a day two weeks etc Build in time for QAacceptance for internal parties to proof your work before releasing to the public Even working an evening before allows you to make changes and re-publish that evening By morning the 10 hours has elapsed and the cache updates with the correct image
Learn more about Creating a Publishing Job
Learn more about Publishing
Step 3 Deliver
Remember that the final product of a Dynamic Media Classic workflow is a URL that points to the asset The URL might point to an individual image an Image Set a Spin Set or some other Image Set collection or video You need to take that URL and do something with it such as edit your HTML so that the ltIMGgt tags point to the Dynamic Media Classic image instead of pointing to an image coming from your current site
In the Deliver step you must integrate those URLs into your web site mobile app email campaign or any other digital touchpoint on which you want to display the asset
Example of integrating the Dynamic Media Classic URL for an image into a website
The URL in red is the only element specific to Dynamic Media Classic
Your IT team or integration partner can take the lead on writing and changing code to integrate Dynamic Media Classic URLs into your site Adobe has a consulting team that can help in this effort either by providing technical creative or general guidance
For more complex solutions such as zoom viewers or viewers that combine zoom with alternate views typically the URL points to a viewer that is hosted by Dynamic Media Classic and also within that URL is a reference to an Asset ID
Example of a link (in red) that will open an Image Set in a viewer in a new pop-up window
You need to integrate the Dynamic Media Classic URLs into your website mobile app email and other digital touchpoints mdash Dynamic Media Classic canrsquot do that for you
13
Previewing Assets Yoursquoll probably want to preview the assets yoursquove uploaded or are creating or editing to make sure they appear as you want when your customers view them You can access the Preview window by clicking any Preview button either on the thumbnail of the asset at the top of the BrowseBuild Panel or by going to File gt Preview In a browser window it will preview whichever asset is currently in the panel whether that is an image video or built asset like an Image Set
Dynamic Size Preview (Image Presets) You can preview your images in multiple sizes using the Sizes preview This loads a list of your available Image Presets Wersquoll discuss Image Presets later but think of them as ldquorecipesrdquo for loading your image at a named size with specific amounts of sharpening and image quality
Zoom Preview You can also use the Zoom option to preview your image in one of many pre-built zoom presets which are based on different included zoom viewers
Learn more about Previewing Assets
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
11
Best Practice
Concept
In the first example the virtual path to the image ldquoBackpack_Ardquo is The Image Server modifiers resize the image to a width of 250
pixels (from wid=250) and resamples the image using the Lanczos interpolation algorithm which sharpens as it resizes (from resMode=sharp2)
The second example applies whatrsquos known as an ldquoimage presetrdquo to the same Backpack_A image as indicated by $_template300$ The $ symbols on either side of the expression indicate that an image preset a packaged set of image modifiers is being applied to the image
Once you understand how Dynamic Media Classic URLs are put together then you understand how to change them programmatically and how to integrate them deeper into your site and backend systems
The server you publish to depends on the type of content and workflow For example all images go to the Image Server and streaming video to the FMS Server For convenience wersquoll speak of a ldquopublishrdquo as a single event to a single server
Publishing publishes all content marked for publish mdash not just your content A single administrator typically publishes on behalf of everyone rather than individual users running a publish The administrator can publish as needed or set up a recurring daily weekly or even every 10 minutes job that will publish automatically Publish on a schedule that makes sense for your business
Automate your publish jobs and schedule a Full Publish to run every day at 1200AM or any time late in the evening
Understanding the Caching DelayNewly uploaded and published assets will be seen right away whereas updated assets may be subject to the 10-hour caching delay By default all published assets have a minimum of 10 hours before they expire We say minimum because every time the image is viewed it starts a clock that will not expire until 10 hours have elapsed in which no one has viewed that image This 10ndashhour period is the ldquoTime to Liverdquo for an asset Once the cache expires for that asset the updated version can be delivered
This typically is not an issue unless a mistake occurred and the imageasset has the same name as the previously published version but there is a problem with the image For example you accidentally uploaded a low resolution version or your art director didnrsquot approve the image In this case you want to recall the original image and replace it with a new version using the same Asset ID
Learn how to Manually Clear the Cache for the URLs That Need to Be Updated
12
Important
Best Practice
To avoid issues with caching delay always work ahead mdash an evening a day two weeks etc Build in time for QAacceptance for internal parties to proof your work before releasing to the public Even working an evening before allows you to make changes and re-publish that evening By morning the 10 hours has elapsed and the cache updates with the correct image
Learn more about Creating a Publishing Job
Learn more about Publishing
Step 3 Deliver
Remember that the final product of a Dynamic Media Classic workflow is a URL that points to the asset The URL might point to an individual image an Image Set a Spin Set or some other Image Set collection or video You need to take that URL and do something with it such as edit your HTML so that the ltIMGgt tags point to the Dynamic Media Classic image instead of pointing to an image coming from your current site
In the Deliver step you must integrate those URLs into your web site mobile app email campaign or any other digital touchpoint on which you want to display the asset
Example of integrating the Dynamic Media Classic URL for an image into a website
The URL in red is the only element specific to Dynamic Media Classic
Your IT team or integration partner can take the lead on writing and changing code to integrate Dynamic Media Classic URLs into your site Adobe has a consulting team that can help in this effort either by providing technical creative or general guidance
For more complex solutions such as zoom viewers or viewers that combine zoom with alternate views typically the URL points to a viewer that is hosted by Dynamic Media Classic and also within that URL is a reference to an Asset ID
Example of a link (in red) that will open an Image Set in a viewer in a new pop-up window
You need to integrate the Dynamic Media Classic URLs into your website mobile app email and other digital touchpoints mdash Dynamic Media Classic canrsquot do that for you
13
Previewing Assets Yoursquoll probably want to preview the assets yoursquove uploaded or are creating or editing to make sure they appear as you want when your customers view them You can access the Preview window by clicking any Preview button either on the thumbnail of the asset at the top of the BrowseBuild Panel or by going to File gt Preview In a browser window it will preview whichever asset is currently in the panel whether that is an image video or built asset like an Image Set
Dynamic Size Preview (Image Presets) You can preview your images in multiple sizes using the Sizes preview This loads a list of your available Image Presets Wersquoll discuss Image Presets later but think of them as ldquorecipesrdquo for loading your image at a named size with specific amounts of sharpening and image quality
Zoom Preview You can also use the Zoom option to preview your image in one of many pre-built zoom presets which are based on different included zoom viewers
Learn more about Previewing Assets
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
12
Important
Best Practice
To avoid issues with caching delay always work ahead mdash an evening a day two weeks etc Build in time for QAacceptance for internal parties to proof your work before releasing to the public Even working an evening before allows you to make changes and re-publish that evening By morning the 10 hours has elapsed and the cache updates with the correct image
Learn more about Creating a Publishing Job
Learn more about Publishing
Step 3 Deliver
Remember that the final product of a Dynamic Media Classic workflow is a URL that points to the asset The URL might point to an individual image an Image Set a Spin Set or some other Image Set collection or video You need to take that URL and do something with it such as edit your HTML so that the ltIMGgt tags point to the Dynamic Media Classic image instead of pointing to an image coming from your current site
In the Deliver step you must integrate those URLs into your web site mobile app email campaign or any other digital touchpoint on which you want to display the asset
Example of integrating the Dynamic Media Classic URL for an image into a website
The URL in red is the only element specific to Dynamic Media Classic
Your IT team or integration partner can take the lead on writing and changing code to integrate Dynamic Media Classic URLs into your site Adobe has a consulting team that can help in this effort either by providing technical creative or general guidance
For more complex solutions such as zoom viewers or viewers that combine zoom with alternate views typically the URL points to a viewer that is hosted by Dynamic Media Classic and also within that URL is a reference to an Asset ID
Example of a link (in red) that will open an Image Set in a viewer in a new pop-up window
You need to integrate the Dynamic Media Classic URLs into your website mobile app email and other digital touchpoints mdash Dynamic Media Classic canrsquot do that for you
13
Previewing Assets Yoursquoll probably want to preview the assets yoursquove uploaded or are creating or editing to make sure they appear as you want when your customers view them You can access the Preview window by clicking any Preview button either on the thumbnail of the asset at the top of the BrowseBuild Panel or by going to File gt Preview In a browser window it will preview whichever asset is currently in the panel whether that is an image video or built asset like an Image Set
Dynamic Size Preview (Image Presets) You can preview your images in multiple sizes using the Sizes preview This loads a list of your available Image Presets Wersquoll discuss Image Presets later but think of them as ldquorecipesrdquo for loading your image at a named size with specific amounts of sharpening and image quality
Zoom Preview You can also use the Zoom option to preview your image in one of many pre-built zoom presets which are based on different included zoom viewers
Learn more about Previewing Assets
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
13
Previewing Assets Yoursquoll probably want to preview the assets yoursquove uploaded or are creating or editing to make sure they appear as you want when your customers view them You can access the Preview window by clicking any Preview button either on the thumbnail of the asset at the top of the BrowseBuild Panel or by going to File gt Preview In a browser window it will preview whichever asset is currently in the panel whether that is an image video or built asset like an Image Set
Dynamic Size Preview (Image Presets) You can preview your images in multiple sizes using the Sizes preview This loads a list of your available Image Presets Wersquoll discuss Image Presets later but think of them as ldquorecipesrdquo for loading your image at a named size with specific amounts of sharpening and image quality
Zoom Preview You can also use the Zoom option to preview your image in one of many pre-built zoom presets which are based on different included zoom viewers
Learn more about Previewing Assets
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
14
Determine Your Folder Structure and File Naming ConventionChapter 3
Before you jump in and start uploading all your content itrsquos wise to consider the folder structure yoursquoll use and particularly your file naming convention Itrsquoll likely save you time and having to redo tasks later Itrsquos best to coordinate these decisions across all groups
Folder Hierarchy and File Naming Convention File naming is generally the most important decision you make concerning implementation of Dynamic Media Classic However to understand why it is important letrsquos first talk about your folder structure
Folder Hierarchy Folder hierarchy is important to you and your company for organizational purposes only mdash your Dynamic Media Classic URLs only reference the asset name not the folder or path Regardless of where you upload a file the URL will be the same This is quite different from how most people organize their images and content for the web but with Dynamic Media Classic it makes no difference
Another important consideration is the number of assets or folders to store in each folder If many assets are stored in a folder performance will degrade when viewing assets in Dynamic Media Classic Do not store thousands of assets in a folder Instead develop an organizational hierarchy with fewer than around 500 assets or folders within a given branch of your hierarchy This a not a strict requirement but it will help to maintain acceptable response times when viewing or searching assets In effect the recommendation is to create hierarchies that are wide and shallow rather than narrow and deep
The easiest way to create your folders is to upload your entire folder structure using FTP and enable the option Include Subfolders This option causes Dynamic Media Classic to recreate the folder structure on the FTP site in Dynamic Media Classic
We want you to consider your folder structure before you start uploading all your files because it is much easier to organize and manage your files and folders locally on your computer than it is inside Dynamic Media Classic For instance you can only drag and drop files but not entire folders inside Dynamic Media Classic
Folder Strategies For your folder strategy consider what makes sense to your organization Here are some common folder naming scenarios
bull Mirror web site or product breakdown For example if you sold clothing you might have folders for Men Women and Accessories and subfolders for Shirts and Shoes
bull SKU or Product ID based strategy For example with retailers that have thousands of items it might make sense to use SKU numbers or product IDs as folder names
bull Brand strategy For example manufacturers who have multiple brands might choose their brand names as top-level folders
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
15
File Naming Convention How you choose to name your files is perhaps the most important early decision you will make regarding Dynamic Media Classic This is because all assets in Dynamic Media Classic must have unique names regardless of where they are stored in the account
All URLs and transactions in Dynamic Media Classic are driven by an Asset ID which is an assetrsquos unique identifier in the database When you upload a file the Asset ID is created by taking the filename and removing the extension For example 896649jpg gets Asset ID 896649
Rules regarding Asset IDs
bull No two assets can have the same name within Dynamic Media Classic regardless of what folder the assets are in
bull Names are case-sensitive For example Chairjpg chairjpg and CHAIRjpg would create three different Asset IDs
bull As a best practice Asset IDs should not contain blank spaces or symbols Use of spaces and symbols make implementation more difficult because you will have to URL encode these characters For example a space ldquo ldquo becomes ldquo20rdquo
Your naming convention is essentially how you integrate with Dynamic Media Classic You do not typically integrate your back-office systems into Dynamic Media Classic because it is a closed system It is a passive partner waiting for instructions in the form of URLs
Most users base their naming convention around their internal SKU or product IDs so that when a web page is called up with information about that SKU the page can automatically look for an image that has a similar name If there is no connection between the file name and the SKU or ID then your back-office system will need to manually keep track of each file name and a person will have to maintain those associations mdash in short a lot of work for both the IT and content teams
File Naming Strategies Your naming strategy should be flexible for future expansion so you can avoid having to rename after you have launched Here are some typical naming strategies
bull No alternate images In this scenario you only have one image per product and no alternate or colored views You would strictly name each image according to its unique SKU or product ID number When the page loads the page template calls to the Asset ID with the same SKU number
This is a very simple system and good if you have modest needs However it is not very flexible Just because you have no alternate images today does not mean you wonrsquot have those images tomorrow The next scenario offers more flexibility
SKUPID Filename Asset ID
896649 896649jpg 896649
SKU123 SKU123png SKU123
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
16
bull Using the image alternate views colored versions swatches This strategy allows for alternate views andor colored views if you have them Rather than name the image after only the SKU you add a modifier such as ldquo_1rdquo and ldquo_2rdquo for alternate views and a color code of ldquo_REDrdquo or ldquo_BLUrdquo for colored views If you have both colored images and alternate views for the same product perhaps you would add ldquo_RED_1rdquo and ldquo_RED_2rdquo for the first and second red-colored view Swatches would be named with the SKU color code and an ldquo_SWrdquo extension
SKUPID Category Filename Asset ID
AA123 Alt views AA123_1tif AA123_2tif AA123_3tif
AA123_1 AA123_2 AA123_3
Colored views AA123_BLUtif AA123_REDtif AA123_BROWNtif
AA123_BLU AA123_RED AA123_BROWN
Swatches AA123_BLU_SWtif AA123_BLU_SW
Image Set or Swatch Set AA123 or AA123_SET
When dealing with set collections such as Image Sets and Swatch Sets the set itself must also have a unique name So in this case the set could be given the base SKU as its name or the SKU with a ldquo_SETrdquo extension
Naming Convention and Automation One last word on the importance of naming convention If you would like to use sets (such as Image Sets or Swatch Sets) a predictable naming convention will allow you to automate their creation Any scripted method such as a Batch Set Preset which yoursquoll learn about in a separate chapter can be driven off a naming convention
The alternate method is to manually create your sets While manually creating image sets for 200 images may not be a big job imagine if you have more than 100000 images This is when set creation automation becomes crucial
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
17
Important
Best Practice
Image Presets Chapter 4
An Image Preset is essentially a recipe that contains all the settings needed to create an image at a specific size format quality and sharpening Image Presets are a key component of dynamic sizing
If you look at the URLs of just about any Dynamic Media Classic customer yoursquoll probably see an Image Preset in use Just look for $name$ at the end of the URL (with any word or words substituted for name)
Image Presets shorten the URL so instead of writing out several Image Serving instructions per request you can write a single Image Preset For example these two URLs produce the same 300 x 300 JPEG image with sharpening but the second one uses an Image Preset
The true value of Image Presets is that any Company Administrator can update the definition of that Image Preset and affect every image using that format mdash without changing any web code You will see the results of any change to an Image Preset after the cache for the URL clears
An Image Preset has a dollar sign ($) on both sides of its name and follows the question mark () separator
Create one Image Preset per unique image size on your site For example if you need a 350 x 350 image for the product detail page a 120 x 120 image for the browsesearch pages and a 90 x 90 image for a cross-sellfeatured item then you need three Image Presets whether you have 500 images or 500000
When resizing an image the aspect ratio the ratio of the width of the image to its height should always be kept proportional so the image is not distorted
Learn more about Image Presets and learn how to Create an Image Preset
Image Presets and Sharpening Image Presets typically resize an image and any time you resize an image from its original size you should add sharpening Thatrsquos because resizing causes many pixels to merge and blend into a smaller space making the image looking soft and blurry Sharpening increases the contrast of edges and high contrast areas in an image
We expect that the high resolution images you upload into Dynamic Media Classic do not need any sharpening when viewed at full size mdash when zoomed into However at any smaller size some sharpening is usually desirable
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
18
Note
Best Practice
Always sharpen when resizing images That means yoursquoll need to add sharpening to every Image Preset (and Viewer Preset which wersquoll discuss later)
If your images do not look good chances are it is because they need sharpening or perhaps the quality was poor to begin with
How much sharpening to add is entirely subjective Some people like softer images while others like them very sharp It is easy to enhance an image by running a combination of sharpening filters on an image However it is also easy to go overboard and over-sharpen an image
The following graphic shows three levels of sharpening From right to left you have no sharpening just the right amount and too much
Dynamic Media Classic allows for three types of sharpening Simple Sharpening Resample Mode and Unsharp Mask
1 Learn more about Dynamic Media Classic Sharpening Options
Additional ResourcesImage Preset Guide Settings to use to optimize for image quality and loading speed
Image Is Everything Part 2 Itrsquos Never Just a Blur mdash Quality Versus Speed A blog post discussing using Image Presets for delivering high-quality fast-loading images
Image Is Everything Webinars Links to recordings of all three webinars in the Image Is Everything series Webinar 2 discusses Image Presets
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
19
Image Swatch Spin and Mixed Media Sets Chapter 5
Moving beyond single images for dynamic sizing and zoom Dynamic Media Classic set collections allow for a richer online experience This chapter will explore how to create the following rich media sets in Dynamic Media Classic
bull Image Set
bull Swatch Set
bull Spin Set
bull Mixed Media Set
It will also explain how to use Batch Set Presets to automate set creation via an upload
Everything You Always Wanted To Know About SetsNext to basic dynamic sizing and zoom sets are probably the most widely used Dynamic Media Classic sub-product Sets are essentially ldquovirtualrdquo assets that contain no actual images but consist of a set of relationships to other images andor video The main appeal of sets is that they are mini-applications that are ready ldquooff the shelfrdquo By that we mean that each set viewer contains its own logic and interface so that all you have to do is call to them on the site In addition they only require you to track a single Asset ID per set rather than having to manage all the member assets and relationships yourself
When you create a set that set is managed as a separate asset that must be marked for publish and published before it can be served from a URL In addition all of its member assets must be published as well
Types of Sets Letrsquos learn about the four types of sets you can create in Dynamic Media Classic Image Swatch Spin and Mixed Media Sets
Image SetThis is the most common type of set Yoursquoll typically use it for alternate views of the same item It consists of multiple images that you load into the viewer by clicking on the associated thumbnail of that image
The URL for the above Image Set could appear as
Learn more about Image Sets with the Quick Start to Image Sets
Learn how to Create an Image Set
Example of an Image Set
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
20
Swatch SetThis type of set is typically used to display colored views of the same item It consists of pairs of images and color swatches The main difference between a Swatch and Image Set is that Swatch Sets use a different image as a clickable swatch whereas Image Sets use a miniature clickable thumbnail version of the original image
Swatch Sets do not colorize images (a common misconception) The images are simply being swapped exactly as in an Image Set The mini swatch images could have been authored using Photoshop each color could have been photographed separately or the Crop tool in Dynamic Media Classic could have been used to make a swatch out of one of the colored images
The URL for the above Swatch Set could appear as
Example of a Swatch Set
Learn more about Swatch Sets with the Quick Start to Swatch Sets
Learn how to Create a Swatch Set
Spin SetThis set is typically used to show a 360-degree view of an item Like Swatch Sets Spin Sets use no 3D magic mdash the real work is to create many photos of an image from all sides The viewer simply allows you to switch between the images like a stop-motion animation
Spin Sets can either spin in one direction along a single axis or if alternately created as a 2D Spin Set mdash spin on multiple axes For example a car can be rotated while all wheels are on the ground and then can be ldquoflippedrdquo up and rotated on its back wheels as well For a properly set up 2D Spin Set the number of images per row for each axis should be the same In other words if you are spinning on two axes you need twice as many images as a single angle spin
The URL for the above Spin Set could appear as
Example of a Spin Set
Learn more about Spin Sets with the Quick Start to Spin Sets
Learn how to Create a Spin Set
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
21
Mixed Media SetThis is a combination set It allows you to combine any of the previous sets as well as add video into a single viewer In this workflow you create any of the component sets first and then assemble them together into a Mixed Media Set
The URL for the above Mixed Media Set could appear as
Learn more about Mixed Media Sets with the Quick Start to Mixed Media Sets Example of a Mixed Media Set
Learn how to Create a Mixed Media Set
To display an image for zoom a set or a video on your website you call it in a Dynamic Media Classic ldquoviewerrdquo Dynamic Media Classic includes viewers for rich media assets such as Swatch Sets Spin Sets video and many others
Learn more about Viewers for AEM Assets and Dynamic Media Classic
Batch Set Presets Up until now wersquove been discussing how to build sets manually using the Dynamic Media Classic Build function However it is possible to automate the creation of Image Sets and Spin Sets using a Batch Set Preset as long as you have a standardized naming convention
Each preset is a uniquely named self-contained set of instructions that defines how to construct the set using images that match the defined naming conventions In the preset you first define naming conventions for the assets that you want grouped together in a set A Batch Set Preset can then be created to reference these images
While it is possible to create the preset yourself (they are found under Setup gt Application Setup gt Batch Set Presets) as a best practice you should have your Consulting team or Technical Support set it up for you Herersquos why
bull Batch Set Presets can be complex to set up mdash they are powered by regular expressions and unless you are a developer this syntax may be unfamiliar or confusing
bull Once created they are turned on by default There is no ldquoundordquo function If you start uploading thousands of images and your preset is configured incorrectly you may end up with hundreds or thousands of broken sets which you must find and delete manually
A simple naming convention was suggested earlier that would be very easy to build into a Batch Set Preset However because the presets are very flexible they can handle complex naming strategies In short the images that belong in a set should be tied together by some common name mdash often it is the SKU number or product ID In Dynamic Media Classic you either tell it a default naming convention for all of your images to be used for a preset or you can create multiple presets each with different naming rules
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
22
Batch Set Presets are applied only at upload they cannot be run after the images have been uploaded Thus it is important to plan out your naming convention and get a preset built before you start uploading all of your images
Once the presets have been created the Company Administrator can choose whether they are active or inactive Active means they will appear on the upload page under Job Options whereas inactive presets will remain hidden
Learn how to Create a Batch Set Preset
Using Batch Set Presets on UploadHere is how you use Batch Set Presets on upload after they have been created
1 Click Upload and choose either From Desktop or Via FTP
2 Click Job Options
3 Open the Batch Set Presets option and check or uncheck the preset to use it with the upload
4 After the upload is done look in your folder for the finished sets
Learn more about Batch Set Presets
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
23
Note
Cropping Adjusted Images and Zoom Targets Chapter 6
One of the main strengths of the Dynamic Media Classic master image concept is that you can repurpose the image asset for many uses Traditionally you would have to create separate cropped versions of each image to show off details or for swatches When using Dynamic Media Classic you can do the same tasks on your single master and either save those cropped versions as new physical files or as virtual derivatives that take no storage space
By the end of this chapter you will know how to
bull Crop images in Dynamic Media Classic and save as new master files or as virtual images Learn more
bull Save virtual Adjusted Images and use them in place of master assets Learn more
bull Create Zoom Targets on your images to show off their highlights Learn more
Cropping Dynamic Media Classic has a few image editing tools conveniently available in the UI including the Crop tool You might wish to crop your master image inside Dynamic Media Classic for a number of reasons For example
bull You donrsquot have access to the original file You want to display the image with a different cropping or aspect ratio but you donrsquot have the original file on your computer or are working from home In this case you can go into Dynamic Media Classic find the image crop it and save it or save it as a new version
bull To remove excess white space The image was photographed with too much white space which makes the product look small You want your thumbnail images to fill up the canvas as much as possible
bull To create Adjusted Images virtual copies of images that take no disk space Some companies have business rules that require them to keep separate copies of the same image but with a different name Or maybe you want a cropped and uncropped version of the same image
bull To make new images from a source image For example you may want to create color swatches or a detail of the main image You could do this in Adobe Photoshop and upload separately or use the Crop tool in Dynamic Media Classic
All URLs in the following discussions of Cropping are for illustrative purposes only they are not live links
Using the Crop Tool You can access the Crop tool in Dynamic Media Classic from the Details page for an asset or by clicking the Edit button You can use the tool to crop in two ways
bull Manual The default cropping mode in which you drag the handles of the crop window or type values in the Size box Learn how to Manually Crop
bull Trim Use this to remove extra whitespace around your image by calculating the number of pixels that do not match your image Learn how to Crop by Trimming
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
24
Note
Note
Manual CroppingWhen you save a manually cropped version it appears that the image is permanently cropped Dynamic Media Classic is actually hiding the pixels by adding an internal URL modifier to crop the image When you publish it will appear to everyone that the image is cropped however you can return to the Crop Editor and remove the crop at a later point
You can then choose whether to save as a New Master Image or as an Additional View of the master A new master is a new physical file (like a TIFF or JPEG) that takes up storage space An additional view is a virtual image that takes up no server space We donrsquot recommend that you choose Replace Original because that will overwrite your master and make the crop permanent If you save as a new master or as an additional view you must choose a new Asset ID Like other Asset IDs this must be a unique name in Dynamic Media Classic
Trim Cropping If you upload an image with too much whitespace (extra canvas) around the main subject of the image it will look much smaller on the web when resized This is especially true for thumbnail images that are 150 pixels or smaller mdash the subject of the photo may get lost in all the extra space around it
Compare these two versions of the same image
The image on the right is made much more prominent by removing the extra space around the product Trimming can be done one image at a time using the Crop tool or run as a batch process as you upload We recommend running as a batch process if you want all your images to be consistently cropped to the boundaries of the main subject Trim crops to the bounding box mdash the rectangle surrounding the image
Trim does not create transparency around the image mdash for that you would need to embed a clipping path on the image and use the Create Mask from Clip Path upload option
To restore an image to its original state after yoursquove cropped it when yoursquove used the Save option display the image in the Crop Editor screen and select the Reset button
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
25
Warning
If you set a crop for your upload Dynamic Media Classic will put a cookie to remember that setting for the next time As a best practice click the Reset to Company Defaults button before your next upload to clear out any crop options leftover from the last upload otherwise you might accidentally crop the next batch of images
Cropping by URL Although it is not obvious in Dynamic Media Classic you can also crop purely through the URL (or even add cropping to an Image Preset)
Whenever you use the Crop tool you will see URL values in the field at the bottom You can take those values and apply them directly to an image as URL modifiers
Crop command modifiers at the bottom of the Crop Editor
Cropping on Upload As mentioned earlier you can also choose to crop the images as you upload them To use trim cropping on upload click the Job Options button and under Crop Options choose Trim
Dynamic Media Classic will remember this option for the next upload While you might want it to crop images for this upload you might not want them cropped for every upload Another option would be to set a special scheduled FTP upload job and put the crop options there That way you would only run the job when you needed to crop your images
An uncropped image with a standard Image Preset The same image with the crop values applied
Because the size has to be calculated on a per image basis when you use cropping by trimming it cannot be automated via the URL Trim cropping can only be run on upload or by applying it one image at a time
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
26
Cropping in the Image Preset Image Presets have a field where you can add extra Image Serving commands To add the same crop as above to your Image Preset edit your preset and paste or type the values in the URL Modifiers field and then save and publish
Add crop commands (or any command) to the URL Modifiers of the Image Preset
The crop will now be part of that Image Preset and be applied automatically every time it is used Of course this method depends on all images needing the same crop amount If your images are not all shot in the same way this method wouldnrsquot work for you
Adjusted Images When you use the Crop tool you have the option to Save as Additional View of Master When saved this creates a new kind of Dynamic Media Classic asset mdash an Adjusted Image An Adjusted Image also called a derivative is a virtual image Itrsquos not actually an image at all itrsquos a database reference (like an alias or shortcut) to the physical master image
Will the Real Image Please Stand Up Can you tell which is the master and which is the Adjusted Image
You should not be able to tell without looking in Dynamic Media Classic and seeing the asset type of ldquoAdjusted Imagerdquo for SBR _ MAIN2
An Adjusted Image uses no disk space since it only exists as a line item in the database It is also permanently tied to the original asset if the original is deleted the Adjusted Image would also be deleted It can consist of an entire uncropped image or just part of an image (a crop)
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
27
You typically create Adjusted Images with the Crop tool however they can also be created with the other image editors mdash the Adjust and Sharpen tools
Adjusted Images require a unique Asset ID When published (you must publish like any other asset) they act as any other image and are called on a URL by their Asset ID On the Detail page you can view Adjusted Images associated with a master image under the Built amp Derivatives tab
Adjusted Views for master image ASIAN_BR_MAIN
Zoom Targets Zoom Targets are also found on the Edit menu and Details page of an image They allow you to set ldquohot spotsrdquo to highlight specific merchandising features of a zoom image Instead of creating separate images by cropping a large master the zoom viewer can serve up the details on top of the image along with a short label that you create
Because Zoom Targets are essentially a merchandising feature and require knowledge of the selling points of a product they would typically be created by a person in the Merchandising or Product team at a company
The process is very easy mdash click on the feature give it a descriptive name and save Targets can be copied from one image to another if they are similar however the process is manual There is no way in Dynamic Media Classic to automate the creation of Zoom Targets because each image is different and has different features
Another factor in deciding whether to use Zoom Targets is your choice of viewer Not all viewer types can display Zoom Targets (for example the Fly-out viewer doesnrsquot support them)
Learn how to Create Zoom Targets
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
28
Using the Zoom Target Tool Here is the workflow for creating targets in Dynamic Media Classic
1 Browse to your image click the Edit button and choose Zoom Targets
2 The Zoom Target Editor will load Yoursquoll see your image in the middle some buttons at the top and an empty target panel on the right In the lower left yoursquoll see a Viewer Preset selected The default is ldquoZoom1-Guidedrdquo
3 Move the red box with your mouse and click to create a new target
bull The red box is the target area When a user clicks on that target it will zoom in to the area inside the box bull
bull The target size is determined by the view size inside the Viewer Preset This determines the size of the main zoom image See Setting the View Size below
4 Yoursquoll see the target you just created turn blue and on the right yoursquoll see a thumbnail version of that target as well as the default name ldquotarget-0rdquo
5 To rename your target click its thumbnail type a new Name and click Enter or Tab mdash if you just click away your name wonrsquot be saved
6 While the target is selected the box will have green dashed lines around it and you can resize and move it Drag the corners to resize or drag the target box to move it
7 Also if you need to remove a target select it by clicking on its thumbnail and press the Delete Target button press the DELETE key on your keyboard
8 Continue clicking to add new targets renaming andor resizing after adding
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
29
9 When you are done click the Save button and then Preview
bull This will load the image inside the default Custom zoom viewer Make sure the Viewer Preset supports Zoom Targets mdash in general all standard presets that have the word ldquo-Guidedrdquo were designed for use with Zoom Targets To use the targets hover over the target thumbnail (or hotspot icon) to see the label and click on it to see the viewer zoom into that feature
bull Just like all other work you do in Dynamic Media Classic you must publish for your Zoom Targets to be live on the web If you already are using a viewer that supports targets they will appear immediately (once the cache has cleared) However if you are not using a Zoom Target-enabled viewer they will remain hidden
Setting the View Size in the Zoom Viewer Preset Letrsquos talk a moment about where the size of the Zoom Targets comes from Inside the Viewer Preset for your zoom viewer there is a setting called view size View size is the size of your zoom image within the viewer Itrsquos different from stage size which is the total size of your viewer including the UI components and artwork
When you create a new target it derives its size and aspect ratio from the view size For example if your view size is 200 x 200 then you will only be able to make square targets with a maximum zoom area of 200 pixels Your targets can be larger than 200 pixels but always square But this also means that the image inside your zoom viewer is only 200 pixels mdash the size of the zoom target has a direct relation to the size of your viewer So you would first decide on your viewer design before setting targets
However by default the view size is blank (set to 0 x 0) because the size of the main view image is dynamic and is automatically derived according to the size of the stage The problem is if you donrsquot explicitly set a view size in your preset the Zoom Target tool will complain and wonrsquot know what size to make the targets
When you load the Zoom Target tool the view size is displayed next to the name of the preset Compare the view size between the built-in Zoom1-Guided preset and the custom ZT_AUTHORING preset
You can see the built-in preset has a size of 900 x 550 which means that the target can never get smaller than that rather large size Thatrsquos probably too large mdash if you have a 2000 pixel image you can only call out a feature that is a minimum of 900 pixels across The user can manually zoom further but you canrsquot guide them any closer Setting a view size to 350 x 350 allows targets to zoom in pretty closely or be resized larger But if you want a larger zoom image in your viewer yoursquod need to create a new preset because yours is locked at 350 pixels
Creating or Editing a Viewer Preset That Supports Zoom TargetsTo set the view size create or edit a Viewer Preset that supports Zoom Targets
1 In the Viewer Preset go to the Zoom Settings option
2 Set a Width and Height
3 Save the preset and close out If you want to use that preset on your live site you will later have to publish as well
4 Go into the Zoom Target tool and choose the preset you edited in the bottom left You will immediately see the new view size reflected in your targets
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
30
Note
Introduction to Basic TemplatesChapter 7
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
bull Basic merchandising Uses labels like ldquofree shippingrdquo if that product has free shipping These labels are setup by the merchandise team in Photoshop and the web uses logic to know when to apply them to the image
bull Advanced merchandising Each template has multiple variables and may show more than one option at the same time Uses a database inventory and business rules to determine when to show a product as ldquoJust Inrdquo on ldquoClearancerdquo or ldquoSold Outrdquo Also may use transparency behind the product to show it on different backgrounds such as in different rooms The same templates andor assets may be repurposed on the product detail page to show a larger or zoomable version of the same product on different backgrounds
Itrsquos 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 ldquobuilt-inrdquo template application mdash 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 chapter you will know how to
bull Upload a Photoshop PSD to Dynamic Media Classic to use it as the basis of a template
bull Create a simple merchandising Basic Template consisting of image layers
bull Add text layers and make them variable through the use of parameters
bull Construct a template URL and manipulate the image dynamically through the web browser
All URLs in this chapter are for illustrative purposes only they are not live links
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
31
Overview of Basic TemplatesThe definition of a Basic Template (or just ldquotemplaterdquo 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 mdash 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
bull Both consist of layers that are like sheets of stacked acetate You can composite partially transparent images and see through the transparent areas of a layer to the layers below
bull The layers can be moved and rotated to reposition the content and the opacity and blending modes can be altered to make the content partially transparent
bull You can create text-based layers The quality can be very high because the Image Server uses the same text engine as Photoshop and Illustrator
bull Simple layer styles can be applied to each layer to create special effects such as drop shadows or glows
However unlike Photoshop PSDs layers can be entirely dynamic and controlled via a URL on the Image Server
bull You can add variables to all template properties making it easy to change its composition on the fly
bull Variables called parameters allow you to only expose the part of the template that you want to change
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 layerrsquos 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
Learn more about Template Basics
Learn how to create a Basic Template
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
32
Upload graphics to Dynamic
Media Classic
Build template in
Dynamic Media Classic
Creating a Basic TemplateWhen 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 ldquoText Workflowrdquo If not using text follow the main path only
The Basic Template workflow
1 Design and create your assets Most users do this in Adobe Photoshop Design assets at the exact size you need mdash if it is a 200 pixel image for a thumbnail page design it at 200 pixels If you need to zoom on it design it at a size of about 2000 pixels Use Photoshop (andor Illustrator saved as bitmap) to create the assets and use Dynamic Media Classic to assemble the parts together manage the layers and add variables
2 After designing graphic assets upload them to Dynamic Media Classic Rather than upload individual assets from the PSD we recommend you upload your entire layered PSD file and have Dynamic Media Classic create a file per layer by using the Maintain Layers option on upload (see below for more details) Text Workflow If creating dynamic text upload your fonts as well Dynamic text is variable and controlled via the URL If your text is static or has only a few short phrases that donrsquot change mdash for example tags that say ldquoNewrdquo or ldquoSalerdquo rather than ldquoX Offrdquo with the X being a variable number mdash we recommend pre-rendering the text in Photoshop and uploading as rasterized layers as images It will be easier and you can style the text exactly as you want
3 Build the Template in Dynamic Media Classic using the Template Basics editor of the Build menu and add image layers Text Workflow Create text layers in the same editor This step is required when building a template manually in Dynamic Media Classic Choose a canvas size that matches your design drag and drop images onto the canvas and set layer properties (size rotation opacity etc) Yoursquore not putting every possible layer on your template just one placeholder per image layer Text Workflow You create text layers with the Text tool similar to creating text layers in Photoshop You can choose a font and style it using the same options available with the Photoshop Type tool Another workflow is to upload a PSD and have Dynamic Media Classic generate a ldquofreerdquo template and can even recreate text layers This will be discussed in more detail later
4 Once the layers are created add parameters (variables) to any property of any layer that yoursquod like to control through the URL including the layerrsquos source (the image itself ) Text Workflow You also can add parameters to text layers both to control the content of the text and size and position of the layer itself as well as all of the formatting options such as font color font size horizontal tracking etc
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
33
5 Create an Image Preset that matches the size of your template We recommend doing this so the template is always called at a 11 size and also to add sharpening to any large image layers that get resized to fit the template If you are building a template to be zoomed on this step is unnecessary
6 Publish copy the URL from the Dynamic Media Classic preview and test it in a browser
Preparing and Uploading Your Template Assets to Dynamic Media ClassicBefore uploading your template assets to Dynamic Media Classic you will need to complete a few preparatory steps
Preparing the PSD for Upload 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
1 Simplify the layer structure by mergingflattening related layers that need to be turned onoff together into a single layer For example the label ldquoNEWrdquo and the blue banner are merged into a single layer so you can show or hide them with a single click
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
34
2 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 noneditable To rasterize layer effects or text layers create an empty layer select both and merge using Layers gt Merge Layers or CTRL + ECMD + E
bull Dynamic Media Classic cannot group or link layers All layers in a group or linked set will be converted to separate layers that are no longer groupedlinked
bull Layer masks will be converted to transparency on upload
bull Adjustment layers are not supported and will be discarded
bull Fill layers such as Solid Color layers will be rasterized
bull Smart Object layers and vector layers will be rasterized into normal images on upload and Smart Filters will be applied and rasterized
bull Text layers will also be rasterized unless you use the Extract Text option mdash see below for more information
bull Most layer effects will be ignored and only a few blend modes are supported If in doubt add simple effects in Dynamic Media Classic (such as inner or drop shadows inner or outer glows) or use a blank layer to merge and rasterize the effect in Photoshop
Working with Fonts 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 companyrsquos responsibility to obtain a license to use a font on the web mdash 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 mdash 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 mdash 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 mdash 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
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
35
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 ldquolanguagerdquo 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 ldquoAdobe Caslon Prordquo 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
Selecting Options When Uploading Your PSDYou 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 yoursquoll 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
bull Maintain Layers This is the most important option This tells Dynamic Media Classic to create one image asset per Photoshop layer If unchecked all other options are disabled and the PSD will be flattened into a single image
bull Create Template This option takes the various generated layers and automatically creates a template by combining them back together A drawback to using the auto-generated template is that Dynamic Media Classic places all the layers in one file whereas we only need a single placeholder per layer Itrsquos easy enough to delete the extra layers but if you have many layers it is faster to recreate them Be sure to rename the new template if you donrsquot it will be overwritten the next time you re-upload the same PSD
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
36
bull Extract Text This recreates text layers in the PSD as text layers in the template using the font you uploaded This step is required if your text is on a path in Photoshop and you want to maintain that path in the template This feature requires you to use the Create Template option as the extracted text can only be created by a template generated on upload
bull Extend Layers to Background Size This setting makes each layer the same size as the overall PSD canvas This is very useful for layers that will always stay fixed in position otherwise when swapping images into the same layer you may have to reposition them
bull Layer Naming This tells Dynamic Media Classic how to name each asset generated per layer We recommend either Photoshop and Layer Name or Photoshop and Layer Number Both options use the PSD name as the first part of the name and adds either the layer name or number at the end For example if you have a PSD named ldquoshirtpsdrdquo and it has layers named ldquofrontrdquo ldquosleevesrdquo and ldquocollarrdquo if you upload using the Photoshop and Layer Name option Dynamic Media Classic would generate the Asset IDs ldquoshirt_frontrdquo ldquoshirt_sleevesrdquo and ldquoshirt_collarrdquo Using one of these options helps ensure the name is unique in Dynamic Media Classic
Creating a Template with Image Layers 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 donrsquot want to use the template created by Dynamic Media Classic
The Template Basics UI Letrsquos 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
bull PreviewWork Area This is the main window Here you can move resize and rotate layers with your mouse Layer outlines are shown as dashed lines
bull Layers This is similar to the Photoshop layers panel As you add layers to your template they will appear here Layers are stacked from top to bottom mdash the top layer in the Layers panel will be seen above the others below it in the list
bull Layer Properties Here you can adjust all the properties of a layer using numeric controls First select a layer and then adjust its properties
bull Composite URL At the bottom of the UI is the Composite URL area This will not be discussed in this chapter however here you will see your template deconstructed as a series of Image Serving URL modifiers This area is editable mdash if you are very familiar with Image Server commands you can manually edit the template here However you can break it as well Like Photoshop layer numbering starts at 0 The Canvas is layer 0 and the first layer you add yourself is layer 1 Blend modes determine how a layerrsquos pixels blend with pixels below it You can create a variety of special effects using blending modes
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
37
Using the Template Basics EditorHere are the workflow steps to start your Basic Template
1 In Dynamic Media Classic go to Build gt Template Basics You can either have nothing selected or start by selecting an image which will become the first layer of your template
2 Choose a Size and press OK This size should match the size you designed in Photoshop The template editor will load
3 If you didnrsquot 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
bull The image will automatically be resized to fit the size of the canvas If you plan to swap out your high-resolution images then you would typically bring in one of your large (2000 px) P-TIFF images and use it as a placeholder
bull This should be the bottom-most layer of your template however you can reorder the layers later
4 Resize or reposition the layer directly in the work area or by adjusting the settings in the Layer Properties panel
5 Drag in additional image layers as needed Add layers effects if you want as well See the topic Adding Layer Effects below
6 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 mdash it is not changeable yet
Adding Layer Effects The Image Server supports a few programmatic layer effects mdash special effects that change the appearance of a layerrsquos 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
bull Drop Shadow Applies a shadow outside the layerrsquos boundaries positioned by an x and y pixel offset
bull Inner Shadow Applies a shadow inside the layerrsquos boundaries positioned by an x and y pixel offset
bull Outer Glow Applies a glow effect evenly around all edges of the layer
bull Inner Glow Applies a glow effect evenly inside all edges of the layer
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 about Adding Layer Effects
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
38
Adding Parameters 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 ($) mdash for example if you create a parameter called ldquosizerdquo to change the size of a layer Dynamic Media Classic will rename your parameter $size
If you donrsquot add a parameter for a property that property remains hidden in the Dynamic Media Classic database and doesnrsquot show up in the URL
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
In this URL a parameter called $image is used to call a different photo There are no parameters for rotation or position so even if you call a different image it will always be rotated and positioned in this way
However in this example rotation position and image source all have exposed parameters as $angle $position and $image Therefore you can easily manipulate all three values
Without parameters your URLs would typically be much longer especially if you also are 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 donrsquot need to set a parameter
Creating ParametersThis is the workflow for creating parameters
1 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
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
39
Tip
Best Practice
2 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
bull For example if you add a layer and keep it at its default xy position of 00 Dynamic Media Classic will not expose a Position property To fix move the layer at least one pixel Now Dynamic Media Classic will expose Position as a property you can parameterize
bull To add a parameter to the showhide property (which turns the layer on and off ) click the Show or Hide Layer icon to toggle the layer off (you can turn it back on afterwards if you want) Dynamic Media Classic will now expose a Hide property that can be parameterized
3 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 ldquolayer_2_srcrdquo to ldquobannerrdquo
4 Press Close to exit the Parameters screen
5 Repeat this process for other layers by clicking the Parameters button and adding and renaming parameters
6 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
Canrsquot add a parameter because you donrsquot see the property Just change the property of the layer from its default (by moving resizing hiding etc) and you should now see that property exposed
Learn more about Template Parameters
Creating a Template with Text Layers Now yoursquoll learn how to create a Basic Template that includes text layers
Understanding Dynamic Text 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 ldquoSalerdquo and ldquoNewrdquo) can be rasterized and treated as images because their text does not need to change
However what if you needed to
bull Add a label to say ldquo25 Offrdquo with the value of 25 being variable
bull Add a text label with the name of the product on top of the image
bull Localize your layers into different languages depending on the country in which your template is seen
In that case yoursquod want to add some dynamic text layers with parameters to control the text andor formatting
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
40
To create text you need to upload some fonts mdash 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
RTF and Text Parameters 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 amptext=b1 Hello the Image Server would generate an image with the word ldquoHellordquo 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
Creating Text Layers You can create text layers in a template in Dynamic Media Classic in the following two ways
1 Text tool in Dynamic Media Classic Wersquoll discuss this method below The Template Basics editor has a tool that lets you create a text box enter text and format the text Dynamic Media Classic generates the RTF as needed and places it in a separate layer
2 Extract Text (on upload) The other method is to create the text layer in Photoshop and save it in the PSD as a normal text layer (instead of rasterizing it as an image layer) You then upload the file to Dynamic Media Classic and use the Extract Text option Dynamic Media Classic will convert each Photoshop text layer to an Image Serving text layer using RTF commands If you use this method make sure you first upload your fonts to Dynamic Media Classic otherwise Dynamic Media Classic will substitute a default font on upload and there is no easy way to re-substitute the correct font
Template Basics Text Editor
The Text Editor 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
Yoursquoll 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
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
41
Using the Text Editor Here are the workflow steps for adding text inside the Template Basics build page
1 Click the Text tool button at the top of the build page
2 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
3 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 ldquoHi Name Now is the time to saverdquo Later yoursquod 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
4 To format your text select it by dragging with your mouse and choose a formatting control in the UI
bull Donrsquot forget to select the text first Otherwise you wonrsquot be able to apply any formatting
bull There are many formatting options Some of the most common are font (face) font size and font color as well as leftcenterright justification
bull To choose a different font make sure you select the text and open the Font menu The editor will show a list of all fonts uploaded to Dynamic Media Classic If a font is also installed on your computer it will show up in black If it is not installed on your computer it will show in red However it will still render in the preview window when you click Apply You only need to upload fonts to Dynamic Media Classic to make them available to anyone using Dynamic Media Classic Once you publish the Image Server will use those fonts to generate the text mdash your users do not need to install any fonts to see the text you create because it part of an image
bull Unlike Photoshop and Illustrator the Image Server can align your text vertically in the text box The default is top alignment To change this select your text and choose Middle or Bottom from the Vertical Alignment menu
bull If you make the text too large for the box (or your text box is too small) all or part of it will get clipped and disappear Reduce the font size or make the box larger
5 Click Apply to see your changes take effect in the work area window You must click Apply or else you will lose your edits
6 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
Adding Parameters to Text Layers 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
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
42
Sample RTF
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 mdash that is the text itself
bull There is a reference to the font Poor Richard mdash this is where fonts are selected
bull You can see an RGB value red56green53blue4 mdash this is the text color
bull Although the font size of 20 you donrsquot see the number 20 However you do see a command fs40 mdash for some odd reason RTF measures fonts as half-points Thus fs40 is the font size
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
Adding Parameters to Text LayersHere are the steps to add parameters to text layers
1 Click the Parameters button (a ldquoPrdquo) next to the name of the text layer for which you want to create parameters The Parameters screen opens The Common tab lists each property on the layer and its value Here you can add regular layer parameters
2 Click on the Text tab Here you can see the RTF at the top the parameters you add will be beneath that
3 To add a parameter first highlight the value you want to change and click the Add Parameter button Make sure you only select the values for commands and not the entire command itself For example to set a parameter for the font name in the sample RTF above I would only highlight ldquoPoor Richardrdquo and add a parameter to that but not also the ldquof0rdquo When you click Add Parameter it will appear in the list below and the parameter value will appear in red in the RTF while it is still selected If you need to remove a parameter click the checkbox next to On to turn off that parameter and it will disappear
4 Click to rename your parameter to a more meaningful name
5 When you are done your RTF will be highlighted in green where parameters exist and your parameter names and values will be listed below
6 Click Close to exit the Parameters screen Then press Save to save the template If you are finished editing press Close to exit the Template Basics page
7 Click Preview to test your template in Dynamic Media Classic To test your text parameters type new text or new values in the preview window To change the font you must type the exact RTF name of the font
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
43
Tip
To add parameters to the text color separately add parameters for red green and blue For example if the RTF is red56green53blue46 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 amp$red=56amp$green=53amp$blue=46
Learn how to Create Dynamic Text Parameters
Publishing and Creating Template URLs
Create an Image Preset 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 11 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
Publish 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 mdash 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
Template URL Construction A Basic Template has the same essential URL syntax as a normal image call as explained earlier A template will typically have more modifiers mdash commands separated by an ampersand (amp) mdash 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
Correct $text=46-inch LCD HDTV
Incorrect $text$=46-inch LCD HDTV $text=46-inch LCD HDTV$ text=46-inch LCD HDTV
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
44
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 donrsquot need to set a parameter
A template without setting parameters
A template with parameters
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
45
Note
Video Overview Chapter 8
Dynamic Media Classic comes with automatic conversion of video on upload video streaming to desktop and mobile devices and adaptive video sets optimized for playback based on device and bandwidth One of the most important things about video is that the workflow is simple mdash itrsquos designed so that anyone can use it even if they are not very familiar with video technology
By the end of this chapter you will know how to
bull Upload and encode (transcode) video to different sizes and formats
bull Choose among available video presets for uploading
bull Add or edit a video encoding preset
bull Preview videos in a video viewer
bull Deploy video to web and mobile sites
bull Add captions and chapter markers to video
bull Customize and publish video viewers for desktop and mobile users
All URLs in this chapter are for illustrative purposes only they are not live links
Overview of Dynamic Media Classic Video Letrsquos first get a better sense of the possibilities for video using Dynamic Media Classic
Features and Capabilities The Dynamic Media Classic video platform offers all parts of the video solution mdash the upload conversion and management of videos the ability to add captions and chapter markers to a video and the ability to use presets for easy playback
It makes it easy to publish high-quality Adaptive Video for streaming across multiple screens including desktop iOS Android Blackberry and Windows mobile devices An Adaptive Video Set groups versions of the same video that are encoded at different bit rates and formats such as 400 kbps 800 kbps and 1000 kbps The desktop computer or mobile device detects the available bandwidth
In addition video quality is dynamically switched automatically if network conditions change on the desktop or on the mobile device Also if a customer enters full-screen mode on a desktop the Adaptive Video Set responds by using a better resolution thereby improving the customerrsquos viewing experience Using Adaptive Video Sets provides you with the best possible playback for customers playing Dynamic Media Classic video on multiple screens and devices
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
46
Note
Video Management Working with video can be more complex than working with still digital images With video you deal with numerous formats and standards and the uncertainty of whether your audience will be able to play back your clips Dynamic Media Classic makes it easy to work with video providing many powerful tools ldquounder the hoodrdquo but removing the complexity of working with them
Dynamic Media Classic recognizes and can work with many different source formats available However reading the video is only one part of the effort mdash you must also convert the video to a web-friendly format Dynamic Media Classic takes care of this by allowing you to convert video to H264 video
Converting the video yourself can get very complicated using the many professional and enthusiast tools available Dynamic Media Classic keeps it simple by offering easy presets that are optimized for different quality settings If you want something more custom however you can also create your own presets
If you have a lot of video yoursquoll appreciate the ability to manage all your assets along with your images and other media in Dynamic Media Classic You can organize catalog and search your assets including video assets with robust XMP metadata support
Video Playback Similar to the problem of converting video to make it web-friendly and accessible is the problem of implementing and deploying video to your site Choosing whether to purchase a player or build your own making it compatible for various devices and screens and then maintaining your players can be a full-time occupation
Again Dynamic Media Classicrsquos approach is to allow you to choose the preset and viewer that fits your needs You have many different viewer choices and a library of numerous presets available
You can easily deliver video to the web and mobile devices as Dynamic Media Classic supports HTML5 video which means you can target users running various browsers as well as Android and iOS platform users Streaming video allows smooth playback of longer or high-definition content while progressive HTML5 video has presets optimized for the small screen
Viewer Presets for video are partially configurable depending on the viewer type
Just like all viewers integration is via a single Dynamic Media Classic URL per viewer or video
As a best practice use Dynamic Media Classic HTML5 Video viewers The presets used in HTML5 Video viewers are robust video players By combining into a single player the ability to design the playback components using HTML5 and CSS have embedded playback and use adaptive and progressive streaming depending on the browserrsquos capability you extend the reach of your rich media content to desktop tablet and mobile users and ensure a streamlined video experience
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
47
One last note about Dynamic Media Classic video that may apply to some customers not all companies may have automatic conversion streaming or Video Presets enabled for their account If for some reason you are unable to access the URLs for streaming video this may be the reason You will still be able to upload and publish progressively downloaded video and have access to all the video viewers However to take advantage of the full Dynamic Media Classic video capabilities you will want to contact your Account Manager or Sales Manager to get these features enabled
Learn more about Video in Dynamic Media Classic
Video 101
Basic Video Concepts and Terminology Before we get started letrsquos discuss some terms with which you should be familiar in order to work with video These concepts are not specific to Dynamic Media Classic and if you are going to be managing video for a professional website you would do well to get some further education on the subject Wersquoll recommend some resources at the end of this section
bull Encodingtranscoding Encoding is the process of applying video compression to convert raw uncompressed video data into a format that makes it easier to work with Transcoding while similar refers to converting from one encoding method to another
raquo Master video files created with video editing software are often too large and not in the proper format for delivery to online destinations They are typically encoded for quick playback on the desktop and for editing but not for delivery over the web
raquo To convert digital video to the proper format and specifications for playback on different screens video files are transcoded to a smaller efficient file size optimal for delivery to the web and to mobile devices
bull Video compression Reducing the quantity of data used to represent digital video images and is a combination of spatial image compression and temporal motion compensation
raquo Most compression techniques are lossy which means they throw out data in order to achieve a smaller size
raquo For example DV video is compressed relatively little and allows you to easily edit the source footage however it is much too large to use over the web or even put on a DVD
bull File formats The format is a container similar to a ZIP file that determines how files are organized in the video file but typically not how they are encoded
raquo Common files formats for source video include Windows Media (WMV) QuickTime (MOV) Microsoft AVI and MPEG among others Formats published by Dynamic Media Classic are MP4
raquo A video file usually contains multiple tracks mdash a video track (without audio) and one or more audio tracks (without video) mdash that are interrelated and synchronized
raquo The video file format determines how these different data tracks and metadata are organized
bull Codec A video codec describes the algorithm by which a video is encoded through the use of compression Audio is also encoded through an audio codec
raquo Codecs minimize the amount of information required to play video Rather than information about each individual frame only information about the differences between one frame and the next are stored
raquo Because most videos change little from one frame to the next codecs allow for high compression rates which results in smaller file sizes
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
48
raquo A video player decodes the video according to its codec and then displays a series of images or frames on the screen
raquo Common video codecs include H264 On2 VP6 and H263
640 x 352 = 225280 pixels
320 x 176 = 56320 pixels
bull Resolution Height and width of the video in pixels
raquo The size of your source video is determined by your camera and output from your editing software An HD camera will usually create high resolution 1920 x 1080 video however to playback smoothly on the web you would downsample (resize) it to a smaller resolution such as 1280 x 720 or 640 x 480 or smaller
raquo The resolution has a direct impact on the file size as well as the bandwidth required to play back that video
bull Display aspect ratio Ratio of width of a video to the height of a video When the aspect ratio of the video doesnrsquot match the ratio of the player you may see ldquoblack barsrdquo or empty space Two common aspect ratios used to display video are
raquo 43 (1331) Used for almost all standard-definition TV broadcast content
raquo 169 (1781) Used for almost all wide-screen high-definition TV content (HDTV) and movies
bull Bit ratedata rate The amount of data that is encoded to make up a single second of video playback (in kilobits per second)
raquo Generally the lower the bit rate the more desirable it is for the web because it can be downloaded more quickly However it can also mean the quality is low because of compression loss
raquo A good codec should balance low bit rate with good quality
bull Frame rate (frames per second or FPS) The number of frames or still images for each second of video Typically North American TV (NTSC) is broadcast in 2997 FPS European and Asian TV (PAL) is broadcast in 25 FPS and film (analog and digital) are typically in 24 (23976) FPS
raquo To make things more confusing there are also progressive and interlaced frames Each progressive frame contains an entire image frame whereas interlaced frames contain every other row of pixels in an image frame The frames are then played back very quickly and appear to blend together Film uses a progressive scan method whereas digital video is typically interlaced
raquo In general it doesnrsquot matter whether your source footage is interlaced or not mdash Dynamic Media Classic will preserve the scan method in the converted video
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
49
raquo StreamingProgressive delivery Video streaming is the sending of media in a continuous stream that can be played as it arrives while progressively downloaded video is downloaded like any other file from a server and cached locally in your browser
Hopefully this primer helps you understand the various options involved in using Dynamic Media Classic video
Video Workflow When working with video in Dynamic Media Classic you follow a basic workflow that is similar to working with images
1 Start by uploading video files to Dynamic Media Classic To do this open the Tools Menu at the bottom of the Dynamic Media Classic extension panel and choose Upload to Dynamic Media Classic gt Files to [folder name] or Upload to Dynamic Media Classic gt Folders to [folder name] ldquoFolder namerdquo will be whatever folder you are currently browsing with the extension Video files can be big so we recommend using FTP for uploading large files As part of the upload choose one or more Video Presets for encoding your videos Video can be transcoded to MP4 video on upload See the Video Presets topic below for more information on using and creating encoding presets Learn about Uploading and Encoding Videos
2 Select or select and modify a video Viewer Preset and preview your video You would either choose a pre-built Viewer Preset or customize your own If you are targeting mobile users you donrsquot have to do anything here because mobile platforms do not require a viewer or a preset Learn more about Previewing Videos in a Video Viewer and Adding or Editing a Video Viewer Preset
3 Run a Video Publish get the URL and integrate The main difference between this step for the video workflow versus the image workflow is that you will run a special Video Publish instead of (or perhaps as well as) the standard Image Serving publish Video viewer integration on the desktop works exactly like image viewer integration however for mobile devices itrsquos even simpler mdash all you need is the URL to the video itself
About Transcoding Transcoding was defined earlier as the process of converting from one encoding method to another In the case of Dynamic Media Classic it is the process of converting your source video from its current format to MP4 This is required before your video will appear in the desktop browser or on a mobile device
Dynamic Media Classic can handle all the transcoding for you a huge benefit You can transcode the video yourself and upload the files already converted to MP4 but that can be a complex process that requires sophisticated software Unless you know what you are doing you typically wonrsquot get good results on your first attempt
Not only does Dynamic Media Classic convert the files for you it also makes it easy by providing easy-to-use presets You really donrsquot need to know much about the technical side of this process mdash all you should know is roughly the final size(s) that you want to get out of the system and a sense of the bandwidth your end users have
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
50
While the pre-built presets are handy and cover most needs sometimes you want something more custom In that case you can create your own encoding preset In Dynamic Media Classic an encoding preset is called a Video Preset This will be explained later in this chapter
About Streaming Another major feature worth noting is video streaming a standard feature of the Dynamic Media Classic video platform Streaming media is constantly received by and presented to an end-user while being delivered This is significant and desirable for a number of reasons
Streaming typically requires less bandwidth than progressive download because only the portion of the video that is watched is actually delivered The Dynamic Media Classic video streaming server and viewers use automatic bandwidth detection to deliver the best stream possible for a userrsquos internet connection
With streaming the video starts playing sooner than it does using other methods It also makes more efficient use of network resources because only the parts of the video that are viewed are sent to the client
The other delivery method is progressive download Compared to streaming video therersquos really only one consistent benefit to progressive download mdash you donrsquot need a streaming server to deliver the video And this is of course where Dynamic Media Classic comes in mdash Dynamic Media Classic has a streaming server built into the platform so you do not need the hassle or extra cost of maintaining this dedicated piece of hardware
Progressive download video can be served from any normal web server While this can be convenient and potentially cost-effective keep in mind that progressive downloads have limited seek and navigation capabilities and users can access and repurpose your content In some situations such as playback behind very strict network firewalls streaming delivery can be blocked in these cases rollback to progressive delivery can be desirable
Progressive download is a good choice for hobbyists or websites that have low traffic requirements if they donrsquot mind if their content is cached on a userrsquos computer if they only need to deliver shorter length videos (under 10 minutes) or if their visitors cannot receive streaming video for some reason
You will need to stream your video if you need advanced features and control over video delivery andor if you need to display video to larger audiences (for example several hundred simultaneous viewers) track and report usage or viewing statistics or want to offer your viewers the best interactive playback experience
Finally if you are concerned about securing your media for intellectual property or rights-management issues streaming provides more secure delivery of video because the media does not get saved to the clientrsquos cache when streamed
Video Presets When you upload your video you choose from one or more presets that contain the settings for converting your master video to a web-friendly format through encoding Video Presets come in two flavors Adaptive Video Presets and Single Encoding Presets
See Available Video Presets
Adaptive Video Presets are activated by default which means they are available for encoding If you wish to use a Single Encoding Preset your administrator will need to activate it for it to appear in the list of Video Presets
Learn how to Activate or De-activate Video Presets
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
51
You may choose either one of many pre-built presets that come with Dynamic Media Classic or you may create your own however no presets are selected for upload by default In other words if you do not select a Video Preset at upload your video will not be converted and potentially may be unpublishable However you can convert the video yourself offline and upload and publish just fine Video Presets are only required if you want Dynamic Media Classic to do the conversion for you
On upload you select a Video Preset by choosing Video Options in the Job Options panel You then choose whether you want to encode for Computer Mobile or Tablet
bull Computer is for desktop use Here you will typically find larger presets (such as HD) that consume more bandwidth
bull Mobile and Tablet create MP4 video for devices such as iPhones and Android smartphones The only difference between Mobile and Tablet is that the Tablet presets typically have a higher bandwidth because they are based on WiFi usage Mobile presets are optimized for slower 3G usage
Questions to Ask Yourself Before Choosing a Preset When choosing a preset you should know your audience as well as your source footage What do you know about your customer How are they watching the video mdash with a computer monitor or a mobile device
What resolution is your video If you choose a preset that is larger than the original you may get a blurrypixilated video It is okay if your video is larger than the preset but do not choose a preset larger than your source video
What is its aspect ratio If you see black bars around the converted video then you chose the wrong aspect ratio Dynamic Media Classic cannot auto-detect these settings because it would first have to examine the file before upload
Video Options Breakdown Video Presets determine how your video will be encoded by specifying these settings If you are unfamiliar with these terms please review the topic Basic Video Concepts and Terminology above
bull Aspect ratio Usually standard 43 or wide-screen 169
bull Size This is the same as the display resolution and is measured in pixels This is related to aspect ratio At a ratio of 169 a video will be 432 x 240 pixels while at 43 it will be 320 x 240 pixels
bull FPS Standard frame rates are 30 25 or 24 frames per second (fps) depending on the video standard mdash NTSC PAL or Film This setting doesnrsquot matter because Dynamic Media Classic will always use the same frame rate as the source video
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
52
bull Format This is will be MP4
bull Bandwidth This is the desired connection speed of your targeted user Do they have a fast internet connection or a slow one Are they typically using desktop computers or mobile devices This is also related to resolution (size) because the larger the video the more bandwidth it requires
Determining the Data Rate or ldquoBit Raterdquo for Your Video Calculating the bit rate for your video is one of the least understood factors for serving video to the web but potentially the most important because it directly impacts user experience If you set your bit rate too high yoursquoll have high video quality but poor performance Users with slower internet connections will be forced to wait as the video constantly pauses as it plays back However if you set it too low the quality will suffer Inside the Video Preset Dynamic Media Classic suggests a range of data depending on your target bandwidth That is is a good place to start
However if you want to figure it out yourself yoursquoll need a bit rate calculator This is a tool commonly used by video professionals and enthusiasts to estimate how much data will fit into a given stream or piece of media (such as a DVD)
Creating a Custom Video Preset Sometimes you may find you need a special Video Preset that doesnrsquot match the settings of the built-in encoding video presets This might happen if you have custom video of a specific size such as a video created from 3D animation software or one that has been cropped from its original size Perhaps you want to experiment with different bandwidth settings to serve up higher or lower quality video Whatever the case yoursquoll need to create a custom Single Encoding Video Preset
Video Preset Workflow 1 Video Presets are located under Setup gt Application Setup gt Video Presets Here yoursquoll find a list of all the
encoding presets available to your company
bull Every streaming video account has dozens of presets out of the box and if you create your own custom presets you will see them here as well
bull You can filter by type using the drop-down menu The presets are divided into Computer Mobile and Tablet
2 The Active column allows you to choose whether you want to display all the presets on upload or only the ones you choose If you are in the US you might want to uncheck the European PAL presets and if in UKEMEA uncheck the NTSC presets
3 Click the Add button to create a custom preset This opens the Add Video Preset panel The process here is similar to creating an Image Preset
4 First give it a Preset Name to appear in the list of presets In the example above this preset is for screen capture tutorial videos
5 The Description is optional but it will give your users a tool tip that will describe the purpose of this preset
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
53
6 The Encode File Suffix will get appended to the end of the name of the video you are creating here Remember that yoursquoll have a Master Video as well as this encoded video which is a derivative of the master and that no two assets in Dynamic Media Classic can have the same Asset ID
7 Playback Device is where you choose what video file format you want (Computer Mobile or Tablet) Remember that Mobile and Tablet produce the same MP4 format Dynamic Media Classic just needs to know in which category to place the preset however the theoretical difference is that Tablet presets are typically for a faster internet connection because all support WiFi
8 Target Data Rate is something yoursquoll have to figure out for yourself however you can see a suggested range on the image below You can alternatively drag the slider to the approximate target bandwidth For a more precise figure use a bit rate calculator There is a bit of trial and error involved
9 Set your source filersquos Aspect Ratio This setting is directly tied to the size below If you choose Custom you will have to manually enter both width and height
10 If you choose an aspect ratio then set one value for Resolution Size and Dynamic Media Classic will fill in the other value automatically However for a custom aspect ratio fill in both values Your size should be in line with your data rate If you set a very low data rate and a large size you would expect the quality to be poor
11 Click Save to save your preset Unlike every other preset you do not need to publish at this point because the presets are only for uploading files Later yoursquoll have to publish out the encoded videos but the presets are for internal Dynamic Media Classic usage only
12 To verify your video preset is on the upload list go to Upload Choose Job Options and expand Video Options Your preset will be listed in the category for the playback device your chose (Computer Mobile or Tablet)
Learn more about Adding or Editing a Video Preset
Add Captions to Your VideoIn some cases it can be useful to add captions to your video mdash for example when you need to provide the video to viewers in multiple languages but do not want to dub the audio in another language or record the video again in separate languages In addition adding captions provides greater accessibility for those who are hearing impaired and use closed captioning Dynamic Media Classic makes it easy to add captions to your videos
Learn how to Add Captions to Video
Add Chapter Markers to Your VideoFor long form videos your viewers will likely appreciate the ability and convenience offered by navigating your video with chapter markers Dynamic Media Classic provides the ability to easily add chapter markers to your video
Learn how to Add Chapter Markers to Video
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
54
Best Practice
Video Implementation Topics
Publish amp Copy URL The last step in the Dynamic Media Classic workflow is to publish out your video content However video has its own publish job called Video Server publish found under Advanced
Learn how to Publish Your Video
Once you run a video publish you will be able to get a URL to access your videos and any off-the-shelf Dynamic Media Classic Viewer Presets in a web browser However if you customize or create your own Video Viewer Preset you will still need to run a separate Image Server publish
Learn how to Link a URL to a Mobile Site or a Website
Learn how to Embed the Video Viewer on a Web Page
You can also deploy your video using a third-party or custom built video player
Learn how to Deploy Video Using a Third-party Video Player
Furthermore if you also want to use the video thumbnails mdash the image extracted from the video mdash you will also need to run an Image Server publish This is because the thumbnail image for the video resides on the Image Server whereas the video itself is on the Video Server Video thumbnails can be used in video search results video playlists and can be used as the initial ldquoposter framerdquo that appears in the video viewer before the video is played
Learn more about Working with Video Thumbnails
Selecting and Customizing a Viewer Preset The process for selecting and customizing a Viewer Preset is exactly the same as the process for images You either create a new preset or modify an existing preset and save under a new name make edits and run an Image Serving publish All Viewer Presets are published to the Image Server not just presets for images and therefore you must run an image publish in order to see your new or modified presets
Run an Image Serving publish after your Video Server publish to publish out any thumbnail images associated with your videos
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
55
Video Search Engine Optimization Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engines While search engines excel at gathering information about text-based content they cannot adequately acquire information about video unless this information is provided to them Using Dynamic Media Classic Video SEO you can use metadata to provide search engines with descriptions of your videos The Video SEO feature lets you create Video Sitemaps and Media RSS (mRSS) feeds
bull Video Sitemap Informs Google exactly where and what the video content is on a site Consequently videos are fully searchable on Google For example a Video Sitemap can specify the running time and categories of videos
bull mRSS feed Used by content publishers to feed media files into Yahoo Video Search Google supports both the Video Sitemap and Media RSS (mRSS) feed protocol for submitting information to search engines
When you create Video Sitemaps and mRSS feeds you decide which metadata fields from video files to include In this way you describe your videos to search engines so that search engines can more accurately direct traffic to videos on your web site
Once the Sitemap or feed is created you can have Dynamic Media Classic automatically publish it manually publish it or simply generate a file that you can edit later Additionally Dynamic Media Classic can automatically generate and publish this file each day
At the end of the process you will submit the file or URL to your search engine This task is done outside of Dynamic Media Classic however we will discuss it briefly below
Requirements for SitemapmRSS Files In order for Google and other search engines to not reject your files they must be in the proper format and include certain pieces of information Dynamic Media Classic will generate a properly formatted file however if the information is not available for some of your videos they will not be included in the file
The required fields are Landing Page (the URL for the page that is serving the video not the URL to the video itself ) Title and Description Each video must have an entry for these items or it will not get included in the generated file Optional fields are Tags and Category
There are two other required fields mdash Content URL the URL to the video asset itself and Thumbnail a URL to a thumbnail image of the video mdash however Dynamic Media Classic will automatically fill in those values for you
The recommended workflow is to embed this data into your videos prior to upload using XMP metadata and Dynamic Media Classic will extract it upon upload Yoursquod use an application such as Adobe Bridge mdash which is included with all Adobe Creative Cloud applications mdash to populate the data into standard metadata fields
By following this method you will not have to manually enter this data using Dynamic Media Classic However you could also use Metadata Presets in Dynamic Media Classic as a quick way of entering the same data each time
For more information on that topic see Viewing Adding and Exporting Metadata
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
56
Once the metadata has been populated you will be able to see it on the Detail View for that video asset Keywords may also be present but those are located under the Keywords tab
Learn more about Adding Keywords
Learn more about Video SEO
Learn about Settings for Video SEO
Setting Up Video SEO Setting up Video SEO starts with choosing what type of format you want the generation method and which metadata fields should go into the file
1 Go to Setup gt Application Setup gt Video SEO gt Settings
2 On the Generation Mode menu choose a file format The default is Off so to enable it choose either Video Sitemap mRSS or Both
3 Choose whether to generate automatically or manually For simplicity we recommend you set it to Automatic Mode If you choose Automatic then also set the Mark for Publish option or else the file(s) wonrsquot go live The Sitemap and RSS files are types of an XML document and must be published like any other asset Use one of the manual modes if you donrsquot have all the information ready now or only want to do a one-time generation
4 Populate the metadata tags that will be used in the files This step is not optional At a minimum you must include the three fields marked with an asterisk () Landing Page Title and Description To use your metadata for these tasks drag and drop the fields from the Metadata panel on the right into a corresponding field on the form Dynamic Media Classic will automatically populate the placeholder field with actual data from each video You do not have to use metadata fields You could instead type some static text here but that same text will appear for each video
5 Once yoursquove entered information in the three required fields Dynamic Media Classic will enable the Save and Save amp Generate buttons Click one to save your settings Use Save if you are in Automatic Mode and want to have Dynamic Media Classic generate the files later Use Save amp Generate to create the file immediately
Testing and Publishing Your Video Sitemap mRSS Feed or Both FilesGenerated files will appear in the root (base) directory of your account
These files must be published as the Video SEO tool cannot run a publish by itself As long as they are marked for publish they will be sent to the publish servers the next time a publish is run
After publishing your files will be available using this URL format
Example
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
57
Submitting to Search Engines The final step of the process is to submit your files andor URLs to search engines Dynamic Media Classic cannot do this step for you however assuming you submit the URL and not the XML file itself your feed should be updated the next time your file is generated and a publish occurs
The method for submitting to your search engine will vary however for Google you use Google Webmaster Tools Once there go to Site Configuration gt Sitemaps and click the Submit a Sitemap button Here you can place the Dynamic Media Classic URL to your SEO file(s)
Video SEO ReportDynamic Media Classic provides a report to show you how many videos were successfully included in the files and more importantly which were not included due to errors To access the report go to Setup gt Application Setup gt Video SEO gt Report
Mobile Implementation for MP4 Video Dynamic Media Classic does not include Viewer Presets for mobile because viewers are unnecessary to play back video on supported mobile devices As long as you encode to the H264 MP4 format mdash either by converting on upload or pre-encoding on your desktop mdash supported tablets and smartphones will be able to play your videos without needing a viewer This is supported on Android and iOS (iPhone and iPad) devices
The reason that no viewer is required is because both platforms have native H264 support You can either embed the video in an HTML5 web page or embed the video in the application itself and the Android and iOS operating systems will provide a controller to play back the video
Because of this Dynamic Media Classic does not give you a URL to a viewer for mobile devices but instead gives you a URL directly to the video In the Preview window for an MP4 video there will be links for Desktop and Mobile The Mobile URL points to the published video
One important thing to note about published video is that the URL lists the full path to the video not just the Asset ID When dealing with images you call the image by its Asset ID regardless of the folder structure However for video you must specify the folder structure as well In the URLs above the video is stored in the path
This can also be expressed as company namefolder pathname of video
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
58
Method 1 Browser Playback mdash HTML5 Code To embed your MP4 video in a web page use the HTML5 ltvideogt tag
This method will work for desktop web as well however you may run into trouble with browser support mdash not all desktop web browsers natively support H264 video including Firefox
Method 2 App Playback on iOS mdash Media Player Framework Alternatively you can embed the Dynamic Media Classic MP4 video in your mobile application code Here is a generic example for iOS using the Media Player framework that is given for illustrative purposes only
Additional ResourcesWatch the Dynamic Media Skill Builder Video in Dynamic Media Classic on-demand webinar to learn how to use the video features in Dynamic Media Classic
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
59
Note
Smart ImagingChapter 9
One of the most important aspects of the customer experience on your website or mobile site or app is the page load time Customers will often abandon a site or app if a page takes too long to load Images constitute the majority of the page load time Smart Imaging in Dynamic Media Classic enhances image delivery performance by automatically optimizing image format and quality based on client browser capabilities It does this by leveraging Adobe Sensei AI capabilities and working with existing Image Presets Smart Imaging reduces image sizes by 30 percent or more mdash that translates to faster page loads and better customer experiences
Smart Imaging also benefits from the added performance boost of being fully integrated with the best-in-class premium service from Adobe This service finds the optimal internet route between servers networks and peering points that has lowest latency andor packet loss rate than the default route on the Internet
Learn more about Smart Imaging
Smart Imaging BenefitsBecause images constitute the majority of a pagersquos load time the performance improvement from Smart Imaging can have a profound impact on business KPIs such as higher conversion time spent on site and lower site bounce rate
How Smart Imaging WorksAs noted earlier Smart Imaging leverages Adobe Sensei AI capabilities and works with existing Image Presets to automatically convert images to optimal next-generation image formats such as WebP while maintaining visual fidelity
Learn more about How Smart Imaging Works including details such as supported image formats (and what happens if you donrsquot use those formats) and its impact on existing Image Presets that are in use
Impacts of Smart ImagingYou likely are concerned that yoursquoll have to make changes to your URLs Image Presets and code on your site to take advantage of Smart Imaging If you meet the prerequisites for using Smart Imaging and yoursquore only working with images in the supported JPEG and PNG image formats you donrsquot have to make any changes
Smart imaging works with images delivered over HTTP HTTPS and HTTP2
Moving over to Smart Imaging clears your cache at the CDN The cache in the CDN is typically built up again within one or two days
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
60
Smart Imaging is included with your existing license of either Dynamic Media Classic There are no additional costs for this feature To take advantage of it you must meet two requirements have an Adobe-bundled CDN and a dedicated domain Then you must enable it for your account because it is not automatically enabled
Enabling Smart Imaging starts with you sending technical support a request by emailing s7supportadobecom Theyrsquoll work with you to set up a custom domain that yoursquoll associate with Smart Imaging Yoursquoll change one parameter related to caching (Time To Live or TTL) and support will clear the cache You can also do an optional staging step if you like before pushing to production Then when Smart Imaging is turned on yoursquoll deliver customers smaller sized images but with the same quality they requested That means they experience faster page load times mdash and all of this is done automatically because Adobe Sensei helps choose the most efficient size
Once yoursquove enabled Smart Imaging you will want to verify that itrsquos working as expected
You probably have additional questions about Smart Imaging Wersquove compiled a list of frequently asked questions (FAQs) with answers Read the FAQs
Additional ResourcesWatch the Dynamic Media Classic Optimizing Page Performance Skill Builder on-demand webinar to learn more about Smart Imaging
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
61
Valuable Reports for AdministratorsChapter 10
In this final chapter we just want you to know about two valuable reports you might consider setting up if you are an administrator the Bandwidth amp Storage report and the Image Errors report
Bandwidth amp Storage ReportThe Bandwidth amp Storage report details how much Image Server bandwidth has been consumed per month and the storage you are taking up on Dynamic Media Classic Storage is a contracted amount so itrsquos important to check and ensure you remain under your limit to avoid overage fees
Image Errors ReportWhenever a URL requests an image that is missing the Image Server generates an error You can set up a default image to appear in these cases but you still should be aware of the errors The Image Errors report gives you a list of the 20 most frequent image errors over the past 24 hours with details such as how many times the error has occurred the image giving the error and the page with the problem image If the Response is ldquoDEFAULTrdquo this means that your default image was served instead
The Bandwidth amp Storage report shows this account as way over its 30GB storage limit
Image Error report
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-
62
Conclusion
We hope yoursquove found the content in this best practices guide helpful in getting started with or getting more out of using your powerful rich media solution
To learn more about Dynamic Media Classic take a look at the following resources
bull Dynamic Media Classic on Experience League ndash Get to Value
bull Dynamic Media Classic on Experience League ndash Do More
bull The Dynamic Media Newsletter Archives
bull Dynamic Media Newsletter Subscription Page
bull Dynamic Media Classic Documentation
bull Rich Media Blog Posts
Adobe the Adobe logo Creative Cloud Illustrator InDesign Photoshop and Sensei are either registered trademarks or trademarks of Adobe in the United States andor other countries All other trademarks are the property of their respective owners
copy 2020 Adobe All rights reserved
- Welcome to the Dynamic Media Classic Best Practices Guide
- Chapter 1
-
- Overview of Dynamic Media Classic
-
- Chapter 2
-
- The Dynamic Media Classic Main Workflow and Previewing Assets
-
- Chapter 3
-
- Determine Your Folder Structure and File Naming Convention
-
- Chapter 4
-
- Image Presets
-
- Chapter 5
-
- Image Swatch Spin and Mixed Media Sets
-
- Chapter 6
-
- Cropping Adjusted Images and Zoom Targets
-
- Chapter 7
-
- Introduction to Basic Templates
-
- Chapter 8
-
- Video Overview
-
- Chapter 9
-
- Smart Imaging
-
- Chapter 10
-
- Valuable Reports for Administrators
-
- Conclusion
-