Figure

Display related visual content with an optional caption and responsive alignment.

100%

<twig:Figure caption="Bukchon Hanok Village, in Seoul, South Korea" captionAlign="center" style="max-width: 36rem;">
    <img
        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=960&q=80"
        class="figure-img img-fluid rounded"
        alt="Bukchon Hanok Village, in Seoul, South Korea"
    >
</twig:Figure>

Installation

php bin/console ux:install figure --kit bootstrap

Install the following Composer dependencies:

composer require twig/extra-bundle twig/html-extra:^3.12.0

Install the following front-end dependencies:

npm install bootstrap@^5.3.0
# ...or with Symfony AssetMapper
php bin/console importmap:require bootstrap bootstrap/dist/css/bootstrap.min.css

Copy the following file(s) into your app:

{# @prop caption string|null The optional caption displayed below the figure content. #}
{# @prop captionAlign &#039;start&#039;|&#039;center&#039;|&#039;end&#039;|null The horizontal alignment of the caption. #}
{# @block content The figure content, typically a responsive image. #}
{%- props caption = null, captionAlign = null -%}
&lt;figure {{ attributes.defaults({class: &#039;figure&#039;}) }}&gt;
    {%- block content %}{% endblock -%}
    {%- if caption is not null %}
        &lt;figcaption class=&quot;{{ html_classes({
            &#039;figure-caption&#039;: true,
            (&#039;text-&#039; ~ captionAlign): captionAlign in [&#039;start&#039;, &#039;center&#039;, &#039;end&#039;],
        }) }}&quot;&gt;{{ caption }}&lt;/figcaption&gt;
    {%- endif %}
&lt;/figure&gt;

Usage

<twig:Figure caption="Bukchon Hanok Village, in Seoul, South Korea" style="max-width: 36rem;">
    <img
        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=720&q=80"
        class="figure-img img-fluid rounded"
        alt="Bukchon Hanok Village, in Seoul, South Korea"
    >
</twig:Figure>

Accessibility

Write image alternative text that describes the image's purpose in context. Avoid repeating the caption verbatim unless both carry distinct information.

Use an empty alt value for a decorative image. The caption remains associated with the figure through the native figure and figcaption elements.

Examples

Default figure

Display a responsive image with a caption below it.

100%

<twig:Figure caption="Bukchon Hanok Village, in Seoul, South Korea" style="max-width: 36rem;">
    <img
        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=720&q=80"
        class="figure-img img-fluid rounded"
        alt="Bukchon Hanok Village, in Seoul, South Korea"
    >
</twig:Figure>

Caption alignment

Align the caption with Bootstrap's text utilities through the captionAlign prop.

100%

<twig:Figure caption="Bukchon Hanok Village, in Seoul, South Korea" captionAlign="end" style="max-width: 36rem;">
    <img
        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=720&q=80"
        class="figure-img img-fluid rounded"
        alt="Bukchon Hanok Village, in Seoul, South Korea"
    >
</twig:Figure>

API Reference

`<twig:Figure>`

Prop	Type	Default
`caption`	`string\|null`	`null`
`captionAlign`	`'start'\|'center'\|'end'\|null`	`null`

Block	Description
`content`	The figure content, typically a responsive image.