COMPONENT
c-figure
Demo Section
Each variation will be presented in the following sections.
Default with picture
Picture and caption
My custom picture with caption
and custom content
Video and caption
My custom video with caption
Technical Details
Figure
Description
The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos code examples and other things. The specs says this:
The HTML
<figure>element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit.
The Figure component contains the picture and video component as dependency and prints out every necessary field for html figures.
Requirements
- veams-component-picture - Picture component in Veams.
- veams-component-video - Video component in Veams.
Installation
Installation with Veams
veams install vc figure
Installation with Bower
bower install veams-component-figure --save
Fields
Settings
- settings.figureContextClass {
String} [default] - Context class of the rte. - settings.figureClasses {
String} - Modifier classes for the rte. - settings.figureId {
String} - Just pass a custom string when using an id for the figure.
Content
- content.figureCaption (
Object) - Contains multiple elements - content.figureCaption.figureCaptionClasses (
String) - Modifier classes - content.figureCaption.captionHeadline (
String) - Headline - content.figureCaption.captionContent (
String) - Content
Nested Data Fields
- content.figurePicture (Object) - @see requirements
- content.figureVideo (Object) - @see requirements
{
"variations": {
"simple": {
"docs": {
"variationName": "Default with picture"
},
"settings": {
"figureId": "figure-content",
"figureContextClass": "simple"
},
"content": {
"figurePicture": {
"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"
}
]
}
]
}
}
}
},
"caption": {
"docs": {
"variationName": "Picture and caption"
},
"settings": {
"figureId": "figure-caption",
"figureContextClass": "caption"
},
"content": {
"figureCaption": {
"captionHeadline": "My custom picture with caption",
"captionContent": "and custom content"
},
"figurePicture": {
"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"
}
]
}
]
}
}
}
},
"video": {
"docs": {
"variationName": "Video and caption",
"sectionCenter": true
},
"settings": {
"figureContextClass": "video"
},
"content": {
"figureCaption": {
"captionHeadline": "My custom video with caption"
},
"figureVideo": {
"settings": {
"videoContextClass": false,
"videoClasses": false,
"videoOptions": "controls buffer"
},
"content": {
"videoPoster": "http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg",
"videoMp4": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
"videoWebm": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm",
"videoTrack": {
"trackSubtitle": false,
"trackLang": false,
"trackLabel": false
}
}
}
}
}
}
}
c-figure
<figure class="c-figure{{#if settings.figureContextClass}}--{{settings.figureContextClass}}{{else}}--default{{/if}}{{#if settings.figureClasses}} {{settings.figureClasses}}{{/if}}"
data-css="c-figure"{{#if settings.figureId}} id="{{settings.figureId}}"{{/if}}>
<div class="figure__wrapper">
{{#if (isObject content.figurePicture)}}
{{> c-picture content.figurePicture}}
{{else}}{{#if (isObject content.figureVideo)}}
{{> c-video content.figureVideo}}
{{else}}
<h2 style="color: red">Please provide a picture or video for your figure!</h2>
{{/if}}{{/if}}
</div>
{{#if (isObject content.figureCaption)}}
<figcaption class="figure__caption{{#if settings.figureCaptionClasses}} {{settings.figureCaptionClasses}}{{/if}}">
{{> c-figure__caption content.figureCaption}}
</figcaption>
{{/if}}
</figure>
_c-figure.scss
/* ===================================================
FIGURE COMPONENT
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-figure"] {
.figure__wrapper {
}
.figure__caption {
}
.figure__caption-inner {
}
.figure__caption-headline {
}
.figure__caption-content {
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-figure--default {
}
Default with picture
<figure class="c-figure--simple" data-css="c-figure" id="figure-content">
<div class="figure__wrapper">
<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>
</div>
</figure>Picture and caption
<figure class="c-figure--caption" data-css="c-figure" id="figure-caption">
<div class="figure__wrapper">
<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>
</div>
<figcaption class="figure__caption">
<div class="figure__caption-inner">
<h3 class="figure__caption-headline">My custom picture with caption</h3>
<p class="figure__caption-content">and custom content</p>
</div>
</figcaption>
</figure>Video and caption
<figure class="c-figure--video" data-css="c-figure">
<div class="figure__wrapper">
<video class="c-video--default" data-css="c-video" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" controls buffer tabindex="0">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type='video/webm; codecs="vp8, vorbis"'/>
<track src="" kind="" srclang=""
label=""/>
</video>
</div>
<figcaption class="figure__caption">
<div class="figure__caption-inner">
<h3 class="figure__caption-headline">My custom video with caption</h3>
</div>
</figcaption>
</figure>