Go To Github

COMPONENT

c-picture

Demo Section

Each variation will be presented in the following sections.

Picture with Sizes

Alternative text that describes the image

Picture with Lazyload

Alternative text that describes the image

Technical Details

README

Bower versionGitter Chat

Picture

Description

Include responsive (content) images. It supports lazy loading (when provided in your JavaScript) and uses a custom getUrl helper to print out the relative path or URL.

Installation

Installation with Veams

veams install vc picture

Installation with Bower

bower install veams-component-picture --save

Fields

Settings

  • settings.pictureContextClass {String} [default] - Context class
  • settings.pictureClasses {String} - Modifier classes
  • settings.lazyload {Boolean} - Set to true to use lazyload

Content

  • content.fallback {String} - Path to fallback image, e.g. “http://placehold.it/400x200” - mostly the smallest image defined in srcset.
  • content.alt {String} - An alternative text describing the image if a user for some reason cannot view it.

Content Items

  • content.items {Array} - An array containing different image sources. The images should differ in type or in picture detail, otherwise there’s no need to add more than one child object. Each item will generate a <source> element.

  • content.items.type {String} - If the browser supports the format described in the type attribute, it uses that source; otherwise, theelement is skipped. Example: “image/webp”. Use type attribute only if you provide new file formats like webp, jx2, jp2, apng, etc.

  • content.items.media {String} - If a query in a media attribute evaluates to true, the browser must use that source; otherwise, theelement is skipped. Example: “(min-width: 200px)”. Use media attribute only for art direction use case.

Content Items Srcset
  • content.items.srcset {Array} - Use srcset to provide different image sizes. Contains 1-x children.
  • content.items.srcset.src {String} - Path to image, e.g. “http://placehold.it/400x200”
  • content.items.srcset.imageWidth {String} - The width in physical pixels (e.g. “400w”) of image referenced in “src” above.
Content Item Sizes

  • content.items.sizes {Array} - Use sizes to define the width of our images at a given screen size. The media queries could reflect the breakpoints in your project, but it’s not mandatory to stick to them. If the width of an image in the srcset attribute is set (= “imageWidth”), the sizes attribute must be present.

  • content.items.sizes.screenWidth {String} - Media query (e.g. “(min-width: 992px)”) defining which image to use.

  • content.items.sizes.imageWidth {String} - Width of image in viewport matching the media query defined in “screenWidth”. Use width in pixel, e.g. “960px” or as a dynamic width, e.g. “calc(100vw - 50px)”.

Contributors

Thanks for assistance and contributions:

@chaenu

Data File
{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Picture with Sizes",
				"center": true
			},
			"settings": {
				"pictureContextClass": "default",
				"pictureClasses": false,
				"lazyload": false
			},
			"content": {
				"fallbackSrc": "http://placehold.it/400x200",
				"alt": "Alternative text that describes the image",
				"items": [
					{
						"srcset": [
							{
								"src": "http://placehold.it/400x300",
								"imageWidth": "400w"
							},
							{
								"src": "http://placehold.it/700x300",
								"imageWidth": "700w"
							},
							{
								"src": "http://placehold.it/800x400",
								"imageWidth": "800w"
							},
							{
								"src": "http://placehold.it/960x300",
								"imageWidth": "960w"
							},
							{
								"src": "http://placehold.it/1400x400",
								"imageWidth": "1000w"
							},
							{
								"src": "http://placehold.it/1920x500",
								"imageWidth": "1920w"
							}
						],
						"sizes": [
							{
								"screenWidth": "(min-width: 992px)",
								"imageWidth": "1440px"
							},
							{
								"screenWidth": "(min-width: 768px)",
								"imageWidth": "calc( 100vw - 50px )"
							}
						]
					}
				]
			}
		},
		"lazyload": {
			"docs": {
				"variationName": "Picture with Lazyload",
				"center": true
			},
			"settings": {
				"pictureContextClass": "default",
				"pictureClasses": false,
				"lazyload": true
			},
			"content": {
				"fallbackSrc": "http://placehold.it/40x10",
				"alt": "Alternative text that describes the image",
				"items": [
					{
						"srcset": [
							{
								"src": "http://placehold.it/400x300",
								"imageWidth": "400w"
							},
							{
								"src": "http://placehold.it/700x300",
								"imageWidth": "700w"
							},
							{
								"src": "http://placehold.it/800x400",
								"imageWidth": "800w"
							},
							{
								"src": "http://placehold.it/960x300",
								"imageWidth": "960w"
							},
							{
								"src": "http://placehold.it/1400x400",
								"imageWidth": "1000w"
							},
							{
								"src": "http://placehold.it/1920x500",
								"imageWidth": "1920w"
							}
						]
					}
				]
			}
		}
	}
}
Templates

c-picture

<picture class="c-picture{{#if settings.pictureContextClass}}--{{settings.pictureContextClass}}{{else}}--default{{/if}}
	{{#if settings.pictureClasses}} {{settings.pictureClasses}}{{/if}}{{#if settings.lazyload}} lazyload{{/if}}" data-css="c-picture">

	<!--[if IE 9]><audio><![endif]-->
	{{#each content.items}}
	<source {{#if ../settings.lazyload}}data-{{/if}}srcset="{{#each srcset}}{{#unless @first}}, {{/unless}}{{getUrl src}}{{#if imageWidth}} {{imageWidth}}{{/if}}{{/each}}"
	        {{#if sizes}} sizes="{{#each sizes}}{{#unless @first}}, {{/unless}}{{screenWidth}} {{imageWidth}}{{/each}}"{{/if}}
		{{#if media}} media="{{media}}"{{/if}}
		{{#if type}} type="{{type}}"{{/if}} />
	{{/each}}
	<!--[if IE 9]></audio><![endif]-->

	{{#if content.fallbackSrc}}
		<img class="picture__image{{#if settings.lazyload}} lazyload{{/if}}" src="{{getUrl content.fallbackSrc}}" alt="{{content.alt}}"/>
	{{else}}
		<h3 style="color: red; font-weight: bold;">Define a fallback picture!</h3>
	{{/if}}
</picture>
HTML Output

Picture with Sizes

<picture class="c-picture--default
	" data-css="c-picture">
	<!--[if IE 9]><audio><![endif]-->
	<source srcset="http://placehold.it/400x300 400w, http://placehold.it/700x300 700w, http://placehold.it/800x400 800w, http://placehold.it/960x300 960w, http://placehold.it/1400x400 1000w, http://placehold.it/1920x500 1920w" sizes="(min-width: 992px) 1440px, (min-width: 768px) calc( 100vw - 50px )" />
	<!--[if IE 9]></audio><![endif]-->
	<img class="picture__image" src="http://placehold.it/400x200" alt="Alternative text that describes the image" />
</picture>

Picture with Lazyload

<picture class="c-picture--default
	 lazyload" data-css="c-picture">
	<!--[if IE 9]><audio><![endif]-->
	<source data-srcset="http://placehold.it/400x300 400w, http://placehold.it/700x300 700w, http://placehold.it/800x400 800w, http://placehold.it/960x300 960w, http://placehold.it/1400x400 1000w, http://placehold.it/1920x500 1920w" />
	<!--[if IE 9]></audio><![endif]-->
	<img class="picture__image lazyload" src="http://placehold.it/40x10" alt="Alternative text that describes the image" />
</picture>