[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Title: Offset gallery, 2 columns
   4   * Slug: twentytwentyfour/gallery-offset-images-grid-2-col
   5   * Categories: gallery, portfolio
   6   * Keywords: project, images, media, masonry, columns
   7   * Viewport width: 1400
   8   * Description: A gallery section with 2 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          </div>
  33          <!-- /wp:column -->
  34  
  35          <!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
  36          <div class="wp-block-column">
  37              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  38              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  39              <!-- /wp:spacer -->
  40  
  41              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  42              <figure class="wp-block-image is-style-rounded"><img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  43              </figure>
  44              <!-- /wp:image -->
  45  
  46              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  47              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  48              <!-- /wp:spacer -->
  49  
  50              <!-- wp:image {"aspectRatio":"1","scale":"cover","className":"is-style-rounded"} -->
  51              <figure class="wp-block-image is-style-rounded"><img alt="" style="aspect-ratio:1;object-fit:cover" />
  52              </figure>
  53              <!-- /wp:image -->
  54          </div>
  55          <!-- /wp:column -->
  56      </div>
  57      <!-- /wp:columns -->
  58  </div>
  59  <!-- /wp:group -->