[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Title: Offset gallery, 3 columns
   4   * Slug: twentytwentyfour/gallery-offset-images-grid-3-col
   5   * Categories: gallery, portfolio
   6   * Keywords: project, images, media, masonry, columns
   7   * Viewport width: 1400
   8   * Description: A gallery section with 3 columns and offset images.
   9   */
  10  ?>
  11  <!-- wp:group {"metadata":{"name":"Portfolio Images"},"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|50","left":"var:preset|spacing|50","top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
  12  <div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
  13      <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0","left":"var:preset|spacing|40"},"margin":{"top":"0","bottom":"0"}}}} -->
  14      <div class="wp-block-columns alignwide" style="margin-top:0;margin-bottom:0">
  15          <!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
  16          <div class="wp-block-column">
  17              <!-- wp:image {"aspectRatio":"4/3","scale":"cover","className":"is-style-rounded"} -->
  18              <figure class="wp-block-image is-style-rounded">
  19                  <img alt="" style="aspect-ratio:4/3;object-fit:cover" />
  20              </figure>
  21              <!-- /wp:image -->
  22  
  23              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  24              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  25              <!-- /wp:spacer -->
  26  
  27              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  28              <figure class="wp-block-image is-style-rounded">
  29                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  30              </figure>
  31              <!-- /wp:image -->
  32  
  33              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  34              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  35              <!-- /wp:spacer -->
  36  
  37              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  38              <figure class="wp-block-image is-style-rounded">
  39                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  40              </figure>
  41              <!-- /wp:image -->
  42          </div>
  43          <!-- /wp:column -->
  44  
  45          <!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
  46          <div class="wp-block-column">
  47              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  48              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  49              <!-- /wp:spacer -->
  50  
  51              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  52              <figure class="wp-block-image is-style-rounded">
  53                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  54              </figure>
  55              <!-- /wp:image -->
  56  
  57              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  58              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  59              <!-- /wp:spacer -->
  60  
  61              <!-- wp:image {"aspectRatio":"1","scale":"cover","className":"is-style-rounded"} -->
  62              <figure class="wp-block-image is-style-rounded">
  63                  <img alt="" style="aspect-ratio:1;object-fit:cover" />
  64              </figure>
  65              <!-- /wp:image -->
  66  
  67              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  68              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  69              <!-- /wp:spacer -->
  70  
  71              <!-- wp:image {"aspectRatio":"1","scale":"cover","className":"is-style-rounded"} -->
  72              <figure class="wp-block-image is-style-rounded">
  73                  <img alt="" style="aspect-ratio:1;object-fit:cover" />
  74              </figure>
  75              <!-- /wp:image -->
  76          </div>
  77          <!-- /wp:column -->
  78  
  79          <!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
  80          <div class="wp-block-column">
  81              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  82              <figure class="wp-block-image is-style-rounded">
  83                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  84              </figure>
  85              <!-- /wp:image -->
  86  
  87              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  88              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  89              <!-- /wp:spacer -->
  90  
  91              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  92              <figure class="wp-block-image is-style-rounded">
  93                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  94              </figure>
  95              <!-- /wp:image -->
  96  
  97              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  98              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  99              <!-- /wp:spacer -->
 100  
 101              <!-- wp:image {"aspectRatio":"16/9","scale":"cover","className":"is-style-rounded"} -->
 102              <figure class="wp-block-image is-style-rounded">
 103                  <img alt="" style="aspect-ratio:16/9;object-fit:cover" />
 104              </figure>
 105              <!-- /wp:image -->
 106          </div>
 107          <!-- /wp:column -->
 108      </div>
 109      <!-- /wp:columns -->
 110  </div>
 111  <!-- /wp:group -->