[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Title: Offset gallery, 4 columns
   4   * Slug: twentytwentyfour/gallery-offset-images-grid-4-col
   5   * Categories: gallery, featured, portfolio
   6   * Keywords: project, images, media, masonry, columns
   7   * Viewport width: 1400
   8   * Description: A gallery section with 4 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 {"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"},"metadata":{"name":"Portfolio Images"}} -->
  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">
  41              </div>
  42              <!-- /wp:spacer -->
  43  
  44              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  45              <figure class="wp-block-image is-style-rounded">
  46                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  47              </figure>
  48              <!-- /wp:image -->
  49          </div>
  50          <!-- /wp:column -->
  51  
  52          <!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
  53          <div class="wp-block-column">
  54              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  55              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  56              <!-- /wp:spacer -->
  57  
  58              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  59              <figure class="wp-block-image is-style-rounded">
  60                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  61              </figure>
  62              <!-- /wp:image -->
  63  
  64              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  65              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  66              <!-- /wp:spacer -->
  67  
  68              <!-- wp:image {"aspectRatio":"1","scale":"cover","className":"is-style-rounded"} -->
  69              <figure class="wp-block-image is-style-rounded">
  70                  <img alt="" style="aspect-ratio:1;object-fit:cover" />
  71              </figure>
  72              <!-- /wp:image -->
  73  
  74              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  75              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  76              <!-- /wp:spacer -->
  77  
  78              <!-- wp:image {"aspectRatio":"1","scale":"cover","className":"is-style-rounded"} -->
  79              <figure class="wp-block-image is-style-rounded">
  80                  <img alt="" style="aspect-ratio:1;object-fit:cover" />
  81              </figure>
  82              <!-- /wp:image -->
  83          </div>
  84          <!-- /wp:column -->
  85  
  86          <!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
  87          <div class="wp-block-column">
  88              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
  89              <figure class="wp-block-image is-style-rounded">
  90                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
  91              </figure>
  92              <!-- /wp:image -->
  93  
  94              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  95              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer">
  96              </div>
  97              <!-- /wp:spacer -->
  98  
  99              <!-- wp:image {"aspectRatio":"3/4","scale":"cover","className":"is-style-rounded"} -->
 100              <figure class="wp-block-image is-style-rounded">
 101                  <img alt="" style="aspect-ratio:3/4;object-fit:cover" />
 102              </figure>
 103              <!-- /wp:image -->
 104  
 105              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
 106              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer">
 107              </div>
 108              <!-- /wp:spacer -->
 109  
 110              <!-- wp:image {"aspectRatio":"16/9","scale":"cover","className":"is-style-rounded"} -->
 111              <figure class="wp-block-image is-style-rounded">
 112                  <img alt="" style="aspect-ratio:16/9;object-fit:cover" />
 113              </figure>
 114              <!-- /wp:image -->
 115          </div>
 116          <!-- /wp:column -->
 117  
 118          <!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
 119          <div class="wp-block-column">
 120              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
 121              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
 122              <!-- /wp:spacer -->
 123  
 124              <!-- wp:image {"aspectRatio":"1","scale":"cover","className":"is-style-rounded"} -->
 125              <figure class="wp-block-image is-style-rounded">
 126                  <img alt="" style="aspect-ratio:1;object-fit:cover" />
 127              </figure>
 128              <!-- /wp:image -->
 129  
 130              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
 131              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
 132              <!-- /wp:spacer -->
 133  
 134              <!-- wp:image {"aspectRatio":"16/9","scale":"cover","className":"is-style-rounded"} -->
 135              <figure class="wp-block-image is-style-rounded">
 136                  <img alt="" style="aspect-ratio:16/9;object-fit:cover" />
 137              </figure>
 138              <!-- /wp:image -->
 139  
 140              <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
 141              <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer">
 142              </div>
 143              <!-- /wp:spacer -->
 144  
 145              <!-- wp:image {"aspectRatio":"9/16","scale":"cover","className":"is-style-rounded"} -->
 146              <figure class="wp-block-image is-style-rounded">
 147                  <img alt="" style="aspect-ratio:9/16;object-fit:cover" />
 148              </figure>
 149              <!-- /wp:image -->
 150          </div>
 151          <!-- /wp:column -->
 152      </div>
 153      <!-- /wp:columns -->
 154  </div>
 155  <!-- /wp:group -->