[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   * @package WordPress
  11   * @subpackage Twenty_Twenty_Four
  12   * @since Twenty Twenty-Four 1.0
  13   */
  14  
  15  ?>
  16  
  17  <!-- 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"}} -->
  18  <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)">
  19      <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0","left":"var:preset|spacing|40"},"margin":{"top":"0","bottom":"0"}}}} -->
  20      <div class="wp-block-columns alignwide" style="margin-top:0;margin-bottom:0">
  21          <!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
  22          <div class="wp-block-column">
  23              <!-- wp:image {"aspectRatio":"4/3","scale":"cover","className":"is-style-rounded"} -->
  24              <figure class="wp-block-image is-style-rounded">
  25                  <img alt="" style="aspect-ratio:4/3;object-fit:cover" />
  26              </figure>
  27              <!-- /wp:image -->
  28  
  29              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  30              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  31              <!-- /wp:spacer -->
  32  
  33              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  34              <figure class="wp-block-image is-style-rounded">
  35                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  36              </figure>
  37              <!-- /wp:image -->
  38          </div>
  39          <!-- /wp:column -->
  40  
  41          <!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
  42          <div class="wp-block-column">
  43              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  44              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  45              <!-- /wp:spacer -->
  46  
  47              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  48              <figure class="wp-block-image is-style-rounded"><img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  49              </figure>
  50              <!-- /wp:image -->
  51  
  52              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  53              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  54              <!-- /wp:spacer -->
  55  
  56              <!-- wp:image {"aspectRatio":"1","scale":"cover","className":"is-style-rounded"} -->
  57              <figure class="wp-block-image is-style-rounded"><img alt="" style="aspect-ratio:1;object-fit:cover" />
  58              </figure>
  59              <!-- /wp:image -->
  60          </div>
  61          <!-- /wp:column -->
  62      </div>
  63      <!-- /wp:columns -->
  64  </div>
  65  <!-- /wp:group -->