glacier-web-cli 0.5.0

Command-line tool for creating and running Glacier applications.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{% props src: String, alt: String, ratio: String = "", placeholder: String = "", srcset: String = "", sizes: String = "", width: String = "", height: String = "", eager: bool = false, state: String = "", caption: String = "" %}
{# placeholder: a tiny preview image URL (a data URI); state="error" shows the fallback in place of the image #}
<figure class="ui-figure">
  <div class="ui-image"{% if !ratio.is_empty() %} data-ratio="{{ ratio }}"{% end %}{% if !state.is_empty() %} data-state="{{ state }}"{% end %} data-ui="progressive-image">
    {%- if state == "error" %}
    <div class="ui-image-fallback"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 2l20 20"/><path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/><path d="M13.5 13.5 6 21"/><path d="M18 12l3 3"/><path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/><path d="M21 15V5a2 2 0 0 0-2-2H9"/></svg>Image unavailable</div>
    {%- else %}
    {%- if !placeholder.is_empty() %}
    <div class="ui-image-placeholder" style="background-image:url({{ placeholder }})"></div>
    {%- end %}
    <img src="{{ src }}"{% if !srcset.is_empty() %} srcset="{{ srcset }}"{% end %}{% if !sizes.is_empty() %} sizes="{{ sizes }}"{% end %} alt="{{ alt }}" loading="{% if eager %}eager{% else %}lazy{% end %}" decoding="async"{% if !width.is_empty() %} width="{{ width }}"{% end %}{% if !height.is_empty() %} height="{{ height }}"{% end %}>
    {%- end %}
  </div>
  {%- if !caption.is_empty() %}
  <figcaption>{{ caption }}</figcaption>
  {%- end %}
</figure>