Dynamic Media URL syntax and Image Presets best practices

In this tutorial I will provide some best practices and foundational understanding of using the dynamic media image server URL syntax to manage real time image requests. Also, I’ll provide some rationale to use dynamic media URLs instead of any image renditions that are created upon upload. Core to getting the most out of dynamic media image server calls is an understanding of that unlike the static renditions that are created for you when you upload an image into AEM by the asset compute microservice, dynamic media renditions are actually created when a URL resolves so these images are made upon request, not at the time of image upload. This fundamental difference makes using a dynamic media virtual rendition always preferred over using the pre-made renditions whenever possible. Dynamic media’s URL deliverable provides several advantages over using pre-made static renditions. Besides the tremendous savings in file storage, virtual files take no space in the dam, dynamic media renditions made at the time of request are always up to date referencing the original source image as it was last uploaded. If dynamic media is available to an AEM program, use dynamic renditions over static renditions whenever possible. The next important thing to understand is dynamic media image modifiers, image presets, always transforms the original asset into whatever is being requested. Therefore, it’s important to understand this fundamental relationship between the two parts of the formula, input source image times output modifier requests, is always in play. So, depending on the nature of the original image asset, is it sufficiently large to allow for useful down sampling, does it support transparency, if renditions are needed with different background effects, can impact your dynamic media renditions. These two truths, dynamic media renditions, are created upon request rather than being pre-made at the time of upload and are always referring to the original source image, make dynamic media powerful and flexible standard to build image content workflows upon. The URL to a dynamic media image is a simple formula that first references the original source image and then applies image modifiers, a series of image server commands to generate a just-in-time virtual rendition. There are 90 some image modifiers that can be used in a combination of ways, offering a rich and broad image processing vocabulary, Photoshop along a URL. In the real world, however, we rarely expose the collection of image modifiers along the URL, preferring to use a macro called an image preset to contain the list of image modifiers. The dynamic media URL is broken into two parts divided by the question mark. Everything to the left of the question mark instructs the URL where to reference the source image. Everything to the right are image server commands, often contained in an image preset macro shortcut. The beginning part of the URL that references the original image starts with an assigned server address and specifies the specific image server company account name, here AJHCOM, and finally the asset ID, which is the name of the image file minus the file suffix. The asset ID is unique in a company account. Since asset IDs are unique, dynamic media offers a range of duplicate name management tools that take into account the file suffix, JPEG, TIFF, GIF, PSD, as a reason to append the asset ID with an index number or simply replace the asset. To the right of the question mark is where any image server commands are referenced. These commands, when stringed together, generate the final virtual rendition. In truth, AEM assets really provides access to the shortcut image preset that hides the actual string. The image preset can be used across any image asset ID and enforces whatever collection of image commands on any image that it is referenced with. This is a powerful way to normalize and standardize image processing across the enterprise. The best practice here is to always use image presets rather than expose the image modifiers to make any kind of change management simpler for developers that rely on unchanging image preset collections of image commands. In this example of two URLs providing the exact same image results, the first one is obviously to the image preset shortcut called 1200 wide, and the second window shows the image modifiers along the URL. Image presets are accessed via the copy URL button in the admin UI on any image assets renditions page. The rendition page shows a list of image presets configured for this AEM instance.

The same image presets can be accessed in the assets UI by navigating to an image details page and go to the dynamic media icon. This shows a similar list of image presets. Select anyone and click the copy URL button. Image presets are created in the admin UI in tools, assets, image presets. This shows a list of all image presets and the option to create new ones. Creating a new image preset invokes the image preset editor and shows two tabs worth of controls that provide all the basic controls for creating an image preset designed to resize, usually down sample an image, add sharpening, choose the file format type, and also add any additional image modifiers in a wildcard field. I’ll create a new image preset, configure just a width value in pixels, choose JPEG as the format, add some sharpening, and also add one additional modifier really to illustrate that this is always an option and really a very powerful option. Once an image preset has been created, it can be used on any image in the dam and will show in the list of image presets instantly. Any dynamic media image preset is also available to download a file to a local computer by clicking the download button. These same image presets are also available to download a file from the content hub. The image server language set of command syntax rules from Cabular is quite extensive, flexible, and well documented. Here are some simple rules I’ve learned that allow for making useful URLs that perform as expected. With a valid URL to a dynamic media image, asset ID, everything after the question mark is some sort of image modifier or a user generated variable. In this URL example, $1200y$ is a user generated variable and image preset macro. The ampersand width equals 1000 is a specific image server command that affects the width in pixels, delivering a 1000 pixel wide image. It’s followed by another exact same command width command, but the last value used in this duplicated command is 800 pixels. The image server will use the last values passed for any commands, including if the commands are duplicated, so this URL creates an 800 pixel wide image. While this oddly formed URL with two duplicate width commands is shown here, remember that there is a previous width command hidden in the image preset calling to a 1200 pixel wide image. The image server commands developer reference guide provides an excellent and comprehensive documentation for all commands and macros. I keep this handy to help with complex image server URL constructions. But there are other tools to help see a URL construction and how various commands affect the image. Snapshot is a dynamic media URL playground. Snapshot was designed to show how various commands will affect an image as well as how smart imaging will optimize image requests automatically. Snapshot shows both the URL syntax for Scene 7, the original name of our image server company, and also dynamic media with open API, the newest dynamic media codebase. Click on the switch tool in the upper right hand corner to use the Scene 7 preview tools. You can use Snapshot to generate any kind of variation from the presets as thumbnails below. Add other modifiers and each change will build a URL with the correct syntax. Click the copy URL button to copy the URL and use it in any browser. Another helpful tool to see the image server code that make a dynamic media image often hidden in an image preset shortcut is adding the debugger request. Rec equals resolve. Rec equals resolve will reply back with a set of commands that construct the reply image. The dynamic media image server codebase is an extremely powerful and flexible set of tools to generate an unlimited set of virtual image renditions and as an obvious best practice, dynamic media should be leveraged over static renditions created by the dam whenever possible. Thank you for watching this tutorial.