beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Archeo: Image with headline and description pattern (#5467)

Browse source 
* created pattern

* Use a responsive font size for the heading, reduce margin on the heading, reduce bottom padding.

* Move text decoration to an attribute

* Update image to transparent version

* move text to the right

* fix broken block markup

* Remove transparent pixels in the image.

* Inherit layout

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Kjell Reigstad <kjell@kjellr.com>
This commit is contained in:
Maggie 2022-02-08 16:07:05 +01:00 committed by GitHub
parent 131d3062c8
commit d18fdd1bae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
archeo/assets/images/chahk.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 MiB

1
archeo/inc/block-patterns.php
View file

@ -43,6 +43,7 @@ function archeo_register_block_patterns() {
$block_patterns = array(
'headline-over-dark-image',
'image-with-headline-on-dark-background',
'image-with-headline-description',
'image-with-headline-and-description',
);

19
archeo/inc/patterns/image-with-headline-description.php Normal file
View file

@ -0,0 +1,19 @@
<?php
/**
* Image with headline and description
*/
return array(
'title' => __( 'Image with headline and description', 'archeo' ),
'categories' => array( 'pages' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"5vw","right":"5vw","bottom":"0","left":"5vw"}}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignfull" style="padding-top:5vw;padding-right:5vw;padding-bottom:0;padding-left:5vw"><!-- wp:media-text {"mediaLink":"' . esc_url( get_template_directory_uri() ) . '/assets/images/chahk.png","mediaType":"image","mediaWidth":64,"verticalAlignment":"top"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-top" style="grid-template-columns:64% auto"><figure class="wp-block-media-text__media"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/chahk.png" alt="' . esc_attr__( 'Chahk: rain deity', 'archeo' ) . '"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"textAlign":"right","style":{"typography":{"fontSize":"clamp(64px, 6vw, 100px)","lineHeight":"1","textTransform":"uppercase"},"spacing":{"margin":{"bottom":"48px"}}}} -->
<h2 class="has-text-align-right" id="chahk-raindeity" style="font-size:clamp(64px, 6vw, 100px);line-height:1;margin-bottom:48px;text-transform:uppercase">' . wp_kses_post( __( 'Chahk:<br>Rain<br>deity', 'archeo' ) ) . '</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"right","fontSize":"small"} -->
<p class="has-text-align-right has-small-font-size">' . wp_kses_post( __( 'Chaahk is shown here clutching <br>his axe, ready to strike rain <br>thunder and rain from the <br>clouds. This sculpture was <br>likely created in the Puuc hills<br>of Yucatan and Campeche.', 'archeo' ) ) . '</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:group -->',
);