<figure class="figure">
<img class="img-fluid" src="/assets/img/picture-960x640.jpg" srcset="../../assets/img/picture-320x213.jpg 320w, ../../assets/img/picture-540x360.jpg 540w, ../../assets/img/picture-720x480.jpg 720w, ../../assets/img/picture-960x640.jpg 960w, ../../assets/img/picture-1140x760.jpg 1140w" alt="Alternative text">
<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"
}
}
/**
* 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.