[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Title: Gallery Offset Full
   4   * Slug: ipsum/gallery-offset-full
   5   * Categories: gallery
   6   * Viewport width: 1280
   7   * Description: The offset gallery at full width — three columns of photographs with rounded corners, in mixed ratios.
   8   *
   9   * @package Ipsum
  10   * @since Ipsum 1.0
  11   */
  12  
  13  ?>
  14  <!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Gallery Offset Full Width', 'Name of the full-width offset gallery group', 'ipsum' ); ?>"},"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40","top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"default"}} -->
  15  <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--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)"><!-- wp:columns {"align":"full","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|30","left":"var:preset|spacing|30"},"margin":{"top":"0","bottom":"0"}}}} -->
  16  <div class="wp-block-columns alignfull" style="margin-top:0;margin-bottom:0"><!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
  17  <div class="wp-block-column"><!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
  18  <figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/ipsum-metal-table.webp?ver=<?php echo esc_attr( wp_get_theme( get_template() )->get( 'Version' ) ); ?>" alt="<?php echo esc_attr_x( 'A dark metal tabletop on a single thin leg against a hazy sky.', 'Alt text for the metal table image', 'ipsum' ); ?>" style="aspect-ratio:4/3;object-fit:cover"/></figure>
  19  <!-- /wp:image -->
  20  
  21  <!-- wp:spacer {"height":"var:preset|spacing|30","metadata":{"name":"<?php echo esc_html_x( 'XS', 'Name of the small spacer', 'ipsum' ); ?>"}} -->
  22  <div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
  23  <!-- /wp:spacer -->
  24  
  25  <!-- wp:image {"aspectRatio":"3/4","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
  26  <figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/ipsum-staircase.webp?ver=<?php echo esc_attr( wp_get_theme( get_template() )->get( 'Version' ) ); ?>" alt="<?php echo esc_attr_x( 'A black staircase climbing a white wall.', 'Alt text for the staircase image', 'ipsum' ); ?>" style="aspect-ratio:3/4;object-fit:cover"/></figure>
  27  <!-- /wp:image -->
  28  
  29  <!-- wp:spacer {"height":"var:preset|spacing|30","metadata":{"name":"<?php echo esc_html_x( 'XS', 'Name of the small spacer', 'ipsum' ); ?>"}} -->
  30  <div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
  31  <!-- /wp:spacer -->
  32  
  33  <!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
  34  <figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/ipsum-pendant-lamp.webp?ver=<?php echo esc_attr( wp_get_theme( get_template() )->get( 'Version' ) ); ?>" alt="<?php echo esc_attr_x( 'A glowing pendant lamp above a warm orange room.', 'Alt text for the pendant lamp image', 'ipsum' ); ?>" style="aspect-ratio:4/3;object-fit:cover"/></figure>
  35  <!-- /wp:image --></div>
  36  <!-- /wp:column -->
  37  
  38  <!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
  39  <div class="wp-block-column"><!-- wp:spacer {"height":"var:preset|spacing|50","metadata":{"name":"<?php echo esc_html_x( 'R', 'Name of the offset spacer', 'ipsum' ); ?>"}} -->
  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","sizeSlug":"large","linkDestination":"none"} -->
  44  <figure class="wp-block-image size-large"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/ipsum-monobloc-front.webp?ver=<?php echo esc_attr( wp_get_theme( get_template() )->get( 'Version' ) ); ?>" alt="<?php echo esc_attr_x( 'A blurred plastic chair in blue and cream tones.', 'Alt text for the monobloc chair image', 'ipsum' ); ?>" style="aspect-ratio:3/4;object-fit:cover"/></figure>
  45  <!-- /wp:image -->
  46  
  47  <!-- wp:spacer {"height":"var:preset|spacing|30","metadata":{"name":"<?php echo esc_html_x( 'XS', 'Name of the small spacer', 'ipsum' ); ?>"}} -->
  48  <div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
  49  <!-- /wp:spacer -->
  50  
  51  <!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
  52  <figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/ipsum-polygons.webp?ver=<?php echo esc_attr( wp_get_theme( get_template() )->get( 'Version' ) ); ?>" alt="<?php echo esc_attr_x( 'Rows of glossy black hollow cones catching the light.', 'Alt text for the polygons image', 'ipsum' ); ?>" style="aspect-ratio:4/3;object-fit:cover"/></figure>
  53  <!-- /wp:image -->
  54  
  55  <!-- wp:spacer {"height":"var:preset|spacing|30","metadata":{"name":"<?php echo esc_html_x( 'XS', 'Name of the small spacer', 'ipsum' ); ?>"}} -->
  56  <div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
  57  <!-- /wp:spacer -->
  58  
  59  <!-- wp:image {"aspectRatio":"3/4","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
  60  <figure class="wp-block-image size-large"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/ipsum-lead-letter.webp?ver=<?php echo esc_attr( wp_get_theme( get_template() )->get( 'Version' ) ); ?>" alt="<?php echo esc_attr_x( 'The number 27 fading into blue and pink light.', 'Alt text for the lead letter image', 'ipsum' ); ?>" style="aspect-ratio:3/4;object-fit:cover"/></figure>
  61  <!-- /wp:image --></div>
  62  <!-- /wp:column -->
  63  
  64  <!-- wp:column {"style":{"spacing":{"blockGap":"0"}}} -->
  65  <div class="wp-block-column"><!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
  66  <figure class="wp-block-image size-large"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/ipsum-capital.webp?ver=<?php echo esc_attr( wp_get_theme( get_template() )->get( 'Version' ) ); ?>" alt="<?php echo esc_attr_x( 'A capital A pressed into brushed metal.', 'Alt text for the capital letter image', 'ipsum' ); ?>" style="aspect-ratio:4/3;object-fit:cover"/></figure>
  67  <!-- /wp:image -->
  68  
  69  <!-- wp:spacer {"height":"var:preset|spacing|30","metadata":{"name":"<?php echo esc_html_x( 'XS', 'Name of the small spacer', 'ipsum' ); ?>"}} -->
  70  <div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
  71  <!-- /wp:spacer -->
  72  
  73  <!-- wp:image {"aspectRatio":"3/4","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
  74  <figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/ipsum-desk-fan.webp?ver=<?php echo esc_attr( wp_get_theme( get_template() )->get( 'Version' ) ); ?>" alt="<?php echo esc_attr_x( 'A desk fan blurred mid-spin against a blue background.', 'Alt text for the desk fan image', 'ipsum' ); ?>" style="aspect-ratio:3/4;object-fit:cover"/></figure>
  75  <!-- /wp:image -->
  76  
  77  <!-- wp:spacer {"height":"var:preset|spacing|30","metadata":{"name":"<?php echo esc_html_x( 'XS', 'Name of the small spacer', 'ipsum' ); ?>"}} -->
  78  <div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
  79  <!-- /wp:spacer -->
  80  
  81  <!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
  82  <figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/ipsum-portrait-editorial.webp?ver=<?php echo esc_attr( wp_get_theme( get_template() )->get( 'Version' ) ); ?>" alt="<?php echo esc_attr_x( 'A person in profile, in shadow against a blue sky.', 'Alt text for the editorial portrait image', 'ipsum' ); ?>" style="aspect-ratio:4/3;object-fit:cover"/></figure>
  83  <!-- /wp:image --></div>
  84  <!-- /wp:column --></div>
  85  <!-- /wp:columns --></div>
  86  <!-- /wp:group -->