<figure class="figure">
<picture class="figure-img">
<source media="(min-width: 60em)" srcset="http://placehold.it/1600x1067/ACCBE8/ffffff?text=eXtra Large|1600x1067">
<source media="(min-width: 40em)" srcset="http://placehold.it/960x640/ACCBE8/ffffff?text=Large|960x640">
<source media="(min-width: 20em)" srcset="http://placehold.it/640x427/F1BF9F/ffffff?text=Medium|640x427">
<img class="img-fluid" src="https://placehold.it/960x640/ea09ff/000001?text=Default|960x640" alt="">
</picture>
<figcaption class="figure-caption">Ceci est une légende<span class="vd-figure-credits">Crédit photo</span></figcaption>
</figure>
<figure class="figure{% if styleModifier %} {{ styleModifier }}{% endif %}">
{% if url -%}<a href="{{ url }}"{% if title %} title="{{ title }}"{% endif %}>{% endif -%}
{%- if image.source -%}
<picture class="figure-img">
{% for item in image.source -%}
<source media="{{ item.media }}" srcset="{{ item.srset }}">
{%- endfor %}
{% render '@image--fluid', image -%}
</picture>
{%- else -%}
{%- render '@image--fluid', image.default -%}
{%- endif %}
{% if url -%}</a>{% endif -%}
{% if caption -%}
<figcaption class="figure-caption">{{ caption.text }}{% if caption.credit %}<span class="vd-figure-credits">{{ caption.credit }}</span>{% endif %}</figcaption>
{%- endif %}
</figure>
{
"category": "Category",
"caption": {
"text": "Ceci est une légende",
"credit": "Crédit photo"
},
"image": {
"srcset": false,
"class": "img-fluid",
"source": [
{
"media": "(min-width: 60em)",
"srset": "http://placehold.it/1600x1067/ACCBE8/ffffff?text=eXtra Large|1600x1067"
},
{
"media": "(min-width: 40em)",
"srset": "http://placehold.it/960x640/ACCBE8/ffffff?text=Large|960x640"
},
{
"media": "(min-width: 20em)",
"srset": "http://placehold.it/640x427/F1BF9F/ffffff?text=Medium|640x427"
}
],
"src": "https://placehold.it/960x640/ea09ff/000001?text=Default|960x640"
}
}
/**
* Remove margin between caption and image
*/
.figure-img {
margin-bottom: 0;
}
/**
* Style figure caption
*/
.figure-caption {
font-style: italic;
color: $gray-500;
text-align: left;
}
/**
* Style for credits inside figcaption
*/
.vd-figure-credits {
display: block;
font-size: 80%;
font-weight: 500;
font-style: normal;
color: $body-color;
&:before {
content: "/\0000a0";
}
}
.vd-figure-img-container {
position: relative;
}
No notes defined.