<!-- tpcms-form: {
  "label": "04_★ポートフォリオ",
  "category": "03_コンテンツ",
  "fields": [
    { "key":"H2", "type":"text", "label":"大見出し"},
    { "key":"H2_TEXT", "type":"textarea", "label":"説明文が必要ならここに入力して下さい。"}
  ],
  "repeaters": [
    {
      "key": "ROWS",
      "label": "繰り返しブロック",
      "sort": true,
      "fields": [
        { "key": "TEXT", "type": "text","label": "説明" },
        { "key": "FILE", "type": "file", "label": "画像", "image_max_width": 800, "image_quality": 82 }
      ]
    }
  ]
} -->

<section class="masonry-wrapper">

{{#IF_H2}}
<h2>{{H2}}</h2>
{{/IF_H2}}

{{#IF_H2_TEXT}}<p>{{H2_TEXT}}</p>{{/IF_H2_TEXT}}

<div class="masonry-grid">

<!-- Masonry のカラム幅の基準 -->
<div class="grid-sizer"></div>

{{#ROWS}}

{{#IF_IMAGE}}
<div class="grid-item">
<a href="./uploads/{{FILE}}" data-fancybox="gallery" data-caption="{{#IF_TEXT}}{{TEXT}}{{/IF_TEXT}}">
<img src="./uploads/{{FILE}}" alt="{{#IF_TEXT}}{{TEXT}}{{/IF_TEXT}}" loading="lazy">
</a>
</div>
{{/IF_IMAGE}}

{{#IF_VIDEO}}
<div class="grid-item is-video">
<a href="./uploads/{{FILE}}" data-fancybox="gallery" data-caption="{{#IF_TEXT}}{{TEXT}}{{/IF_TEXT}}">
<div class="media-wrapper">
<video class="thumb-video" muted loop playsinline preload="metadata">
<source src="./uploads/{{FILE}}" type="video/mp4">
</video>
<span class="video-badge">▶</span>
</div>
</a>
</div>
{{/IF_VIDEO}}

{{/ROWS}}

</div>

</section>
