Dynamic Media Journey: The Basics, part II dm-journey-part2

Welcome to Dynamic Media Journey: The Basics, Part II where you can expect to learn the following:

See also Dynamic Media Journey; The Basics, Part I.

Anatomy of a Dynamic Media URL and how Dynamic Media delivers content dm-journey-d

After your Dynamic Media assets are uploaded and published, you can copy an asset’s generated URL and paste it into your browser to see how the asset will appear to a customer. The following copied URL for a watch image is broken down by color to make it easier to read and understand.

Anatomy of a Dynamic Media URL.

The first part of the URL in red is referencing the server domain itself. In this case, Dynamic Media is running on a generic server domain, which is https://s7d1.scene7.com/is/image/. It is easy to be able to look at a set of images and understand whether they are being served by Dynamic Media just by looking at the server domain. The URL is going to be fairly consistent. There are, however, some Dynamic Media customers that have switched over to a dedicated server domain where it might be name-of-your-company.scene7.com. A dedicated server domain is required for Smart Imaging.

The account name is the portion in purple. In this case, the account is called jpearldemo.

The asset ID or name, AdobeStock_28563982 is in green. Notice that the asset has no file extension such as .png or .jpg. When assets are ingested into Dynamic Media, the file extension is stripped out and a different kind of file is created: a pyramid-TIFF file. The pyramic-TIFF allows Dynamic Media to quickly create renditions on-the-fly.

And finally, there are some image processing parameters, ?wid=1000&fmt=jpeg&qlt=85, shown in yellow on the end.

The entire URL path is live. Try it.

With your browser window still open to the Dynamic Media URL and the watch image, let’s look closer at how you can create renditions of the image just by changing the URL.

Rendering the watch image through the URL

Begin by manually deleting only the image processing rules in the URL path; leave the server name, account name, and the asset ID or image name. Try it.

Now add an image processing parameter to the end of the URL. In the URL field, to the right of the image name, type ?wid=500, then press Enter. Try it.

Notice that a new rendition of the watch is generated. A key take away to understand from this simple exercise of changing the image’s width, is that the image seen is generated 100% dynamically.

Now change the width value of 500 pixels to 1000 pixels, and then press Enter. Try it.
The moment you press Enter, the browser goes back to the Dynamic Media Image Server. It generates a brand-new rendition of the watch, based on the new width value you just entered, then delivers the new image back to the browser, and caches it.

Dynamic Media has numerous image processing parameters that you can use to fine-tune your image assets on web pages. You can see a list of them here.

Now try adding a rotation parameter to the watch image. And the end of the URL path, immediately following wid=1000, type &rotate=90, and then press Enter. Try it.

The watch is still slightly skewed to the left. Change the rotate value of 90 to 92, and then press Enter. Try it.

Again, the moment you press Enter, a new rendition of the watch is generated nearly instantaneously. You can see the kind of performance that you get, which explains why Dynamic Media can deliver more than 800,000 image requests, per second, on a busy weekend, or major holiday.

While it is possible to change image processing parameters in a URL on an image-by-image basis, it is not an efficient method, especially if you have tens of thousands of images that make up your website. A much better approach is using image presets.

Fundamentals of creating image presets to render assets dm-journey-e

There are multiple ways and places where you are going to want to create an image or have an image be available. Traditionally, a Creative goes into Adobe Photoshop, and saves out each of these different renditions as static images.

Good: static images, each one manually created.

Now imagine the Creative Director looks at the images and says,

“I really wanted this shot so that the large hand is pointing at the four, and the small hand is pointing at the 1 to make the watch dial easier to see.”

The creative would have to reshoot all new static images again.

But, with Dynamic Media, if you have different image presets, you can use those images wherever you need them. The image presets enforce standards.

Best: one file with multiple renditions created on the fly using image presets, such as Search_Grid and Thumbnail.

Every place that you need to have a particular type of image, for example,

You want that image delivered with the same parameters wherever they are going to be used.

For a moment, let’s look at how an image preset is created in Dynamic Media.

Creating an image preset starting with the Basic tab.

In the example above, you can see that a new image preset was created with the name Medium. Dynamic Media uses an example, out-of-the-box image – the backpack – to help you see characteristics of the image preset as you create it.

The Medium image preset has a width of 500 pixels and a height of 800 pixels. In Part I of this Journey, you read about delivering assets in different formats. From the Format pull-down menu, you can choose to deliver assets as JPEG, PNG, TIFF, or several other formats. You have flexibility here.

Selecting the Advanced tab gives you options for the asset’s color space. Depending on the format you selected in the Basic tab – in the example above, JPEG was selected – you can deliver assets in RGB, Grayscale, or CMYK. From the Color Profile pull-down menu, you can select how to deliver a CMYK image asset to be used for print. Notice, too, that there are additional parameters you can apply for sharpening your images. In this case, Unsharp Mask was applied.

Creating an image preset by selecting options from the Advanced tab.

You recall in Anatomy of a Dynamic Media URL earlier, that you read about the Dynamic Media URL and how that is built. The Image Modifier text box is where you can type any additional image processing parameters that you want. The parameters get included in the preset name of the URL when your images are delivered, using the preset. In the screenshot above, the parameter bgc=451B15 was added. That is, a dark brown background color was added.

You can think of an image preset as a recipe for your images. It is going to deliver any images that use the preset, consistently, every time; it’s going to be the same. The parameter &op_brightness=+10 was also added to increase the brightness slightly.

When you are finished, you save the preset, and now it is available for all images that you have. In this case, you want to apply the Medium image preset to an image of a bowl of liquid chocolate.

Applying the image preset Medium to generate a rendition of an image.

You copy the URL, then paste it into your browser to check the appearance of the image. Try it.

In your browser, notice the name of the image preset Medium in the full URL path.

You can see the kind of clarity that is displayed in the image. That quality is partially due to the way the bowl of chocolate was shot. Also, it’s partially because with Dynamic Media, you can store larger images than what is being delivered to digital channels.

If everything looks satisfactory for your bowl of chocolate, you paste the URL into your web pages where you want the image to appear on your website.

If you look again at the watch image below, you can see that there is a Cart image preset, a Grid preset, a Large preset, a PDP-page (Product Detail Page) preset, and several others.

Static and Dynamic image presets. The watch image was rendered using the PDP-page image preset.

But what if you have to change an image on your website? For example, suppose you have done some testing, and found that the image of 120 x 120 (the Cart image preset) is not being received as you thought. You must make the image larger by increasing the width to 175 pixels and increasing the height to 175 pixels. Traditionally, you would have to go into Adobe Photoshop and re-create all of those cart images. But with Dynamic Media, you simply edit the image preset by updating the Width and Height values to 175 and save your preset, as seen in the example below.

Editing the Width and Height of the Cart image preset.

After you change your image preset, and flush out the cache, all the images get updated, and all the URLs that are being used with that preset, do not change anywhere. That means no broken links and no webpage redirects are necessary.

Image sets, Spin sets, and Mixed Media sets dm-journey-f

Some of the more popular uses of Dynamic Media, is the ability for you to create Image sets, Spin sets, and Mixed Media sets.

Image sets are typically made up of a series of image assets that are presented as a single entity. These kinds of sets give users an integrated viewing experience, where users can see different views of an item by clicking a thumbnail image. Image sets let you present alternative views of something and the viewer offers zooming tools for examining images closely. View an image set called “Running” that uses the Flyout viewer.

Here inside Dynamic Media you can see several images of running shoes. It is a product line series that sales and marketing want customers to view as a single presentation; an Image set.

The start of creating an Image set.

To create the Image set, you choose Image Set from the Create pull-down menu. Notice on the menu that there are also options to create a Mixed Media Set, a Spin Set, and a Carousel Set. You create those sets in much the same way as an Image set.

A Mixed Media set can contain images, swatch sets, spin sets, videos, and Adaptive Video sets. Try it. A Spin set simulates the real-world act of turning an object to examine it. Spin sets make it possible to view key visual details from any angle. Try it.

Creating an Image set is straightforward. You simply add the image assets that you want to include in the set.

The Image Set Editor lets you add image assets and reorder their appearance in the set.

You are required to give the set a name. Choose the name carefully because you cannot edit it later! In the example above, the set is called Running. When you are done, you save the set.

And here is the Running Image set in Experience Manager Assets.

The Running Image set in Experience Manager Assets, Card View.

Whether you have created an Image set, a Mixed Media set, a Spin set, or any other interactive media, after you create the set, you want to see how it appears and behaves for a customer. Dynamic Media has numerous built-in viewers that let you do just that.

You begin by selecting the built Image set to open it in a preview as seen in the following example.

The Running Image set in preview with Viewers option selected.

Notice in the preview that you can select the running shoe swatches and zoom in and out on the shoes. To apply a viewer to the set, you select Viewers from the pull-down menu.

The Running Image set with the Flyout viewer applied to it.

In this case, the Flyout viewer was selected. At this point, you can preview the image set in the viewer. But, it is best to see it in your browser, just how a customer sees it. You select URL in the lower left, then copy the URL and paste it into your browser. Try it.

The single URL lets you use the image set and viewer where you need them on your website. You may have noticed in the previous example that Embed is to the right of the URL button. By selecting Embed, you can copy the code for this image set/viewer, and add it into a web page or an Experience Manager Sites component.

The Flyout viewer is a default, out-of-box viewer whose properties you can edit. Or, just like creating an image preset, you can create your own, custom viewer.

Now, supposed your sales and marketing team does not like the Flyout viewer. They like the zoom feature but they want customers to see the zoom effect directly over the shoes. In such case, you simply apply the InlineZoom viewer to the image set and copy and paste its URL in your browser to see how it behaves. Try it.

When you move the mouse pointer over the shoe, you zoom in to that image, and you can see more detail as you move the pointer around. And the reason for that is simply the size of the image that was initially uploaded into Dynamic Media.

As you consider living as a consumer, or as you work in your day-to-day role, and as you go to different websites, you see things like this. Think about how that’s being done, and how you can use the power of Dynamic Media in your own work and on your company’s website.

You just read about image sets and viewers. Let’s look at a couple of other viewers and try them out on single assets. To reset the viewer, click the Refresh button in the lower-left corner.

Optional - Learn more

If to learn more about what you just read, use the materials below to explore concepts in greater detail. Otherwise, your Dynamic Media Journey is complete!

Dynamic Media tutorials

Dynamic Media viewers