Background Selector

A control to select a background type amongst color, image, or video.

Schema

{
	"$schema": "https://json-schema.org/draft/2019-09/schema",
	"title": "Background Selector Control",
	"description": "A control for selecting a background type (color, image, video).",
	"type": "object",
	"properties": {
		"control": {
			"const": "background-selector"
		},
		"label": {
			"type": "string",
			"title": "Label",
			"description": "Background selector control label"
		},
		"value": {
			"type": "object",
			"description": "The background data",
			"properties": {
				"type": {
					"type": "string",
					"description": "The selected background type",
					"enum": ["color", "image", "video"]
				},
				"color": {
					"type": "object",
					"description": "Color background options",
					"properties": {
						"type": {
							"type": "string",
							"description": "Type of color background",
							"enum": ["selected", "custom"]
						},
						"custom": {
							"type": "string",
							"description": "Custom color value in hex format"
						}
					},
					"required": ["type"]
				},
				"image": {
					"type": "object",
					"description": "Image background options",
					"properties": {
						"source": {
							"type": "string",
							"description": "URL of the image"
						}
					},
					"required": ["source"]
				},
				"video": {
					"type": "object",
					"description": "Video background options",
					"properties": {
						"posterUrl": {
							"type": "string",
							"description": "URL of the poster image for the video"
						},
						"thumbnailUrl": {
							"type": "string",
							"description": "URL of the video thumbnail"
						},
						"playbackUrls": {
							"type": "array",
							"description": "List of playback URLs with their types",
							"items": {
								"type": "object",
								"properties": {
									"src": {
										"type": "string",
										"description": "Source URL for video playback"
									},
									"type": {
										"type": "string",
										"description": "MIME type of the video source"
									}
								},
								"required": ["src", "type"]
							}
						}
					},
					"required": ["playbackUrls"]
				}
			},
			"required": ["type"]
		}
	},
	"required": ["control", "value"]
}

Example

In the Editor control, here’s how to define the background selector control:

{% editor %}
{
	// ...

	"controls": [
		// Other controls...

		{
			"control": "background-selector",
			"label": "{{ 'controls.background.label' | localize([], 'USER') }}",
			"value": {
				"$ref": "#/schema/background",
				"default": {
					"type": "color",
					"color": {
						"type": "selected"
					}
				}
			}
		}
	]
}
{% endeditor %}

And define a background property in the schema:

{% schema %}
{
    // ...
    "background": {
        "type": "array",
        "optional": true,
        "default": []
    }
}
{% endschema %}

In the Twig template, you can apply the background data accordingly:

{% set bgColor = background.color.type == 'selected' ? contentGroupsGlobalStyles.background.color : background.color.custom %}

<div
    class="bg-{{ background.type }}"
    style="
        {% if background.type == 'color' %}
            --bg-color: {{ bgColor }};
        {% elseif background.type == 'image' %}
            --bg-image: url('{{ background.image.source }}');
        {% endif %}"
    "
>
    {% if background.type == 'video' %}
        {{ include('partials/components/background-video', {
            video: background.video
        }) }}
    {% endif %}

	<!-- Content -->
</div>

Pre-populating background data

To pre-populate the background data, add it to the corresponding page JSON file (site/pages/page-name.json) like so:

{
	"template": "template/path",
	"route": "/route-path",
	"props": {
		"main": [
			{
				"template": "content-groups-grid",
				"props": {
					"name": "...",
					// ...
					"background": {
						"type": "video", // Selected BG type
						"color": {
							"type": "custom",
							"custom": "#e90606",
						},
						"image": {
							"source": "https://images.unsplash.com/photo-1475694867812-f82b8696d610?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NjE4NHwwfDF8YWxsfDd8fHx8fHwxfHwxNzI1MDAwMjIzfA&ixlib=rb-4.0.3&q=80&w=1080"
						},
						"video": {
							"posterUrl": "https://customer-abc.cloudflarestream.com/.../thumbnails/thumbnail.jpg?width=480",
							"thumbnailUrl": "https://customer-abc.cloudflarestream.com/.../thumbnails/thumbnail.jpg?width=300"
							"playbackUrls": [
								{
									"src": "https://customer-abc.cloudflarestream.com/.../manifest/video.m3u8",
									"type": "application/x-mpegURL",
								},
								{
									"src": "https://customer-abc.cloudflarestream.com/.../manifest/video.mpd",
									"type": "application/dash+xml",
								}
							]
						}
					}
				}
			}
		]
		// ...
	}
}