liquid
assign media_count = 0
assign media_count_mobile = 0
assign fallback_to_desktop =
assign media_1 = 'none'
assign media_2 = 'none'
assign media_1_mobile = 'none'
assign media_2_mobile = 'none'
assign has_only_video = false
assign has_only_video_mobile = false
# Desktop media checks
# For each media slot, check if the media is not blank and the media type matches the slot
# Need to check both (1) media picker is not blank AND (2) section.setting.media_type because user can toggle between different media types to display, but choosing "Image" doesn't clear a saved "Video" in the theme editor.
# The alternate setting (section.settings.image_1 when "Video" is selected) is only visually hidden in theme editor.
if section.settings.image_1 != blank and section.settings.media_type_1 == 'image'
assign media_1 = 'image'
assign media_count = media_count | plus: 1
endif
if section.settings.video_1 != blank and section.settings.media_type_1 == 'video'
assign media_1 = 'video'
assign media_count = media_count | plus: 1
endif
if section.settings.image_2 != blank and section.settings.media_type_2 == 'image'
assign media_2 = 'image'
assign media_count = media_count | plus: 1
endif
if section.settings.video_2 != blank and section.settings.media_type_2 == 'video'
assign media_2 = 'video'
assign media_count = media_count | plus: 1
endif
if section.settings.custom_mobile_media
# Mobile media checks
# For each media slot, check if the media is not blank and the media type matches the slot
if section.settings.image_1_mobile != blank and section.settings.media_type_1_mobile == 'image'
assign media_1_mobile = 'image'
assign media_count_mobile = media_count_mobile | plus: 1
endif
if section.settings.video_1_mobile != blank and section.settings.media_type_1_mobile == 'video'
assign media_1_mobile = 'video'
assign media_count_mobile = media_count_mobile | plus: 1
endif
if section.settings.image_2_mobile != blank and section.settings.media_type_2_mobile == 'image'
assign media_2_mobile = 'image'
assign media_count_mobile = media_count_mobile | plus: 1
endif
if section.settings.video_2_mobile != blank and section.settings.media_type_2_mobile == 'video'
assign media_2_mobile = 'video'
assign media_count_mobile = media_count_mobile | plus: 1
endif
endif
if media_count > 0 and media_1 != 'image' and media_2 != 'image'
assign has_only_video = true
endif
if media_count > 0 and media_count_mobile > 0 and media_1_mobile != 'image' and media_2_mobile != 'image'
assign has_only_video_mobile = true
endif
assign media_wrapper_desktop_class = 'hero__media-wrapper hero__media-wrapper--desktop'
assign media_wrapper_mobile_class = 'hero__media-wrapper hero__media-wrapper--mobile'
# If there is no custom mobile media to show, we add the mobile class to the desktop classes so content is always shown on mobile.
if section.settings.custom_mobile_media == false or section.settings.custom_mobile_media == true and media_count_mobile == 0
assign media_wrapper_desktop_class = media_wrapper_desktop_class | append: ' hero__media-wrapper--mobile'
endif
# Should we show the blurred reflection on mobile?
assign show_mobile_blurred_reflection = false
if section.settings.blurred_reflection
if section.settings.custom_mobile_media == true and media_count_mobile > 0 and has_only_video_mobile == false
# Custom mobile media is active and a mobile image is present
assign show_mobile_blurred_reflection = true
elsif section.settings.custom_mobile_media == true and media_count_mobile == 0 and media_count > 0 and has_only_video == false
# Custom mobile media is active, no mobile media is present, but a desktop image is present
assign show_mobile_blurred_reflection = true
elsif section.settings.custom_mobile_media == false and media_count > 0 and has_only_video == false
# Custom mobile media is inactive, but a desktop image is present
assign show_mobile_blurred_reflection = true
endif
endif
if media_1 == 'image' and media_2 == 'image'
assign media_width_desktop = '50vw'
else
assign media_width_desktop = '100vw'
endif
# If custom mobile media is disabled or no mobile media is present, we need to fallback to desktop media.
if section.settings.custom_mobile_media == false or media_count_mobile == 0 or media_count == 0
assign media_count_mobile = media_count
assign fallback_to_desktop = true
endif
if fallback_to_desktop
assign media_width_mobile = media_width_desktop
elsif section.settings.stack_media_on_mobile or media_1_mobile != 'image' or media_2_mobile != 'image'
assign media_width_mobile = '100vw'
else
assign media_width_mobile = '50vw'
endif
assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile
assign widths = '832, 1200, 1600, 1920, 2560, 3840'
assign sizes_mobile = media_width_mobile
assign mobile_widths = '416, 600, 800, 1200, 1600'
assign mobile_widths_array = mobile_widths | split: ', '
assign fetch_priority = 'auto'
if section.index == 1
assignfetchpriority=high'
endif
capture media_slot_1
- if media_1 == 'image' and media_1_mobile == 'image'
endifendcapture
capture media_slot_2capture media
capture media_blurred
capture mobile_media_blurred
liquid
assign media_count = 0
assign media_count_mobile = 0
assign fallback_to_desktop =
assign media_1 = 'none'
assign media_2 = 'none'
assign media_1_mobile = 'none'
assign media_2_mobile = 'none'
assign has_only_video = false
assign has_only_video_mobile = false
# Desktop media checks
# For each media slot, check if the media is not blank and the media type matches the slot
# Need to check both (1) media picker is not blank AND (2) section.setting.media_type because user can toggle between different media types to display, but choosing "Image" doesn't clear a saved "Video" in the theme editor.
# The alternate setting (section.settings.image_1 when "Video" is selected) is only visually hidden in theme editor.
if section.settings.image_1 != blank and section.settings.media_type_1 == 'image'
assign media_1 = 'image'
assign media_count = media_count | plus: 1
endif
if section.settings.video_1 != blank and section.settings.media_type_1 == 'video'
assign media_1 = 'video'
assign media_count = media_count | plus: 1
endif
if section.settings.image_2 != blank and section.settings.media_type_2 == 'image'
assign media_2 = 'image'
assign media_count = media_count | plus: 1
endif
if section.settings.video_2 != blank and section.settings.media_type_2 == 'video'
assign media_2 = 'video'
assign media_count = media_count | plus: 1
endif
if section.settings.custom_mobile_media
# Mobile media checks
# For each media slot, check if the media is not blank and the media type matches the slot
if section.settings.image_1_mobile != blank and section.settings.media_type_1_mobile == 'image'
assign media_1_mobile = 'image'
assign media_count_mobile = media_count_mobile | plus: 1
endif
if section.settings.video_1_mobile != blank and section.settings.media_type_1_mobile == 'video'
assign media_1_mobile = 'video'
assign media_count_mobile = media_count_mobile | plus: 1
endif
if section.settings.image_2_mobile != blank and section.settings.media_type_2_mobile == 'image'
assign media_2_mobile = 'image'
assign media_count_mobile = media_count_mobile | plus: 1
endif
if section.settings.video_2_mobile != blank and section.settings.media_type_2_mobile == 'video'
assign media_2_mobile = 'video'
assign media_count_mobile = media_count_mobile | plus: 1
endif
endif
if media_count > 0 and media_1 != 'image' and media_2 != 'image'
assign has_only_video = true
endif
if media_count > 0 and media_count_mobile > 0 and media_1_mobile != 'image' and media_2_mobile != 'image'
assign has_only_video_mobile = true
endif
assign media_wrapper_desktop_class = 'hero__media-wrapper hero__media-wrapper--desktop'
assign media_wrapper_mobile_class = 'hero__media-wrapper hero__media-wrapper--mobile'
# If there is no custom mobile media to show, we add the mobile class to the desktop classes so content is always shown on mobile.
if section.settings.custom_mobile_media == false or section.settings.custom_mobile_media == true and media_count_mobile == 0
assign media_wrapper_desktop_class = media_wrapper_desktop_class | append: ' hero__media-wrapper--mobile'
endif
# Should we show the blurred reflection on mobile?
assign show_mobile_blurred_reflection = false
if section.settings.blurred_reflection
if section.settings.custom_mobile_media == true and media_count_mobile > 0 and has_only_video_mobile == false
# Custom mobile media is active and a mobile image is present
assign show_mobile_blurred_reflection = true
elsif section.settings.custom_mobile_media == true and media_count_mobile == 0 and media_count > 0 and has_only_video == false
# Custom mobile media is active, no mobile media is present, but a desktop image is present
assign show_mobile_blurred_reflection = true
elsif section.settings.custom_mobile_media == false and media_count > 0 and has_only_video == false
# Custom mobile media is inactive, but a desktop image is present
assign show_mobile_blurred_reflection = true
endif
endif
if media_1 == 'image' and media_2 == 'image'
assign media_width_desktop = '50vw'
else
assign media_width_desktop = '100vw'
endif
# If custom mobile media is disabled or no mobile media is present, we need to fallback to desktop media.
if section.settings.custom_mobile_media == false or media_count_mobile == 0 or media_count == 0
assign media_count_mobile = media_count
assign fallback_to_desktop = true
endif
if fallback_to_desktop
assign media_width_mobile = media_width_desktop
elsif section.settings.stack_media_on_mobile or media_1_mobile != 'image' or media_2_mobile != 'image'
assign media_width_mobile = '100vw'
else
assign media_width_mobile = '50vw'
endif
assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile
assign widths = '832, 1200, 1600, 1920, 2560, 3840'
assign sizes_mobile = media_width_mobile
assign mobile_widths = '416, 600, 800, 1200, 1600'
assign mobile_widths_array = mobile_widths | split: ', '
assign fetch_priority = 'auto'
if section.index == 1
assignfetchpriority=high'
endif
capture media_slot_1
- if media_1 == 'image' and media_1_mobile == 'image'
endifendcapture
capture media_slot_2capture media
capture media_blurred
capture mobile_media_blurred
Receive gentle reminders, new designs & special offers.
liquid
assign media_count = 0
assign media_count_mobile = 0
assign fallback_to_desktop =
assign media_1 = 'none'
assign media_2 = 'none'
assign media_1_mobile = 'none'
assign media_2_mobile = 'none'
assign has_only_video = false
assign has_only_video_mobile = false
# Desktop media checks
# For each media slot, check if the media is not blank and the media type matches the slot
# Need to check both (1) media picker is not blank AND (2) section.setting.media_type because user can toggle between different media types to display, but choosing "Image" doesn't clear a saved "Video" in the theme editor.
# The alternate setting (section.settings.image_1 when "Video" is selected) is only visually hidden in theme editor.
if section.settings.image_1 != blank and section.settings.media_type_1 == 'image'
assign media_1 = 'image'
assign media_count = media_count | plus: 1
endif
if section.settings.video_1 != blank and section.settings.media_type_1 == 'video'
assign media_1 = 'video'
assign media_count = media_count | plus: 1
endif
if section.settings.image_2 != blank and section.settings.media_type_2 == 'image'
assign media_2 = 'image'
assign media_count = media_count | plus: 1
endif
if section.settings.video_2 != blank and section.settings.media_type_2 == 'video'
assign media_2 = 'video'
assign media_count = media_count | plus: 1
endif
if section.settings.custom_mobile_media
# Mobile media checks
# For each media slot, check if the media is not blank and the media type matches the slot
if section.settings.image_1_mobile != blank and section.settings.media_type_1_mobile == 'image'
assign media_1_mobile = 'image'
assign media_count_mobile = media_count_mobile | plus: 1
endif
if section.settings.video_1_mobile != blank and section.settings.media_type_1_mobile == 'video'
assign media_1_mobile = 'video'
assign media_count_mobile = media_count_mobile | plus: 1
endif
if section.settings.image_2_mobile != blank and section.settings.media_type_2_mobile == 'image'
assign media_2_mobile = 'image'
assign media_count_mobile = media_count_mobile | plus: 1
endif
if section.settings.video_2_mobile != blank and section.settings.media_type_2_mobile == 'video'
assign media_2_mobile = 'video'
assign media_count_mobile = media_count_mobile | plus: 1
endif
endif
if media_count > 0 and media_1 != 'image' and media_2 != 'image'
assign has_only_video = true
endif
if media_count > 0 and media_count_mobile > 0 and media_1_mobile != 'image' and media_2_mobile != 'image'
assign has_only_video_mobile = true
endif
assign media_wrapper_desktop_class = 'hero__media-wrapper hero__media-wrapper--desktop'
assign media_wrapper_mobile_class = 'hero__media-wrapper hero__media-wrapper--mobile'
# If there is no custom mobile media to show, we add the mobile class to the desktop classes so content is always shown on mobile.
if section.settings.custom_mobile_media == false or section.settings.custom_mobile_media == true and media_count_mobile == 0
assign media_wrapper_desktop_class = media_wrapper_desktop_class | append: ' hero__media-wrapper--mobile'
endif
# Should we show the blurred reflection on mobile?
assign show_mobile_blurred_reflection = false
if section.settings.blurred_reflection
if section.settings.custom_mobile_media == true and media_count_mobile > 0 and has_only_video_mobile == false
# Custom mobile media is active and a mobile image is present
assign show_mobile_blurred_reflection = true
elsif section.settings.custom_mobile_media == true and media_count_mobile == 0 and media_count > 0 and has_only_video == false
# Custom mobile media is active, no mobile media is present, but a desktop image is present
assign show_mobile_blurred_reflection = true
elsif section.settings.custom_mobile_media == false and media_count > 0 and has_only_video == false
# Custom mobile media is inactive, but a desktop image is present
assign show_mobile_blurred_reflection = true
endif
endif
if media_1 == 'image' and media_2 == 'image'
assign media_width_desktop = '50vw'
else
assign media_width_desktop = '100vw'
endif
# If custom mobile media is disabled or no mobile media is present, we need to fallback to desktop media.
if section.settings.custom_mobile_media == false or media_count_mobile == 0 or media_count == 0
assign media_count_mobile = media_count
assign fallback_to_desktop = true
endif
if fallback_to_desktop
assign media_width_mobile = media_width_desktop
elsif section.settings.stack_media_on_mobile or media_1_mobile != 'image' or media_2_mobile != 'image'
assign media_width_mobile = '100vw'
else
assign media_width_mobile = '50vw'
endif
assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile
assign widths = '832, 1200, 1600, 1920, 2560, 3840'
assign sizes_mobile = media_width_mobile
assign mobile_widths = '416, 600, 800, 1200, 1600'
assign mobile_widths_array = mobile_widths | split: ', '
assign fetch_priority = 'auto'
if section.index == 1
assignfetchpriority=high'
endif
capture media_slot_1
- if media_1 == 'image' and media_1_mobile == 'image'
endifendcapture
capture media_slot_2capture media
capture media_blurred
capture mobile_media_blurred
