Alternating Image and Text

[alaczek]

This pattern comes from the Munchies theme. I limited the number of rows to two - that's enough to showcase the pattern.

Screenshot:

<!-- wp:group {"layout":{"inherit":true,"type":"constrained"},"align":"wide","style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-group alignwide"><!-- wp:media-text {"mediaId":6726,"mediaLink":"https://dotcompatterns.wordpress.com/?attachment_id=6726","mediaType":"image","imageFill":true} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(https://dotcompatterns.files.wordpress.com/2022/09/pexels-james-frid-2227960.jpg?w=1024);background-position:50% 50%"><img src="https://dotcompatterns.files.wordpress.com/2022/09/pexels-james-frid-2227960.jpg?w=1024" alt="" class="wp-image-6726 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:group {"layout":{"inherit":false},"style":{"spacing":{"padding":{"top":"20%","bottom":"20%"}}}} -->
<div class="wp-block-group" style="padding-top:20%;padding-bottom:20%"><!-- wp:heading -->
<h2>The Menu</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"placeholder":"Content…"} -->
<p>Fresh ingredients are the key to any good meal. We source our food locally where possible and work hard to maintain strong relationships with small suppliers for anything we need to be brought in.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button {"fontSize":"normal"} -->
<div class="wp-block-button has-custom-font-size has-normal-font-size"><a class="wp-block-button__link wp-element-button" href="#">View menu</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text -->

<!-- wp:media-text {"mediaPosition":"right","mediaId":6727,"mediaLink":"https://dotcompatterns.wordpress.com/?attachment_id=6727","mediaType":"image","imageFill":true} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile is-image-fill"><div class="wp-block-media-text__content"><!-- wp:group {"layout":{"inherit":false},"style":{"spacing":{"padding":{"top":"20%","bottom":"20%"}}}} -->
<div class="wp-block-group" style="padding-top:20%;padding-bottom:20%"><!-- wp:heading -->
<h2>The Food Truck</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"placeholder":"Content…"} -->
<p>At heart, we’re all about burgers. Beautiful, hand-made, mouth-watering burgers. Made with fresh, local ingredients. Right in front of you. Our fan favorites menu is always available. We also like to experiment. Check out our Instagram feed for our newest creations and be among the first to try them.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button {"fontSize":"normal"} -->
<div class="wp-block-button has-custom-font-size has-normal-font-size"><a class="wp-block-button__link wp-element-button">Follow us on Instagram</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div><figure class="wp-block-media-text__media" style="background-image:url(https://dotcompatterns.files.wordpress.com/2022/09/pexels-kristina-paukshtite-983297.jpg?w=1024);background-position:50% 50%"><img src="https://dotcompatterns.files.wordpress.com/2022/09/pexels-kristina-paukshtite-983297.jpg?w=1024" alt="" class="wp-image-6727 size-full"/></figure></div>
<!-- /wp:media-text --></div>
<!-- /wp:group -->

Preview: https://dotcompatterns.wordpress.com/?p=6721&preview=true

cc @onuro @iamtakashi

[iamtakashi]

I limited the number of rows to two - that's enough to showcase the pattern. Good call 👍

I know this work was subcontracted, and I don't like both images. Especially, the one on the bottom right is terrible :) Can we have different images for dotcom patterns?

[alaczek]

Closing in favor of #277