Dynamic Media for transparency and Content Automation batch processing

Transcript

Dynamic Media is at the center of the content at scale and content reuse equation, providing unlimited virtual renditions of source assets. Dynamic Media virtual renditions are well known for delivering any kind of resized, cropped, rotated, flipped images all via a simple URL. These renditions do not take up space in the dam and are infinitely variable by using our 80 different image processing commands. This demonstration will provide some powerful options to extend the value of many image assets, going beyond the basics of simple resizing, to working with images needing transparency effects, further adding value to any Dynamic Media image asset. Let’s review the basics first and the URL syntax, a simple formula that always references a source file and applies effects whenever a URL is resolved or an image request is made. This image, in four different browser windows, is being requested at three different sizes and the last one is also rotated, responding to the URL commands. Using various image commands, we can affect and even create virtual images with transparency, for a variety of effects and reasons. To do this requires a source image that supports transparency, meaning it has a transparent background. Why do we care about transparency? Often the requirement is to isolate part of an image as an effect, clean up the background or add a different background or create a special shape or crop or a combination of all of these reasons. For these reasons, we need to manage and support transparency in an image. Here’s a list of image file formats that can provide transparent backgrounds. Let’s discuss how we can make some files with transparency. Two ways involve creating a new source image that has a transparent background, manually in Photoshop or as a batch upload process using a content automation effect, image cutout, applied to all incoming assets. Another approach is using vector paths that are stored inside an image file. In Photoshop, to easily create a transparent background, choose select subject, then make a layer mask out of the selection, save as PNG, one of the file types that supports transparency and upload the image to Adobe Experience Manager assets, the dam. Another technique to create transparency is to use a path that has been added to the file. Paths do not actually create transparency in the source file, but can be used in dynamic media to generate transparency via an image command upon the URL request. JPEG and TIFF files support paths. In AEM assets view, files with transparency show the checkerboard background. To use transparency in a dynamic media image, you need a URL to start with and then append some image commands to the URL. Start with any image that shows transparency and select really any dynamic media image preset as I’ll just use the base of it and add some commands to illustrate the transparency. The default file format, if we don’t specify anything, is a JPEG and this shows the transparent area with this dynamic media account’s default color, which is white. After the question mark, if you add BGC and some RGB values, dynamic media will show that color in the background. RGB values go from 0 to 255, so 200, 50, 50 makes a good red. And BGC stands for background color. To use paths, we must first know the name of the path in the image to be addressed with some dynamic media path command. This file actually has four paths to choose from that I created in Photoshop. To use path commands, get the base dynamic media URL, I copy any image preset URL and paste into a new browser window to get started. But how do we know if there are any paths in this image to use? Using rec equals image props against the dynamic media image call, we have the image server reply back with information about the image, including any included paths. What commands can we use with paths in an image? For that, I often reference the list of commands image server API page. This page lists all the 80 some commands that the image server can respond to, including a few for paths. With paths, the image server can clip around a path or crop to the edges of a path or both by combining two commands to crop to a clipped image. Consider this base image normalized to 800 pixels wide in the URL. Crop path E explicitly crops to the path in the URL path one. Clip path E clips to the edges of the path, creating a solid colored background. If we don’t specify the background color, the image server uses the account’s default background color, usually white. This combines clipping to the path and cropping to the same path by calling two different commands referencing the same path. This URL clips to a round path in the file, the oval shape. And of course, we can always affect the background color by using BGC and adding some RGB values. There is a way to batch process images upon upload to get a transparent PNG. By enabling content automation, a collection of six creative APIs, four from Photoshop and two from Adobe Lightroom, users can configure a folder to generate a new source file that has transparency. The image cutout option here called remove background will generate a new image with transparency using the same command as object select in Photoshop. To stay organized whenever I use content automation tools, I create two folders, an input folder to add files to and an output or receive folder where the results will end up. The steps to configure folders for content automation are here, but the key to this is creating a processing profile assigned to the input folder that does the action you desire. Once configured with two folders, drag source files that you want transparency from to the input folder. And after a few moments, content automation batch processing will generate new source files with transparency in the output folder. Files generated this way using content automation will automatically be related to their source or parent file. Click the chain link icon to see this file’s relationship to other files. This is very helpful for search and discovery of related content. Use an image preset to save any of these image command effects for later use. Image presets are retroactively available to be used with any dynamic media image regardless if it existed when the file was uploaded. You can access image presets in AEM assets, of course, brand portal and content hub, further amplifying content reuse options. In admin view, navigate to tools, assets, image presets, create a new image preset with a helpful name that will make sense to users. And to generate a red background, go to the advanced image modifier field and add the image modifier to be appended to the URL. Here I’ll add BGC equals 200 comma 50 comma 50. Save this image preset. Now this newly added image preset is available for use to all dynamic media assets. In assets view, I can copy this image preset URL or download the file with these effects applied, creating this file with the red background. Here are some technical best practices to consider whenever using dynamic media. Finally, a few helpful resources I often refer to are the image command reference page with all the commands documented as well as Snapshot. Snapshot is a playground of sorts where you can test out a series of commands and see the effects on any of the provided images and even paste your own dynamic media URL to test on. Thank you for watching this tutorial.