[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   * @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  
  39              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  40              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  41              <!-- /wp:spacer -->
  42  
  43              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  44              <figure class="wp-block-image is-style-rounded">
  45                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  46              </figure>
  47              <!-- /wp:image -->
  48          </div>
  49          <!-- /wp:column -->
  50  
  51          <!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
  52          <div class="wp-block-column">
  53              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  54              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  55              <!-- /wp:spacer -->
  56  
  57              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  58              <figure class="wp-block-image is-style-rounded">
  59                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  60              </figure>
  61              <!-- /wp:image -->
  62  
  63              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  64              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  65              <!-- /wp:spacer -->
  66  
  67              <!-- wp:image {"aspectRatio":"1","scale":"cover","className":"is-style-rounded"} -->
  68              <figure class="wp-block-image is-style-rounded">
  69                  <img alt="" style="aspect-ratio:1;object-fit:cover" />
  70              </figure>
  71              <!-- /wp:image -->
  72  
  73              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  74              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  75              <!-- /wp:spacer -->
  76  
  77              <!-- wp:image {"aspectRatio":"1","scale":"cover","className":"is-style-rounded"} -->
  78              <figure class="wp-block-image is-style-rounded">
  79                  <img alt="" style="aspect-ratio:1;object-fit:cover" />
  80              </figure>
  81              <!-- /wp:image -->
  82          </div>
  83          <!-- /wp:column -->
  84  
  85          <!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
  86          <div class="wp-block-column">
  87              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  88              <figure class="wp-block-image is-style-rounded">
  89                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  90              </figure>
  91              <!-- /wp:image -->
  92  
  93              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  94              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  95              <!-- /wp:spacer -->
  96  
  97              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  98              <figure class="wp-block-image is-style-rounded">
  99                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
 100              </figure>
 101              <!-- /wp:image -->
 102  
 103              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
 104              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
 105              <!-- /wp:spacer -->
 106  
 107              <!-- wp:image {"aspectRatio":"16/9","scale":"cover","className":"is-style-rounded"} -->
 108              <figure class="wp-block-image is-style-rounded">
 109                  <img alt="" style="aspect-ratio:16/9;object-fit:cover" />
 110              </figure>
 111              <!-- /wp:image -->
 112          </div>
 113          <!-- /wp:column -->
 114      </div>
 115      <!-- /wp:columns -->
 116  </div>
 117  <!-- /wp:group -->