Announcements
Hello,
I need to put a picture onto eCommerce site and this is different picture per channel. Is there a way to fetch the image from media library by image name or tag?
I need a hint on react module / code / component to understand how one can achieve this.
Any help or hint is highly appreciated
Thanks in advance
Yes this is the static image. I have about 100 channels and I will upload about 100 images. I don't want to do a big switch in the source code and display an image depending on the current channel Id. I want to fetch an image by name / tag / caption. In this case I can do a logic to fetch a specific image and use it.
Otherwise I need to
- Upload 100 images
- Note the name of each image (which is always random)
- Map the file name to the channel id
- Implement a logic which will be fetching the image depending on the channel id
- Do the same for all environments (DEV/TEST/UAT)
- Have problems in the future if I need to add more channels or if existing image is deleted --> in this case I need to update the source code every time this happens
Instead I would like to
- Upload 100 images
- Give them correct names or tags or whatever
- Implement logic to fetch correct image by name / tag / caption / whatever else possible
This will allow easy configuration and I don't need to do a deployment in case more channels will come, I will have to just upload a new image instead.
The image in question is a static image or a product/category image? Is this something you are uploaded from Media gallery? In any case case, you should know the image name and you can use this URL to construct the image URL. (images-us-prod.cms.commerce.dynamics.com/.../search
Thank you JeevanG . But the problem is that I do not know the {PrimaryImageUrl} in advance. eCommerce site will give it a random name and therefore I cannot use this logic in react component to fetch some image with some name which I don't know yet. eCommerce will just give it a random name which I cannot define or change.
Thanks for your input but it does not really help me solve the problem, is there a way to fetch the image by some other attribute, say Title, tag, Commerce image name or somewhat else?
You can use the GetByIds API method to get the product details -
(https://{CSU}-rs.su.retail.dynamics.com/Commerce/Products/GetByIds?$top=1000&api-version=7.3)
Then use the returned "PrimaryImageUrl" value to generate the image URL using the below structure
(https://images-us-prod.cms.commerce.dynamics.com/cms/api/{CMS_TENANT_ID}/imageFileData/search?fileName={PrimaryImageUrl})
where
{CMS_TENANT_ID} is your CMS tenant ID
{PrimaryImageUrl} is value returned by GetByIds API
You can also use additional parameters to refine/scale images using additional query string parameters like width (w), height (h)etc.
So the URL becomes -
(https://images-us-prod.cms.commerce.dynamics.com/cms/api/{CMS_TENANT_ID}/imageFileData/search?fileName={PrimaryImageUrl}&w=0&h=772&q=80&m=8&f=jpg&cropfocalregion=true)
Thanks JeevanG. We don't have a unique site per channel. I know about the public URL and HREF but the file name is generated by site builder and the file name is always random therefore I cannot really fetch the <img> by some rule which I can define myself.
Is there a way to find the file name for resource (image) by tag or anything else? I was thinking as long as I cannot specify the file name --> is there a way to find the file name by tag / title / somewhat else?
You can use the Public URL or the HREF of the image for creating the image component once the image is uploaded to media library. However, from an overall design standpoint, if you need channel specific media/content it might be a good idea to have unique site per channel. This will allow you to have granular control over the pages and content and also manage it from site builder directly.
Thanks but this is not really what I was looking for. I need to be able access Media library from React component and fetch an image to build <img> element of my page. How one can get the image file name from Media library? Is there an API which gives you the URI for the media library container?
Hi Alex,
The Media Library allows for easy management of all your media assets.Upload, modify, replace, and delete one or many selected items.
Support for Search, Filtering, and Previews.Add metadata, manage viewport optimizations, and manage supported media such as video subtitles or captions and thumbnails.
André Arnaud de Cal...
294,000
Super User 2025 Season 1
Martin Dráb
232,850
Most Valuable Professional
nmaenpaa
101,158
Moderator