Changing header image for mobile

Marketing & Content Hub Blog, Website & Page Publishing
1

Is there a way to change the header image for mobile view vs. desktop view? So people viewing on desktop will see image 1 and people viewing on mobile device will see image 2.

2

Hi @DWang,

Thanks for reaching out!

I wanted to add some experts to our conversation.

Hi @Anton, @Teun, @alyssamwilie, @LMeert - Do you have any advice for @DWang?

Thanks!

Best,

Kristen

3

Hi @DWang ,

Do you use custom modules? What I typically do is use a custom module with a picture field. The picture field looks like this:

{
 "name": "picture",
 "label": "Picture",
 "sortable": false,
 "required": false,
 "locked": false,
 "children": [
 {
 "name": "desktop",
 "label": "Image: Desktop",
 "help_text": "",
 "sortable": false,
 "required": true,
 "locked": false,
 "responsive": false,
 "resizable": false,
 "type": "image",
 "default": {
 "src": "",
 "alt": null
 }
 },
 {
 "name": "tablet",
 "label": "Image: Tablet",
 "help_text": "",
 "sortable": false,
 "required": false,
 "locked": false,
 "responsive": false,
 "resizable": false,
 "type": "image",
 "default": {
 "src": "",
 "alt": null
 }
 },
 {
 "name": "mobile",
 "label": "Image: Mobile",
 "help_text": "",
 "sortable": false,
 "required": false,
 "locked": false,
 "responsive": false,
 "resizable": false,
 "type": "image",
 "default": {
 "src": "",
 "alt": null
 }
 },
 {
 "name": "desktop_large",
 "label": "Image: Desktop (> 1560px)",
 "help_text": "",
 "sortable": false,
 "required": false,
 "locked": false,
 "responsive": false,
 "resizable": false,
 "type": "image",
 "default": {
 "src": "",
 "alt": null
 }
 }
 ],
 "type": "group",
 "default": {}
}

The HTML looks like this:

<picture class="c-picture">
 <source media="(max-width: 767px)" srcset="{{module.mobile.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=500 500w,
 {{module.mobile.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1000 1000w,
 {{module.mobile.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1500 1500w">
 <source media="(max-width: 1023px)" srcset="{{ module.tablet.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=800 800w,
 {{ module.tablet.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1000 1000w,
 {{ module.tablet.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1500 1500w,
 {{ module.tablet.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=2000 2000w">
 <source media="(max-width: 1559px)"
 srcset="{{ module.desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1100 1100w,
 {{ module.desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1500 2000w,
 {{ module.desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=2500 2500w">
 <source media="(min-width: 1560px)"
 srcset="{{ module.large_desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1100 1100w,
 {{ module.large_desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=1500 1500w,
 {{ module.large_desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=2000 2000w,
 {{ module.large_desktop.src|replace('/hubfs/' + hub_id, '/hub/' + hub_id + '/hubfs') }}?width=2500 2500w">
 <img data-src="{{ module.desktop.src }}" alt="{{ module.desktop.alt }}" class="c-picture {{aClass}} lazy"
 width="{{ module.desktop.width }}" height="{{ module.desktop.height }}" loading="lazy">
</picture>
4

Hi @DWang,

sire it’s possible. But as @Teun mentioned - the easiest way would be a custom module.

My personal “go-to” method is different and might be a bit on the easier side. Just create two image fields(desktop and mobile) and write your module like this:

{% require_css %}
<style>
.myHeroModule{
background-image:url('{{module.mobile_image.src}}');
background-size:cover;
background-position:center center;
min-height:480px;
max-height:760px;
width:100%;
padding:5rem 0;
}
@media screen and (min-width:1024px){
.myHeroModule{
background-image:url('{{module.desktop_image.src}}');
padding:2rem 0;
}
}
</style>
{% end_require_css %}

<div class="myHeroModule">
{# your header layout like header, text ... comes here #}
</div>

best,

Anton