I added the code below to the Dawn theme to add a Parallax section block. It works well, except on mobile the banner images get cropped. I would like them to be full size or use some other code to have different image for mobile.
Any help would be appreciated. Thanks in advance
{% liquid
if section.settings.mp4_video != blank
assign video_url = ‘mp4:’ | append: section.settings.mp4_video
elsif section.settings.video != blank
if section.settings.video.type == ‘youtube’
assign video_url = ‘https://www.youtube.com/watch?v=’ | append: section.settings.video.id
else
assign video_url = ‘https://vimeo.com/’ | append: section.settings.video.id
endif
endif
%}
{% comment %}theme-check-disable{% endcomment %}
{% unless video_url == blank %}
{% endunless %}
{% comment %}theme-check-enable{% endcomment %}
{{ section.settings.title }}
{% endunless %} {% unless section.settings.description == blank %}{% schema %}
{
“name”: “Parallax Image”,
“settings”: [
{
“type”: “header”,
“content”: “Image”
},
{
“type”: “image_picker”,
“id”: “img”,
“label”: “Image”
},
{
“type”: “select”,
“id”: “img_crop”,
“label”: “Image crop”,
“default”: “center”,
“options”: [
{ “value”: “top”, “label”: “Top” },
{ “value”: “center”, “label”: “Center” },
{ “value”: “bottom”, “label”: “Bottom” },
{ “value”: “left”, “label”: “Left” },
{ “value”: “right”, “label”: “Right” }
]
},
{
“type”: “text”,
“id”: “img_min_height”,
“label”: “Image min-height (px)”,
“info”: “Prevent image from shrinking to much in mobile”,
“default”: “320”
},
{
“type”: “header”,
“content”: “Video (YouTube or Vimeo)”,
“info”: “NOTICE: Either image or video can be used.”
},
{
“type”: “video_url”,
“id”: “video”,
“label”: “Video”,
“accept”: [
“youtube”, “vimeo”
]
},
{
“type”: “text”,
“id”: “video_start_time”,
“label”: “Start time (sec)”
},
{
“type”: “text”,
“id”: “video_end_time”,
“label”: “End time (sec)”
},
{
“type”: “checkbox”,
“id”: “video_loop”,
“label”: “Loop video”,
“info”: “Loop video to play infinitely”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “video_play_only_visible”,
“label”: “Play only on visible”,
“info”: “Play video only when it is visible on the screen”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “video_lazy_loading”,
“label”: “Lazy-load video”,
“info”: “Preload videos only when it is visible on the screen”,
“default”: true
},
{
“type”: “header”,
“content”: “Video (MP4)”,
“info”: “NOTICE: Either image or video can be used.”
},
{
“type”: “text”,
“id”: “mp4_video”,
“label”: “MP4 Video”
},
{
“type”: “header”,
“content”: “Content”
},
{
“type”: “text”,
“id”: “max_width”,
“label”: “Max width (px)”,
“info”: “Adjust container width (in pixels). Leave empty to use your theme’s container width.”,
“default”: “720”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”,
“default”: “Parallax image overlay with text”
},
{
“type”: “select”,
“id”: “title_size”,
“label”: “Title size”,
“default”: “h1”,
“options”: [
{ “value”: “h1”, “label”: “H1” },
{ “value”: “h2”, “label”: “H2” },
{ “value”: “h3”, “label”: “H3” },
{ “value”: “h4”, “label”: “H4” },
{ “value”: “h5”, “label”: “H5” },
{ “value”: “h6”, “label”: “H6” }
]
},
{
“type”: “richtext”,
“id”: “description”,
“label”: “Description”,
“default”: “
A beautiful section to enhance your Shopify store. Make sure your image is high quality. Content is optional. P.S. You can use videos as well.
”},
{
“type”: “select”,
“id”: “description_size”,
“label”: “Description size”,
“default”: “125%”,
“options”: [
{ “value”: “100%”, “label”: “100%” },
{ “value”: “105%”, “label”: “105%” },
{ “value”: “110%”, “label”: “110%” },
{ “value”: “125%”, “label”: “125%” },
{ “value”: “150%”, “label”: “150%” },
{ “value”: “200%”, “label”: “200%” }
]
},
{
“type”: “text”,
“id”: “btn_text”,
“label”: “Button text”,
“info”: “Leave empty to disable button”
},
{
“type”: “url”,
“id”: “btn_url”,
“label”: “Button URL”
},
{
“type”: “select”,
“id”: “btn_color”,
“label”: “Button color”,
“default”: “btn-primary button–primary”,
“options”: [
{ “value”: “btn-primary button–primary”, “label”: “Primary” },
{ “value”: “btn-secondary button–secondary”, “label”: “Secondary” },
{ “value”: “btn-primary button–primary button–inverted”, “label”: “Primary inverted” },
{ “value”: “btn-secondary button–secondaryy button–inverted”, “label”: “Secondary inverted” }
]
},
{
“type”: “header”,
“content”: “Overlay settings”
},
{
“type”: “range”,
“id”: “media_opacity”,
“label”: “Opacity”,
“min”: 0,
“max”: 1,
“step”: 0.1,
“default”: 0.7,
“info”: “Decrease to enhance text legibility”
},
{
“type”: “color”,
“id”: “media_overlay_color”,
“label”: “Overlay color”,
“info”: “Works only if the opacity setting above is below 1”,
“default”: “#000000”
},
{
“type”: “range”,
“id”: “media_blur”,
“label”: “Blur”,
“min”: 0,
“max”: 20,
“step”: 1,
“default”: 0,
“info”: “Increase to further enhance legibility”
},
{
“type”: “header”,
“content”: “Parallax settings”
},
{
“type”: “select”,
“id”: “parallax_type”,
“label”: “Parallax Type”,
“info”: “Through that ‘scroll’ is recommended you may experiment with the other options.”,
“default”: “scroll”,
“options”: [
{ “value”: “scroll”, “label”: “Scroll” },
{ “value”: “scale”, “label”: “Scale” },
{ “value”: “opacity”, “label”: “Opacity” },
{ “value”: “scroll-opacity”, “label”: “Scroll opacity” },
{ “value”: “scale-opacity”, “label”: “Scale opacity” }
]
},
{
“type”: “range”,
“id”: “parallax_speed”,
“label”: “Parallax speed”,
“info”: “Selecting ‘0’ will disable parallax effect”,
“default”: 0.5,
“min”: 0,
“max”: 2,
“step”: 0.1
},
{
“type”: “checkbox”,
“id”: “parallax_disable_mobile”,
“label”: “Disable parallax on mobile devices”,
“info”: “In case you are having issues with it”,
“default”: false
},
{
“type”: “header”,
“content”: “Spacing”,
“info”: “Based on ‘rem’ values Learn more”
},
{
“type”: “range”,
“id”: “pt”,
“label”: “Padding top”,
“min”: 0,
“max”: 12,
“step”: 1,
“default”: 0
},
{
“type”: “range”,
“id”: “pb”,
“label”: “Padding bottom”,
“min”: 0,
“max”: 12,
“step”: 1,
“default”: 0
},
{
“type”: “range”,
“id”: “mt”,
“label”: “Margin top”,
“min”: 0,
“max”: 12,
“step”: 1,
“default”: 0
},
{
“type”: “range”,
“id”: “mb”,
“label”: “Margin bottom”,
“min”: 0,
“max”: 12,
“step”: 1,
“default”: 0
}
],
“presets”: [
{
“name”: “Parallax Image”,
“category”: “Image”
}
]
}
{% endschema %}