Mobile compatible banners

vikram.bishnoi

Hi Experts,

As we know, we can have only one image URL in a banner (content item). But it is not necessary that that url can be compatible with mobile or small screens. In other eCommerce solutions, there are multiple images can be linked with a banner which can be used according to the screen sizes. Is there any way to achieve this in Spryker? Looking forward to expert suggestions.

Regards

Vikram

Hidran Arias

A quick solution would be to host the images with a service like cloudinary or Fastly Image Optimizer and in that way you would get the image resized automatically.

You can also customize the ContentBannerWidget scss to make the background url adapt to different media types.
You can also customize its template.

If you'd like more flexibility, you could create a custom widget to add to the HomePage template where you could serve a different image according to media type.
Please, take a look at the e-learning course: Frontend for backend developers where you can learn how to customize css, html and create a widget
https://sprykee-safari.spryker.com/learn/course/381

Hidran Arias

A quick solution would be to host the images with a service like cloudinary or Fastly Image Optimizer and in that way you would get the image resized automatically.

You can also customize the ContentBannerWidget scss to make the background url adapt to different media types.
You can also customize its template.

If you'd like more flexibility, you could create a custom widget to add to the HomePage template where you could serve a different image according to media type.
Please, take a look at the e-learning course: Frontend for backend developers where you can learn how to customize css, html and create a widget
https://sprykee-safari.spryker.com/learn/course/381

vikram.bishnoi

https://commercequest.space/discussion/comment/28574#Comment_28574

Thank you