How to get product images in the list view with an API call?

Hi!

I’m working on a single-page-application with fully client-side rendered frontend (React) and Shopware acting as a headless CMS in the background. So all product-data will be pulled from the API and checkout will also use the API to send the data.

I ran into a problem, that I would need some help with.

When trying to render the product list page, I call the articles endpoint which return the basic info of all my products. The problem is that I would also need to render the main image associated with each product and this list does not expose any data from the media attached to the product.

I can get the media item(s) for a product using the Media endpoint, problem is that this one expects a MediaId which I cannot get from the listed representations of the articles.

So right now the only way I see to get the images is first making a call that gets all the products, then loop through them and get each product’s details, calling the article endpoint again with each product ID, then when I have the media IDs I loop through those and get the images for each product using the media endpoint, because that’s the only one that exposes the actual image path in the response. This seems way too complicated and slow.

Is there a smarter way to do this? Can I get ShopWare to output the 1st image’s path in the Article list response, that’s associated with the current product?

Also I saw that the paths to the images look like this:

/media/image/f5/fb/95/03_200x200.jpg

The first part up to /media/image/ is fixed, that’s straight forward, and I get the image’s filename and extension in the article detail’s response in the media object and even the file extension, which looks like this
https://image.prntscr.com/image/PC61WfqbR_OG-cXnI3_EVg.png

The problem is that I don’t know what’s the f5/fb/95/ stands for. If I could get this info from the details I could assemble the URL for the image programmatically and then I wouldn’t need the call to the media endpoint.

Any help is greatly appreciated. Thanks in advanced! :slight_smile:

This seems way too complicated and slow. Is there a smarter way to do this? Can I get ShopWare to output the 1st image’s path in the Article list response, that’s associated with the current product?

Unfortunately there’s not. And I’m not sure if you’ll be very happy trying to realize your idea with Shopware’s REST-API as it is not designed for that purpose. 

Also I saw that the paths to the images look like this:

/media/image/f5/fb/95/03_200x200.jpg

The first part up to /media/image/ is fixed, that’s straight forward, and I get the image’s filename and extension in the article detail’s response in the media object and even the file extension,

These hexadecimal numbers in front of the name is the MD5-Hash of the original image path. (There are some exceptions though).

Normally it works like this: md5(media/image/thumbnail/03_200x200.jpg) = f5fb9502a051488ca7898e8dc149741e. => /f5/fb/95 … but there are exceptions like “ad” will be filtered as the path could be blocked by adblockers.

Regards

1 Like