columns-with-images.php 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <?php
  2. /**
  3. * Title: Columns with Circular images
  4. * Slug: gwp/columns-with-images
  5. * Categories: featured
  6. * Block Types: core/image, core/columns
  7. *
  8. * @package gwp
  9. * @since 1.0.0
  10. */
  11. ?>
  12. <!-- wp:columns {"align":"wide"} -->
  13. <div class="wp-block-columns alignwide">
  14. <!-- wp:column -->
  15. <div class="wp-block-column">
  16. <!-- wp:image {"align":"center","width":200,"height":200,"scale":"cover","sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
  17. <figure class="wp-block-image aligncenter size-full is-resized is-style-rounded"><img src="<?php echo esc_url( get_theme_file_uri( 'img/_gwp_icon.png' ) ); ?>" alt="" style="object-fit:cover;width:200px;height:200px" width="200" height="200"/></figure>
  18. <!-- /wp:image -->
  19. <!-- wp:paragraph {"align":"center"} --><p class="has-text-align-center"><?php echo esc_html_x( 'Sample content. Replace the text with your own content.', 'sample content', 'gwp' ); ?></p><!-- /wp:paragraph -->
  20. </div>
  21. <!-- /wp:column -->
  22. <!-- wp:column -->
  23. <div class="wp-block-column">
  24. <!-- wp:image {"align":"center","width":200,"height":200,"scale":"cover","sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
  25. <figure class="wp-block-image aligncenter size-full is-resized is-style-rounded"><img src="<?php echo esc_url( get_theme_file_uri( 'img/_gwp_icon.png' ) ); ?>" alt="" style="object-fit:cover;width:200px;height:200px" width="200" height="200"/></figure>
  26. <!-- /wp:image -->
  27. <!-- wp:paragraph {"align":"center"} -->
  28. <p class="has-text-align-center"><?php echo esc_html_x( 'Sample content. Replace the text with your own content.', 'sample content', 'gwp' ); ?></p>
  29. <!-- /wp:paragraph -->
  30. </div>
  31. <!-- /wp:column -->
  32. <!-- wp:column -->
  33. <div class="wp-block-column">
  34. <!-- wp:image {"align":"center","width":200,"height":200,"scale":"cover","sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
  35. <figure class="wp-block-image aligncenter size-full is-resized is-style-rounded"><img src="<?php echo esc_url( get_theme_file_uri( 'img/_gwp_icon.png' ) ); ?>" alt="" style="object-fit:cover;width:200px;height:200px" width="200" height="200"/></figure>
  36. <!-- /wp:image -->
  37. <!-- wp:paragraph {"align":"center"} --><p class="has-text-align-center"><?php echo esc_html_x( 'Sample content. Replace the text with your own content.', 'sample content', 'gwp' ); ?></p><!-- /wp:paragraph -->
  38. </div>
  39. <!-- /wp:column -->
  40. </div>
  41. <!-- /wp:columns -->