Hero Banner - Mobile Specific Imagery

[colinvlasak]

Discussed this on the Knowledge Transfer. We need to determine a solution to have a separate mobile image for the Hero banner. Ideally we could keep the functionality as it is if there is no mobile specific image uploaded. If mobile specific image is uploaded it would overwrite on mobile.

cc: @kronnox @MarquiseRosier

[jindaliiita]

May be we can have something like this https://main--sunstar--hlxsites.hlx.live/_drafts/satyam/section-with-background?view-doc-source=true

[MarquiseRosier]

@jindaliiita that's really cool!

[colinvlasak]

@jindaliiita @MarquiseRosier not sure I follow this example. Can you provide a bit more detail?

[MarquiseRosier]

@jindaliiita I assigned this to you; can you give some more explanation for @colinvlasak

[jindaliiita]

@colinvlasak Could you please review the changes?

Pull Request: GitHub PR #535 Draft Preview: Hero Block Changes Documentation: Hero Block Specification

Hero Block Behavior: Two Images: The first image is used for mobile/tablet views. The second image is used for desktop views.

Single Image: If only one image is provided, the default flow will handle all views.

Let me know if you need further clarification.

[colinvlasak]

@jindaliiita looks good.

Will this Hero block style be applied to all pages or something we would add manually to pages that need a separate mobile image? Will the autoblocking still exist?

[jindaliiita]

@colinvlasak You need to manually add the images as specified earlier. For reference, you can check the Hero Block Specification documentation.

If you do not wish to add a mobile-specific image, the autoblocking feature will continue to function as usual.

[colinvlasak]

@jindaliiita thanks for clarifying! This is great. Can you move up to live?