<figure class="figure">
<img class="img-fluid" src="https://placehold.it/960x640/ea09ff/000001?text=Default|960x640" srcset="https://placehold.it/320x210/d8e7ff/000001?text=320x210 320w, https://placehold.it/540x360/a4c6fc/000001?text=540x360 540w, https://placehold.it/720x480/6ba4ff/000001?text=720x480 720w, https://placehold.it/960x640/3f89ff/000001?text=960x640 960w, https://placehold.it/1140x760/0a68ff/fffffa?text=1140x760 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.