Mobile compatible banners

vikram.bishnoi
vikram.bishnoi Spryker Solution Partner Posts: 15 🧑🏻‍🚀 - Cadet

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

Best Answer

  • Hidran Arias
    Hidran Arias Senior Technical Trainer Sprykee Posts: 82 🏛 - Council (mod)
    Answer ✓

    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

Answers

  • Hidran Arias
    Hidran Arias Senior Technical Trainer Sprykee Posts: 82 🏛 - Council (mod)
    Answer ✓

    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
    vikram.bishnoi Spryker Solution Partner Posts: 15 🧑🏻‍🚀 - Cadet