path: root/templates/gallery.crotmp

<:use 'templates/base.crotmp'>
  <|page(.title)>
    <div id="loading">
      <label for="loading-progress">Loading Images:</label>
      <progress id="loading-progress" max="100" value="0"></progress>
    </div>
    <div id="loading-error" class="alert" role="alert">
      <span id="loading-error-text"></span>
      <button id="loading-error-dismiss">Dismiss</button>
    </div>
    <div id="gallery">
      <@gallery : $i>
        <?{ $i.<type> eq 'img' }>
        <img alt="<$i.<alt>>" src="<$i.<src>>" loading="lazy">
        </?>
        <?{ $i.<type> eq 'text' }>
        <div class="text"><$i.<text>></div>
        </?>
        <?{ $i.<type> eq 'heading' }>
        <h1 class="heading"><$i.<text>></h1>
        </?>
      </@>
    </div>
    <script type="text/javascript" src="/resources/js/bricks.js"></script>
    <script type="text/javascript" src="/resources/js/gallery.js"></script>
</|>