How do I generate responsive SrcSets for Media?

2025/02/12 3:42 PM

Hi all,

I suppose this is two questions in one:

What's the current advice on whether we should be using Media Libraries in new XbyK builds?
When we were developing some sites last year, Kentico advised against using them as they were being phased out, so we put all media into the Content Hub.
Are Media Libraries still being phased out?

Main reason for asking is that I need to figure out how to produce responsive SrcSets for my media, and I think APIs such as .WithSizeConstraint(SizeConstraint.MaxWidthOrHeight(400)) only work with media libs (IMediaFileUrlRetriever) .... I think... ?


Has anyone else been able to retrieve responsive SrcSets, and if so, what API? Did you use Media Libraries?

Thanks

Environment

Answers

2025/02/12 3:54 PM
Answer

Update: Take a look at the February 2025 Refresh blog post which describes using our image tag helpers to generate srcset values.

Content hub assets

You should model all images, videos, pdfs, files, etc... as Content items with a content item asset field.

This gives you the most power to leverage things like searching for content items, smart folders, taxonomies, image optimization, and the upcoming image cropping, variants, and AIRA based focal point detection which will be released next week (February 2025 Refresh).

Administrators can define the variants you want to support for images across your Xperience solution. When a marketer uploads an image it will be optimized (on-upload) and variants will be generated (on-request) when they are used across the various channels. The variants can be referenced by code name and Xperience will generate the correct URL for them.

I believe we will also be releasing an ASP.NET Core tag helper to help you generate URLs for images based on those variant code names. You can use this to create responsive <figure> or <picture> elements with srcset="" attributes. But we will also give access to a lower level dictionary of image variant metadata with the variant code name as the "key". The metadata will include the URL, width, and height of the image.

Media libraries

Yes, media libraries will be deprecated in the future once the digital asset management capabilities in the Content hub are mature enough (within the next few Refreshes).

If a customer built a project using media libraries they can use the media library migration support we will release (same time frame as deprecation of the media library).

Integrations

As a side note, there's also an open-source community authored integration - Xperience Community: Image Processing - for dynamic resizing of image asset content items in the Content hub. I think most of its features will be handled natively with the upcoming Refresh.

2025/02/12 4:30 PM

Daniel,

If you want something OOTB, the Baseline has this using the ImageProfile and tag helper system. It currently is manually defined (you tell it what screen size to image width configurations). I'll eventually be incorporating it with the future Xperience Image Profiles

XperienceCommunity.Baseline/documentation/core/core-media-taghelpers.md at master · KenticoDevTrev/XperienceCommunity.Baseline

This shows how it works.

It works with both Media Files and Content Asset Items, it uses Liam's dynamic transformation library which is part of the Core Baseline nuget packages.

Here's the base installation for the baseline if you aren't using the starting site.
XperienceCommunity.Baseline/documentation/core/core-installation-xbyk.md at master · KenticoDevTrev/XperienceCommunity.Baseline

If you use the baseline's starting site, it's all pretty much baked in.

To answer this question, you have to login first.