Image

{#-
 # An image: one img, in a figure when it has a caption, a credit, a license or a creation, under the prop names of
 # Symfony UX Image, without a service, a script or an inline style; its layout, ratio, fit and crop written as classes.
 # A javascript:, vbscript: or data: URL other than data:image/ is refused, and so is an address of another host than
 # those image_origin() allows; a refused src renders nothing, a refused srcset is left out whole. The image of a listed
 # host is fetched without a referrer; the main image is preloaded through Symfony WebLink.
 #}
{%- props
    ## string The URL of the image.
    src,
    ## string The text alternative; an empty string for a decorative image, which screen readers then skip.
    alt,
    ## int The width of the image, so that its space is reserved at its ratio before it loads.
    width,
    ## int The height of the image, so that its space is reserved at its ratio before it loads.
    height,
    ## string|array<int|string,string>|null The candidates as HTML writes them, or a map of densities, or of widths with sizes or a fluid layout, to URLs.
    srcset = null,
    ## string|null The sizes of a srcset of widths, preceded by "auto, " while the image loads lazily; computed from the layout when null.
    sizes = null,
    ## string|null How the image fills its container: "fixed", at its width; "constrained", never wider than its width; "full-width"; none by default.
    layout = null,
    ## string|null The ratio of its box, "16/9", "4/3", "3/2", "1/1", "21/9", "3/4", "2/3", "9/16", or "custom", read from a custom property a class sets.
    aspect = null,
    ## string|null How the image fills its box, "cover" or "contain": "cover" by default when it has a ratio.
    fit = null,
    ## string|null Where the image is cropped in its box: "center", "top", "bottom", "left" or "right".
    position = null,
    ## bool Whether it is the main image above the fold: loaded eagerly, fetched first and preloaded, its decoding left to the browser.
    priority = false,
    ## bool|null Whether the image is preloaded through Symfony WebLink, in a Link header the server may send as an early hint: with priority when null.
    preload = null,
    ## string|null How it loads, "lazy" or "eager": "lazy" by default, "eager" with priority.
    loading = null,
    ## string|null How it is decoded, "async", "sync" or "auto": "async" by default, none written with priority.
    decoding = null,
    ## string|null A caption under the image, which a figure then holds with it; shown even when the image is decorative.
    caption = null,
    ## string|null Who made the image, as the site writes it, "Photo: Ana Lima", under the caption.
    credit = null,
    ## string|null The name of the license of the image, "CC BY 4.0", under the caption.
    license = null,
    ## string|null The address of the license, which its name then links to with rel="license".
    licenseHref = null,
    ## string|BackedEnum|null How the image was made, a code of the IPTC Digital Source Type vocabulary such as "digitalCapture" or "trainedAlgorithmicMedia", or an enum whose value is one.
    creation = null,
    ## string|null The words that say how the image was made, in the language of the page; the name the vocabulary gives the code when null.
    creationLabel = null
-%}
{%- set _refused = '#(^|,)[[:cntrl:] ]*(javascript:|vbscript:|data:(?!image/))#i' -%}
{%- set _controls = {"\t": '', "\n": '', "\r": ''} -%}
{%- set _origin = src is empty or src|replace(_controls) matches _refused ? 'refused' : image_origin(src) -%}
{%- if _origin is not same as('refused') -%}
    {%- set _loading = loading in ['lazy', 'eager'] ? loading : (priority ? 'eager' : 'lazy') -%}
    {%- set _sizes = sizes is not empty ? sizes : {
        constrained: width is empty ? null : '(min-width: ' ~ width ~ 'px) ' ~ width ~ 'px, 100vw',
        'full-width': '100vw',
    }[layout] ?? null -%}
    {%- set _srcset = srcset is iterable ? srcset|map((url, key) => url ~ ' ' ~ key ~ (_sizes is empty ? 'x' : 'w'))|join(', ') : srcset -%}
    {%- set _set_origin = _srcset is empty ? null : (_srcset|replace(_controls) matches _refused ? 'refused' : image_origin(_srcset, true)) -%}
    {%- set _srcset = _set_origin in [null, 'refused'] ? null : _srcset -%}
    {%- set _preload_sizes = _srcset is null or _sizes is empty ? null : _sizes -%}
    {%- set _sizes = _preload_sizes is null ? null : (_loading is same as('lazy') and not (_sizes|lower starts with 'auto') ? 'auto, ' ~ _sizes : _sizes) -%}
    {%- set _referrer = attributes.all.referrerpolicy ?? (_origin is same as('external') or _set_origin is same as('external') ? 'no-referrer' : null) -%}
    {%- if preload ?? priority -%}
        {%- do preload(src, {
            as: 'image',
            imagesrcset: _srcset,
            imagesizes: _preload_sizes,
            fetchpriority: priority ? 'high' : null,
            crossorigin: attributes.all.crossorigin ?? null,
            referrerpolicy: _referrer,
        }|filter(value => value is not null)) -%}
    {%- endif -%}
    {%- set _ratio = {'16/9': 'hasRatio16x9', '4/3': 'hasRatio4x3', '3/2': 'hasRatio3x2', '1/1': 'hasRatio1x1', '21/9': 'hasRatio21x9', '3/4': 'hasRatio3x4', '2/3': 'hasRatio2x3', '9/16': 'hasRatio9x16', custom: 'hasRatio'}[aspect|default('')|replace({' ': ''})] ?? null -%}
    {%- set _class = [
        'isImage',
        {fixed: 'hasLayoutFixed', 'full-width': 'hasLayoutFullWidth'}[layout] ?? null,
        _ratio,
        {cover: 'hasFitCover', contain: 'hasFitContain'}[fit ?? (_ratio is null ? '' : 'cover')] ?? null,
        {center: 'hasPositionCenter', top: 'hasPositionTop', bottom: 'hasPositionBottom', left: 'hasPositionLeft', right: 'hasPositionRight'}[position] ?? null,
        attributes.all.class ?? null,
    ]|filter(name => name is not empty)|join(' ') -%}
    {%- set _allowed = alt is same as('')
        ? '#^(id|crossorigin|referrerpolicy|itemprop|draggable|data-[a-z0-9-]+)$#'
        : '#^(id|title|crossorigin|referrerpolicy|itemprop|draggable|(data|aria)-[a-z0-9-]+)$#' -%}
    {%- set _attributes = attributes.all|filter((value, name) => name matches _allowed)|merge(_referrer is null ? {} : {referrerpolicy: _referrer}) -%}
    <twig:Image:Figure :caption="caption" :credit="credit" :license="license" :licenseHref="licenseHref" :creation="creation" :creationLabel="creationLabel">
        <img {{ html_attr({
            class: _class,
            src: src,
            srcset: _srcset,
            sizes: _sizes,
            alt: alt,
            width: width,
            height: height,
            loading: _loading,
            decoding: decoding in ['async', 'sync', 'auto'] ? decoding : (priority ? null : 'async'),
            fetchpriority: priority ? 'high' : null,
        }, _attributes) }}>
    </twig:Image:Figure>
{%- endif -%}

{#-
 # The figure of an image or a picture: its content alone, or held in a figure with a figcaption when it has a caption,
 # a credit, a license or a creation of the IPTC Digital Source Type vocabulary, every text escaped. A license links to
 # its address with rel="license" unless that address is refused; a code outside the vocabulary says nothing.
 #}
{%- props
    ## string|null A caption under the image.
    caption = null,
    ## string|null Who made the image, as the site writes it, "Photo: Ana Lima".
    credit = null,
    ## string|null The name of the license of the image, "CC BY 4.0".
    license = null,
    ## string|null The address of the license, which its name then links to with rel="license".
    licenseHref = null,
    ## string|BackedEnum|null How the image was made, a code of the IPTC Digital Source Type vocabulary, or an enum whose value is one.
    creation = null,
    ## string|null The words that say how the image was made; the name the vocabulary gives the code when null.
    creationLabel = null
-%}
{%- set _vocabulary = {
    digitalCapture: 'Digital capture sampled from real life',
    computationalCapture: 'Multi-frame computational capture sampled from real life',
    negativeFilm: 'Digitised from a transparent negative',
    positiveFilm: 'Digitised from a transparent positive',
    print: 'Digitised from a non-transparent medium',
    humanEdits: 'Human-edited media',
    compositeWithTrainedAlgorithmicMedia: 'Edited using Generative AI',
    algorithmicallyEnhanced: 'Algorithmically-altered media',
    digitalCreation: 'Digital creation',
    dataDrivenMedia: 'Data-driven media',
    trainedAlgorithmicMedia: 'Created using Generative AI',
    algorithmicMedia: 'Pure algorithmic media',
    screenCapture: 'Screen capture',
    virtualRecording: 'Virtual event recording',
    composite: 'Composite of elements',
    compositeCapture: 'Composite of captured elements',
    compositeSynthetic: 'Composite including generative AI elements',
    minorHumanEdits: 'Original media with minor human edits',
    softwareImage: 'Created by software',
    digitalArt: 'Digital art',
} -%}
{%- set _code = creation is null ? null : (creation.value is defined ? creation.value : creation) -%}
{%- set _creation = _code is not null and _code in _vocabulary|keys ? (creationLabel is not empty ? creationLabel : _vocabulary[_code]) : null -%}
{%- set _href = licenseHref is empty or licenseHref|replace({"\t": '', "\n": '', "\r": ''}) matches '#^[[:cntrl:] ]*(javascript:|vbscript:|data:)#i' ? null : licenseHref -%}
{%- if caption is not empty or credit is not empty or license is not empty or _creation is not null -%}
    <figure>
        {##- The image or the picture the figure holds. -#}
        {%- block content %}{% endblock -%}
        <figcaption>
            {{- caption -}}
            {%- if credit is not empty %}<small class="isCredit">{{ credit }}</small>{% endif -%}
            {%- if license is not empty %}<small class="isLicense">{% if _href is not null %}<a href="{{ _href }}" rel="license">{{ license }}</a>{% else %}{{ license }}{% endif %}</small>{% endif -%}
            {%- if _creation is not null %}<small {{ html_attr({class: 'isCreation', 'data-digital-source-type': _code}) }}>{{ _creation }}</small>{% endif -%}
        </figcaption>
    </figure>
{%- else -%}
    {{- block('content') -}}
{%- endif -%}

{#-
 # A picture: its sources before the Image that holds the fallback, under the prop names of Symfony UX Image, in a figure
 # when it has a caption, a credit, a license or a creation. The still image for a reader who reduces motion comes
 # first, then the dark variant, then the sources with a media query, in the order of their first media query, each
 # group AVIF, then WebP, then the other types; a source of another type than image/*, without candidates, holding a
 # refused URL, an address of a host image_origin() refuses or a media query of the wrong shape is left out; a refused
 # src renders nothing. Without a media query, the main picture preloads its first source. The other attributes go to
 # the img.
 #}
{%- props
    ## string The URL of the fallback image, for the browsers that read none of the sources.
    src,
    ## string The text alternative; an empty string for a decorative image, which screen readers then skip.
    alt,
    ## int The width of the image, so that its space is reserved at its ratio before it loads.
    width,
    ## int The height of the image, so that its space is reserved at its ratio before it loads.
    height,
    ## list<array{type?:string,srcset:string|array<int|string,string>,sizes?:string,media?:string,width?:int,height?:int}> The sources: a type, candidates as for srcset, sizes, a media query and the size of its crop.
    sources = [],
    ## string|array<int|string,string>|list<array{type?:string,srcset:string|array<int|string,string>}>|null The variant drawn for a dark system, offered where prefers-color-scheme is dark: candidates as for srcset, or sources of their own types.
    dark = null,
    ## string|array<int|string,string>|list<array{type?:string,srcset:string|array<int|string,string>}>|null The still image of an animated one, offered where prefers-reduced-motion is reduce: candidates as for srcset, or sources of their own types.
    still = null,
    ## string|array<int|string,string>|null The candidates as HTML writes them, or a map of densities, or of widths with sizes or a fluid layout, to URLs.
    srcset = null,
    ## string|null The sizes of a srcset of widths, preceded by "auto, " while the image loads lazily; computed from the layout when null.
    sizes = null,
    ## string|null How the image fills its container: "fixed", at its width; "constrained", never wider than its width; "full-width"; none by default.
    layout = null,
    ## string|null The ratio of its box, "16/9", "4/3", "3/2", "1/1", "21/9", "3/4", "2/3", "9/16", or "custom", read from a custom property a class sets.
    aspect = null,
    ## string|null How the image fills its box, "cover" or "contain": "cover" by default when it has a ratio.
    fit = null,
    ## string|null Where the image is cropped in its box: "center", "top", "bottom", "left" or "right".
    position = null,
    ## bool Whether it is the main image above the fold: loaded eagerly, fetched first and preloaded, its decoding left to the browser.
    priority = false,
    ## bool|null Whether the first source, or the image without sources, is preloaded through Symfony WebLink: with priority when null; never with a media query.
    preload = null,
    ## string|null How it loads, "lazy" or "eager": "lazy" by default, "eager" with priority.
    loading = null,
    ## string|null How it is decoded, "async", "sync" or "auto": "async" by default, none written with priority.
    decoding = null,
    ## string|null A caption under the image, which a figure then holds with it; shown even when the image is decorative.
    caption = null,
    ## string|null Who made the image, as the site writes it, "Photo: Ana Lima", under the caption.
    credit = null,
    ## string|null The name of the license of the image, "CC BY 4.0", under the caption.
    license = null,
    ## string|null The address of the license, which its name then links to with rel="license".
    licenseHref = null,
    ## string|BackedEnum|null How the image was made, a code of the IPTC Digital Source Type vocabulary such as "digitalCapture" or "trainedAlgorithmicMedia", or an enum whose value is one.
    creation = null,
    ## string|null The words that say how the image was made, in the language of the page; the name the vocabulary gives the code when null.
    creationLabel = null
-%}
{%- set _refused = '#(^|,)[[:cntrl:] ]*(javascript:|vbscript:|data:(?!image/))#i' -%}
{%- set _controls = {"\t": '', "\n": '', "\r": ''} -%}
{%- if src is not empty and not (src|replace(_controls) matches _refused) and image_origin(src) is not same as('refused') -%}
    {%- set _lazy = (loading in ['lazy', 'eager'] ? loading : (priority ? 'eager' : 'lazy')) is same as('lazy') -%}
    {%- set _default = sizes is not empty ? sizes : {
        constrained: width is empty ? null : '(min-width: ' ~ width ~ 'px) ' ~ width ~ 'px, 100vw',
        'full-width': '100vw',
    }[layout] ?? null -%}
    {%- set _all = [] -%}
    {%- for _variant in [{value: still, media: '(prefers-reduced-motion: reduce)'}, {value: dark, media: '(prefers-color-scheme: dark)'}] -%}
        {%- if _variant.value is not empty -%}
            {%- set _list = _variant.value is iterable and (_variant.value|first).srcset is defined ? _variant.value : [{srcset: _variant.value}] -%}
            {%- set _all = _all|merge(_list|map(source => source|merge({media: _variant.media}))) -%}
        {%- endif -%}
    {%- endfor -%}
    {%- set _all = _all|merge(sources) -%}
    {%- set _medias = [] -%}
    {%- for source in _all -%}
        {%- set _media = (source.media ?? '')|trim -%}
        {%- if _media is not empty and _media not in _medias -%}{%- set _medias = _medias|merge([_media]) -%}{%- endif -%}
    {%- endfor -%}
    {%- set _sources = [] -%}
    {%- set _external = false -%}
    {%- for source in _all -%}
        {%- set _type = source.type ?? null -%}
        {%- set _media = (source.media ?? '')|trim -%}
        {%- set _sizes = source.sizes ?? _default -%}
        {%- set _set = source.srcset ?? null -%}
        {%- set _set = _set is iterable ? _set|map((url, key) => url ~ ' ' ~ key ~ (_sizes is empty ? 'x' : 'w'))|join(', ') : _set -%}
        {%- set _origin = _set is empty or _set|replace(_controls) matches _refused ? 'refused' : image_origin(_set, true) -%}
        {%- if _origin is not same as('refused')
            and (_type is null or _type matches '#^image/[a-z0-9.+-]+$#')
            and (_media is empty or _media matches '#^[^<>{};]+$#') -%}
            {%- set _external = _external or _origin is same as('external') -%}
            {%- set _sources = _sources|merge([{
                order: (_media is empty ? 999 : _medias|keys|filter(index => _medias[index] is same as(_media))|first) * 10 + ({'image/avif': 0, 'image/webp': 1}[_type] ?? (_type is null ? 3 : 2)),
                preload_sizes: _sizes is empty ? null : _sizes,
                attributes: {
                    type: _type,
                    srcset: _set,
                    sizes: _sizes is empty ? null : (_lazy and not (_sizes|lower starts with 'auto') ? 'auto, ' ~ _sizes : _sizes),
                    media: _media is empty ? null : _media,
                    width: (source.width ?? null) matches '#^[1-9][0-9]*$#' ? source.width : null,
                    height: (source.height ?? null) matches '#^[1-9][0-9]*$#' ? source.height : null,
                },
            }]) -%}
        {%- endif -%}
    {%- endfor -%}
    {%- set _sources = _sources|sort((a, b) => a.order - b.order) -%}
    {%- set _attributes = _external and attributes.all.referrerpolicy is not defined ? attributes.all|merge({referrerpolicy: 'no-referrer'}) : attributes.all -%}
    {%- if _sources is not empty and (preload ?? priority) and _sources|filter(source => source.attributes.media is not null) is empty -%}
        {%- set _first = _sources|first -%}
        {%- do preload(src, {
            as: 'image',
            imagesrcset: _first.attributes.srcset,
            imagesizes: _first.preload_sizes,
            type: _first.attributes.type,
            fetchpriority: priority ? 'high' : null,
            crossorigin: _attributes.crossorigin ?? null,
            referrerpolicy: _attributes.referrerpolicy ?? null,
        }|filter(value => value is not null)) -%}
    {%- endif -%}
    <twig:Image:Figure :caption="caption" :credit="credit" :license="license" :licenseHref="licenseHref" :creation="creation" :creationLabel="creationLabel">
        {%- if _sources is not empty -%}<picture>{%- endif -%}
        {%- for source in _sources -%}<source {{ html_attr(source.attributes) }}>{%- endfor -%}
        <twig:Image :src="src" :alt="alt" :width="width" :height="height" :srcset="srcset" :sizes="sizes" :layout="layout" :aspect="aspect" :fit="fit" :position="position" :priority="priority" :preload="_sources is empty ? preload : false" :loading="loading" :decoding="decoding" {{ ..._attributes }} />
        {%- if _sources is not empty -%}</picture>{%- endif -%}
    </twig:Image:Figure>
{%- endif -%}