c71eebf919
The figure was a flex ROW (flex justify-*), so a figcaption became a second flex item sitting to the right of the frame. flex-col + items-* keeps the alignment semantics and puts the caption underneath. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
12 lines
1.8 KiB
Plaintext
12 lines
1.8 KiB
Plaintext
{# image override — recycled-paper frame with soft organic corners. Fields mirror builtin: src, alt, caption, size, align, aspectRatio, objectFit. Media resolved via {% img %} (media filter is not registered in the block render path). #}
|
|
{% with size=size|default:"full" align=align|default:"center" objectFit=objectFit|default:"cover" %}
|
|
<figure data-block-override="earthen:image" class="my-8 flex-1 flex flex-col {% if align == "left" %}items-start{% elif align == "right" %}items-end{% else %}items-center{% endif %}{% if class %} {{ class }}{% endif %}">
|
|
<div class="earthen-paper-frame-inner earthen-blob-soft overflow-hidden {% if size == "xs" %}max-w-[200px] w-full{% elif size == "sm" %}max-w-[400px] w-full{% elif size == "md" %}max-w-[600px] w-full{% elif size == "lg" %}max-w-[800px] w-full{% else %}w-full{% endif %}" style="border:1px solid hsl(var(--border));padding:6px;background-color:hsl(var(--card));">
|
|
<div class="earthen-blob-soft relative overflow-hidden bg-muted {% if aspectRatio == "square" %}aspect-square{% elif aspectRatio == "video" %}aspect-video{% elif aspectRatio == "portrait" %}aspect-[3/4]{% elif aspectRatio == "wide" %}aspect-[21/9]{% endif %}">
|
|
{% if objectFit == "contain" %}{% img src alt=alt class="w-full h-full object-contain" layout=size %}{% elif objectFit == "fill" %}{% img src alt=alt class="w-full h-full object-fill" layout=size %}{% elif objectFit == "none" %}{% img src alt=alt class="w-full h-full object-none" layout=size %}{% else %}{% img src alt=alt class="w-full h-full object-cover" layout=size %}{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if caption %}<figcaption class="mt-3 text-center text-sm italic" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Work Sans', ui-sans-serif, system-ui, sans-serif);">{{ caption }}</figcaption>{% endif %}
|
|
</figure>
|
|
{% endwith %}
|