Skip to content

Instantly share code, notes, and snippets.

@westonruter
Last active September 15, 2023 00:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save westonruter/72d00dfd9d59f2c1870524f8dcd3cb79 to your computer and use it in GitHub Desktop.
Save westonruter/72d00dfd9d59f2c1870524f8dcd3cb79 to your computer and use it in GitHub Desktop.
<!-- wp:media-text {"mediaId":112,"mediaType":"image","mediaWidth":32} -->
<div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:32% auto"><figure class="wp-block-media-text__media"><img src="http://example.org/wp-content/uploads/2023/09/image.jpeg" alt="" class="wp-image-112 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} -->
<p>The moon is coming into view!</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->
<!-- wp:image {"id":115,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://example.org/wp-content/uploads/2023/09/image-3-1024x1024.jpeg" alt="" class="wp-image-115"/><figcaption class="wp-element-caption">"<a href="https://www.rawpixel.com/image/8718239/photo-image-moon-space-planet" target="_blank" rel="noreferrer noopener">Taken by Apollo 8 crewmember</a>"/ <a href="https://creativecommons.org/publicdomain/zero/1.0/?ref=openverse" target="_blank" rel="noreferrer noopener">CC0 1.0</a></figcaption></figure>
<!-- /wp:image -->
@westonruter
Copy link
Author

The Image & Text block has "Stack on mobile" setting:

image

This can cause a different image to be the LCP element on mobile vs desktop (in dotted red outline):

Mobile LCP Image Desktop LCP Image
image image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment