Podcast Hero with Podcast Cover Image

[alaczek]

<!-- wp:group {"align":"full","style":{"color":{"background":"#151516","text":"#ffffff"}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#151516;color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":12} -->
<div style="height:12px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":4,"column1DesktopOffset":1,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":6,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":2,"className":"column1-desktop-grid__span-4 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-6 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-4 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-6 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 wp-block-jetpack-layout-gutter__nowrap"><!-- wp:jetpack/layout-grid-column {"verticalAlignment":"center"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none is-vertically-aligned-center"><!-- wp:image {"align":"full","id":3202,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://dotcompatterns.files.wordpress.com/2021/01/at-the-fork-cover.png?w=378" alt="" class="wp-image-3202"/></figure>
<!-- /wp:image --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column {"padding":"large","verticalAlignment":"center"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-large is-vertically-aligned-center"><!-- wp:heading {"style":{"typography":{"fontSize":"44px","lineHeight":"1.35"}}} -->
<h2 style="font-size:44px;line-height:1.35"><strong>Feeling lost? You don’t know which way to go? We’re here to help.</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"margin-bottom-none","style":{"typography":{"fontSize":"15px","lineHeight":"1.5"}}} -->
<p class="margin-bottom-none" style="font-size:15px;line-height:1.5">Listen on:</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Spotify</a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"background","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background-color has-text-color">Apple</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

<!-- wp:spacer {"height":12} -->
<div style="height:12px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group -->

[ianstewart]

Alignment here with this one is looking a bit strange with the size of the image, and the centred alignment. Any ideas on improving things here? Perhaps with an empty column for more control?

[alaczek]

How about if we use large padding on the right column only? I really (really, really) don't want to add more complexity to the structure. It would look like this:

Pattern site:

Spearhead:

[ianstewart]

It looks a bit better padded-out. Agreed on not adding structure. Is the image a rounded image or using gutenberg border-radius?

[alaczek]

Here the source image is rounded. The Gutenberg feature has just landed in 9.9, and we need theme support for this.

Shall we wait for this feature or lunach as is?

[alaczek]

Also, since this is a pattern, shall we add a couple more buttons?

[ianstewart]

I think we can wait on adding it to the library as a singular pattern and if/when we do let's revisit it and try and make it more useful as a general "podcast" header, perhaps with a more typical list of buttons a podcaster may want to add.

[alaczek]

The rounded image corners are still not supported, but I don't think it makes sense to wait. I added two more buttons, if I add anymore they'll wrap into the second line, so I think we should leave it at that.

<!-- wp:group {"align":"full","style":{"color":{"background":"#151516","text":"#ffffff"}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#151516;color:#ffffff"><!-- wp:spacer {"height":12} -->
<div style="height:12px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":4,"column1DesktopOffset":1,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":6,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":2,"className":"column1-desktop-grid__span-4 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-6 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-4 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-6 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 wp-block-jetpack-layout-gutter__nowrap"><!-- wp:jetpack/layout-grid-column {"verticalAlignment":"center"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none is-vertically-aligned-center"><!-- wp:image {"align":"full","id":3202,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://dotcompatterns.files.wordpress.com/2021/01/at-the-fork-cover.png?w=378" alt="" class="wp-image-3202"/></figure>
<!-- /wp:image --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column {"padding":"large","verticalAlignment":"center"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-large is-vertically-aligned-center"><!-- wp:heading {"style":{"typography":{"fontSize":"44px","lineHeight":"1.35"}}} -->
<h2 style="font-size:44px;line-height:1.35"><strong>Feeling lost? You don’t know which way to go? We’re here to help.</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"margin-bottom-none","style":{"typography":{"fontSize":"15px","lineHeight":"1.5"}}} -->
<p class="margin-bottom-none" style="font-size:15px;line-height:1.5">Listen on:</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"background","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background-color has-text-color">Apple</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline","style":{"color":{"text":"#ffffff"}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Spotify</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline","style":{"color":{"text":"#ffffff"}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Overcast</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline","style":{"color":{"text":"#ffffff"}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Stitcher</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

<!-- wp:spacer {"height":12} -->
<div style="height:12px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->