From 232f6f0725d7b3ad5b85775de9f1a6a0fee1212d Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Wed, 27 Sep 2023 11:39:16 -0400 Subject: [PATCH] Site screenshot: Add responsive image support to the screenshot block (#175) * Site grid: Update breakpoint for 3-column display Fixes #171 * Site screenshot: Add size as a separate parameter from type * Images: Add extra sizes for desktop screenshot * Site screenshot: Add responsive image support to the screenshot block Fixes #156 * Use a "location" attribute to pass better information to block * Set the `location` attribute when displaying screenshots * Add a readme to the screenshot block --- .../themes/wporg-showcase-2022/functions.php | 13 +++++- .../patterns/_site-grid-featured.php | 2 +- .../patterns/_site-grid.php | 2 +- .../patterns/_site-hero.php | 2 +- .../patterns/screenshot-auditor.php | 4 +- .../src/site-screenshot/block.json | 5 +++ .../src/site-screenshot/index.php | 4 +- .../src/site-screenshot/readme.md | 41 +++++++++++++++++++ .../src/site-screenshot/render.php | 37 ++++++++++++++++- .../wporg-showcase-2022/src/style/style.scss | 2 +- .../wporg-showcase-2022/templates/single.html | 4 +- 11 files changed, 104 insertions(+), 12 deletions(-) create mode 100644 source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/readme.md diff --git a/source/wp-content/themes/wporg-showcase-2022/functions.php b/source/wp-content/themes/wporg-showcase-2022/functions.php index 9e45c2d4..f3f6870e 100644 --- a/source/wp-content/themes/wporg-showcase-2022/functions.php +++ b/source/wp-content/themes/wporg-showcase-2022/functions.php @@ -62,6 +62,17 @@ function setup_theme() { add_image_size( 'screenshot-desktop', 2044, 1150, array( 'center', 'top' ) ); add_image_size( 'screenshot-mobile', 750, 1334, array( 'center', 'top' ) ); + // More desktop sizes to support responsive images in the grid. + // In production these will be generated using Photon CDN, but we can set + // them up as real sizes for local support too. + // Images in the grid are display from 340-740px wide. This set of sizes + // should cover 1x and 2x resolution. + $desktop_ratio = 1150 / 2044; + add_image_size( 'screenshot-desktop-1400', 1400, 1400 * $desktop_ratio, array( 'center', 'top' ) ); + add_image_size( 'screenshot-desktop-1100', 1100, 1100 * $desktop_ratio, array( 'center', 'top' ) ); + add_image_size( 'screenshot-desktop-800', 800, 800 * $desktop_ratio, array( 'center', 'top' ) ); + add_image_size( 'screenshot-desktop-500', 500, 500 * $desktop_ratio, array( 'center', 'top' ) ); + // Add tonesque support so that Jetpack loads the class. add_theme_support( 'tonesque' ); @@ -470,7 +481,7 @@ function jetpack_related_posts_display( $markup, $post_id, $related_posts, $bloc
- +
diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid-featured.php b/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid-featured.php index ae835cbd..0767da5a 100644 --- a/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid-featured.php +++ b/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid-featured.php @@ -39,7 +39,7 @@ - +
diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid.php b/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid.php index c8a5c826..c37ee2a0 100644 --- a/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid.php +++ b/source/wp-content/themes/wporg-showcase-2022/patterns/_site-grid.php @@ -38,7 +38,7 @@ - +
diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/_site-hero.php b/source/wp-content/themes/wporg-showcase-2022/patterns/_site-hero.php index 199b2022..b68b479c 100644 --- a/source/wp-content/themes/wporg-showcase-2022/patterns/_site-hero.php +++ b/source/wp-content/themes/wporg-showcase-2022/patterns/_site-hero.php @@ -42,7 +42,7 @@
- +
diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/screenshot-auditor.php b/source/wp-content/themes/wporg-showcase-2022/patterns/screenshot-auditor.php index f139abe1..5de1ef1f 100644 --- a/source/wp-content/themes/wporg-showcase-2022/patterns/screenshot-auditor.php +++ b/source/wp-content/themes/wporg-showcase-2022/patterns/screenshot-auditor.php @@ -41,7 +41,7 @@

-
+
@@ -49,7 +49,7 @@

-
+ diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/block.json b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/block.json index dd8d04b8..adec77ec 100644 --- a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/block.json +++ b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/block.json @@ -21,6 +21,11 @@ "type": "string", "default": "desktop", "enum": [ "desktop", "mobile" ] + }, + "location": { + "type": "string", + "default": "grid", + "enum": [ "grid", "hero", "header", "row" ] } }, "supports": { diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/index.php b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/index.php index 179b397e..a410ee46 100644 --- a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/index.php +++ b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/index.php @@ -30,14 +30,14 @@ function init() { * * @param WP_Post $post * @param string $type + * @param string $size * @return string */ -function get_site_screenshot_src( $post, $type = 'desktop' ) { +function get_site_screenshot_src( $post, $type = 'desktop', $size = 'screenshot-desktop' ) { $screenshot_url = false; $media_id = get_post_meta( $post->ID, 'screenshot-' . $type, true ); $cache_key = '20230913'; // To break out of cached image. - $size = 'screenshot-' . $type; $all_sizes = wp_get_registered_image_subsizes(); if ( ! isset( $all_sizes[ $size ] ) ) { return null; diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/readme.md b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/readme.md new file mode 100644 index 00000000..6f890317 --- /dev/null +++ b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/readme.md @@ -0,0 +1,41 @@ +# Site Screenshots + +Display the screenshot for the current post (site). This uses the uploaded image if available, otherwise falls back to using the `domain` to take and load a screenshot from mshots. + +The mshots behavior uses the [Interactivity API](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/docs/1-getting-started.md) to provide a CSS-controlled loading state. + +When a local image is used, the block may use responsive images, depending on the location. + +This block also controls loading the panel into the Document Settings sidebar for uploading the desktop & mobile images, and setting the custom background color. + +## Attributes + +### `isLink`: boolean + +- Default: false + +If true, will wrap the screenshot in a link to the current post. + +### `lazyLoad`: boolean + +- Default: false + +Controls the `loading` attribute on the `img` tag. This is currently not used for mshots images. + +### `type`: "desktop" | "mobile" + +- Default: "desktop" + +Controls which image to show/capture. When `desktop`, it uses the image saved as `screenshot-desktop` or captures from mshots at 1920x1080. When `mobile`, it uses the image saves as `screenshot-mobile` or captures from mshots at 375x667. + +### `location`: "grid" | "hero" | "header" | "row" + +- Default: "grid" + +This indicates to the block where in the layout this will be rendered. This is used to control the responsive image hints. + +- grid: the main site grid, on homepage or archives, which displays at 3, 2, or 1 column depending on screen size. +- hero: the homepage header, does not use responsive images. +- header: single site page header, does not use responsive images. +- row: the "related sites" section, which displays at 3 or 1 column depending on screen size. + diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/render.php b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/render.php index 9a6fc965..829448ee 100644 --- a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/render.php +++ b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/render.php @@ -13,7 +13,8 @@ $has_link = isset( $attributes['isLink'] ) && true == $attributes['isLink']; $is_lazyload = isset( $attributes['lazyLoad'] ) && true === $attributes['lazyLoad']; -$screenshot = get_site_screenshot_src( $current_post, $attributes['type'] ); +$img_size = ( 'desktop' === $attributes['type'] ) ? 'screenshot-desktop' : 'screenshot-mobile'; +$screenshot = get_site_screenshot_src( $current_post, $attributes['type'], $img_size ); $is_mshots = str_contains( $screenshot, 'mshots' ); $classname = 'is-size-' . esc_attr( $attributes['type'] ); @@ -21,6 +22,36 @@ $classname .= ' is-linked-image'; } +$has_responsive_images = ! $is_mshots && 'desktop' === $attributes['type'] && ( 'grid' === $attributes['location'] || 'row' === $attributes['location'] ); + +// If the block needs responsive images, set up more image URLs & sizes attribute. +if ( $has_responsive_images ) { + $screenshot = get_site_screenshot_src( $current_post, $attributes['type'], 'screenshot-desktop-1100' ); + $screenshot_srcset = get_site_screenshot_src( $current_post, $attributes['type'], 'screenshot-desktop-500' ) . ' 500w, '; + $screenshot_srcset .= get_site_screenshot_src( $current_post, $attributes['type'], 'screenshot-desktop-800' ) . ' 800w, '; + $screenshot_srcset .= get_site_screenshot_src( $current_post, $attributes['type'], 'screenshot-desktop-1100' ) . ' 1100w, '; + $screenshot_srcset .= get_site_screenshot_src( $current_post, $attributes['type'], 'screenshot-desktop-1400' ) . ' 1400w'; + + // Set up the sizes attribute. The value here should reflect the width of + // the column, i.e., the displayed with of the image. + // On very large screens, columns are a fixed size. + $sizes = '(min-width: 1920px) 533px,'; + // Handle dynamic column sizes. This math is not really reflective of the + // layout, but it works well. Real math would be tricky due to the scaling + // column gap value (--wp--preset--spacing--40). + // See https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#aa-being-more-chill-about-sizes + if ( 'grid' === $attributes['location'] ) { + $sizes .= '(min-width: 1601px) calc(25vw + 30px),'; + $sizes .= '(min-width: 801px) calc(50vw - 125px),'; + } else { + // In "row", this stays 3-column until flipping to one-column. + $sizes .= '(min-width: 801px) calc(25vw + 30px),'; + } + // One column—this one's actually accurate! At one column, we only need to + // account for site padding & border width. + $sizes .= 'calc(100vw - 60px)'; +} + // Initial state to pass to Interactivity API. // This handles the image data (used to load image from mshots) and current // state information (like errors). @@ -56,6 +87,10 @@ class="wporg-site-screenshot__mshot-container" + srcset="" + sizes="" + alt=" false ) ); ?>" loading="" /> diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss index 69e7759e..cb9e2d62 100644 --- a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss @@ -152,7 +152,7 @@ a:where(:not(.wp-element-button)):focus-visible { } } -@media (max-width: 1440px) { +@media (max-width: 1600px) { .wp-block-post-template.is-layout-grid.columns-3:not(.wporg-related-posts) { grid-template-columns: repeat(2, minmax(0, 1fr)); } diff --git a/source/wp-content/themes/wporg-showcase-2022/templates/single.html b/source/wp-content/themes/wporg-showcase-2022/templates/single.html index 219e979a..685fb994 100644 --- a/source/wp-content/themes/wporg-showcase-2022/templates/single.html +++ b/source/wp-content/themes/wporg-showcase-2022/templates/single.html @@ -6,9 +6,9 @@
- + - +