layout-with-two-images-and-text.php 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <?php
  2. /**
  3. * Title: Layout with two images and text
  4. * Slug: archeo/layout-with-two-images-and-text
  5. * Categories: featured, images
  6. */
  7. ?>
  8. <!-- wp:media-text {"align":"full","mediaPosition":"right","mediaLink":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/uxmal.jpg","mediaType":"image","imageFill":true,"focalPoint":{"x":"0.50","y":"0.90"},"backgroundColor":"foreground","textColor":"background"} -->
  9. <div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile is-image-fill has-background-color has-foreground-background-color has-text-color has-background"><figure class="wp-block-media-text__media" style="background-image:url(<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/uxmal.jpg);background-position:50% 90%"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/uxmal.jpg" alt="<?php _e( 'Photo of the Pyramid of the Magician, at Uxmal', 'archeo' ); ?>"/></figure><div class="wp-block-media-text__content">
  10. <!-- wp:columns --><div class="wp-block-columns">
  11. <!-- wp:column --><div class="wp-block-column">
  12. <!-- wp:spacer {"height":"min(10rem, 10vw)"} -->
  13. <div style="height:min(10rem, 10vw)" aria-hidden="true" class="wp-block-spacer"></div>
  14. <!-- /wp:spacer -->
  15. <!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"100","lineHeight":"1.2"}},"fontSize":"medium"} -->
  16. <p class="has-medium-font-size" style="font-style:normal;font-weight:100;line-height:1.2"><?php echo wp_kses_post( __( 'The Pyramid of the <br>Magician at Uxmal', 'archeo' ) ); ?></p>
  17. <!-- /wp:paragraph -->
  18. <!-- wp:image {"align":"left","sizeSlug":"full","linkDestination":"none"} -->
  19. <figure class="wp-block-image alignleft size-full"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/pyramid.jpg" alt="<?php _e( 'Photograph by Désiré Charnay, 1862 to 1863', 'archeo' ); ?>"/><figcaption><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-background-color"><em><?php _e( 'Photograph by Désiré Charnay, 1862 – 1863', 'archeo' ); ?></em></mark></figcaption></figure>
  20. <!-- /wp:image -->
  21. </div><!-- /wp:column -->
  22. <!-- wp:column -->
  23. <div class="wp-block-column">
  24. <!-- wp:spacer {"height":"min(43rem, 43vw)"} -->
  25. <div style="height:min(43rem, 43vw)" aria-hidden="true" class="wp-block-spacer"></div>
  26. <!-- /wp:spacer -->
  27. <!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5"}},"fontSize":"small"} -->
  28. <p class="has-small-font-size" style="line-height:1.5"><?php _e( 'Uxmal is an ancient Maya city located in present-day Mexico. It is considered one of the most important archaeological sites of Mayan culture.', 'archeo' ); ?></p>
  29. <!-- /wp:paragraph -->
  30. <!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5"}},"fontSize":"small"} -->
  31. <p class="has-small-font-size" style="line-height:1.5"><em><?php _e( 'On the right: Governor\'s Palace, detail of the main gate', 'archeo' ); ?></em></p>
  32. <!-- /wp:paragraph -->
  33. <!-- wp:spacer {"height":"min(10rem, 10vw)"} -->
  34. <div style="height:min(10rem, 10vw)" aria-hidden="true" class="wp-block-spacer"></div>
  35. <!-- /wp:spacer -->
  36. </div><!-- /wp:column -->
  37. </div><!-- /wp:columns -->
  38. </div></div><!-- /wp:media-text -->