fix: decrease image size for Collections in certain cases

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR adds some image sizes to the Collections code so we can reduce the image size that's used in some cases.

Originally, the code used medium (defined in the Media Library, but defaulted to 300px), post-thumbnail (which is set to 1200px in our theme), and full size.

This PR adds a small (550px), medium (800px), and large (1200px) image size, and tries to use them in a way that we're loading retina-sized images when we can, but also not loading anything beyond 1200px wide. This means a single collection taking up the full width of a one-column wide template will not be perfectly sharp on retina screens, but I think it's a sort of fine line we have to walk with not loading absolutely huge images.

See: NPPM-2520

How to test the changes in this Pull Request:

1. Apply this PR.
2. Regenerate the thumbnails (wp media regenerate or use the Regenerate Thumbnails plugin).
3. View the /collections landing page and confirm that the main grid of images is using the new "small" size, 550px wide (it's kind of a random number, but it is double the size that these Collections can display at when they wrap to a three column grid for tablet-sized screens).
4. Create a page and add 9 Collection blocks of different settings:
   • For the first six blocks, set them to use the grid layout and set them to one column, two columns, three columns... until you have a set that show the range from 1-6 columns.
   • For the final three blocks, set them to use the list layout and set the image sizes to small, medium, and large.
5. Go through the images and open each in a new tab:
   • For the grid layout, the one and two column blocks should use a 1200px wide image; the 3 column block should use a 800px wide image, and the four to six column blocks should use a 550px wide image
   • For the list layout, the small image should be 550px, the medium image should be 800px, and the large image should be 1200px
6. Do a general review of image quality using a retina screen. It will be most helpful if you use a graphic with text, like a true Collections cover from our of our publishers -- text and sharp edges will show image quality issues much readier than a regular photograph. It's expected that some will be a little softer than they were, but if any seem to be of a noticeable low quality, please flag here!

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[Copilot]

Pull request overview

This PR optimizes image sizes used in Collections by introducing custom image sizes and applying smaller sizes for multi-column grid layouts. The change reduces bandwidth usage while maintaining acceptable image quality for grid displays with 4+ columns.

Changes:

• Introduced three custom image sizes (newspack_collection_small, newspack_collection_medium, newspack_collection_large) to replace WordPress default sizes
• Updated get_image_size_from_attributes() to return smaller image sizes for grid layouts with 4+ columns (550px) and 3 columns (800px)
• Updated corresponding unit tests to reflect the new image size mappings

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.

File	Description
src/blocks/collections/class-collections-block.php	Adds custom image size registration and updates logic to select appropriate sizes based on column count
tests/unit-tests/collections/class-test-collections-block.php	Updates test expectations to match new image size mappings and adds comprehensive coverage for different column scenarios

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

@laurelfulford I've opened a new pull request, #4400, to work on those changes. Once the pull request is ready, I'll request review from you.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[dkoo]

This should work fine, but we already have some custom image sizes that are pretty close or identical to these. Would it be acceptable to use these instead, or at least for the medium/large sizes?

+-----------------------------------------------+-------+--------+------+-------+
| name                                          | width | height | crop | ratio |
+-----------------------------------------------+-------+--------+------+-------+
| newspack-footer-logo                          | 400   | 9999   | soft | N/A   |
| newspack-featured-image-small                 | 780   | 9999   | soft | N/A   |
| newspack-featured-image                       | 1200  | 9999   | soft | N/A   |
+-----------------------------------------------+-------+--------+------+-------+

[laurelfulford]

Thanks @dkoo!

This should work fine, but we already have some custom image sizes that are pretty close or identical to these.

The only issue is that those image sizes live in the classic theme, they won't be available if you're using the block theme 😬 We could add a check and fallback to the classic theme ones if you're using that, if that wouldn't be too yucky?

[dkoo]

The only issue is that those image sizes live in the classic theme, they won't be available if you're using the block theme 😬 We could add a check and fallback to the classic theme ones if you're using that, if that wouldn't be too yucky?

Gotcha, that makes sense. No need for the fancy fallbacks, then—better to keep things simple. We'll just want to make sure to regenerate media for sites who want the new sizes.

[dkoo]

This is looking good, except the only scenario where I think the image ends up not being high-resolution enough is if you assign an image with a landscape-type aspect ratio to a collection and then show that collection in a single column. The CSS for collections enforces a 3/4 portrait-type aspect ratio, so the image is cropped on the sides and ends up being a little blurry. If you choose a portrait-style image, it's not a problem, and the aspect ratio + cropping didn't seem as noticeable to me at the smaller sizes.

[laurelfulford]

Thanks @dkoo!

This is looking good, except the only scenario where I think the image ends up not being high-resolution enough is if you assign an image with a landscape-type aspect ratio to a collection and then show that collection in a single column. The CSS for collections enforces a 3/4 portrait-type aspect ratio, so the image is cropped on the sides and ends up being a little blurry. If you choose a portrait-style image, it's not a problem, and the aspect ratio + cropping didn't seem as noticeable to me at the smaller sizes.

This is a good catch! I'm going to treat it as an "edge case" for now so we can keep the image sizes smaller, but will keep an eye out if it comes up from a publisher and either bump up an image size or maybe add an additional one.

[github-actions]

Hey @laurelfulford, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

[github-actions]

🎉 This PR is included in version 6.31.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 6.32.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 6.32.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀