Support portrait and landscape feature image sizes

douglas-johnson commented 1 year ago

Background

On Shop Catalog we have an established pattern for feature images that should allow the vast majority of products to support portrait, landscape and square version of their feature image. The products block is all square because of the way we designed it for Creepy Catalog where it has a film strip frame around it.

We recently added the reel style and the square images make the final output a little larger than necessary. If we were able to use the portrait crop, the resulting image would contain more of the product, especially in the case of books.

That could mean we can fit more products on the page horizontally in the reel layout.

Details

A user should be able to select between square, portrait and landscape image orientations.
Square is currently hard coded into the JS and PHP versions of the output
The image sizes from Shop Catalog are listed below.
Because Shop Catalog is using the WordPress VIP CDN, we can dynamically crop images using URL parameters. Updating the image URLs with new dimensions should work automatically.

// 3:4
add_image_size( 'sc_portrait_sm', 384, 512, true ); 
add_image_size( 'sc_portrait_md', 768, 1024, true );
add_image_size( 'sc_portrait_lg', 1152, 1536, true );

// Square
add_image_size( 'sc_square_sm', 384, 384, true );   
add_image_size( 'sc_square_md', 768, 768, true );
add_image_size( 'sc_square_lg', 1152, 1152, true );

// 3:2
add_image_size( 'sc_landscape_sm', 384, 256, true );    
add_image_size( 'sc_landscape_md', 768, 512, true );
add_image_size( 'sc_landscape_lg', 1152, 768, true );

douglas-johnson commented 1 year ago

I am rewriting this issue for the Shopify Blocks instead of the products block, but the idea is the same.

We currently only support the 1:1 square aspect ratio for images in the Shopify block. We commonly also have images in 3:2 landscape and 3:4 portrait aspect ratios.

Ideally, product photos are uploaded as large 3:2 images and are composed in such a way that 1:1, 2:1 and 3:4 crops still contain the subject.

Just like we would do with the WordPress VIP CDN, Shopify lets you adjust the dimensions of an image using the CDN URL. You can experimenrt with that here: https://cdn.shopify.com/

Currently, we set the width in the URL, and then assume the image will be a square when we add width and height to the <img> tag.

https://github.com/thoughtis/cata-blocks/blob/0.8.4-beta1/blocks/shopify/includes/render/class-render.php#L100-L107

We can obtain the width and height of the full size image from GraphQL like this:

{
    products(first: 3) {
        nodes {
            title
            featuredImage {
                altText
                width
                height
                url
            }
        }
    }
}

Once we know the maximum dimenstions, we could provide them as a parameter along with the desired aspect ratio and an arrray of widths to produce <img> tags.

We do this in the rest block. For example, we do it here for the 4:5 aspect ratio image we use in the middle of the trending layout.

https://github.com/thoughtis/cata-blocks/blob/0.8.4-beta1/blocks/rest/includes/layout/trending/class-trending.php#L191

douglas-johnson commented 1 year ago

Also, we do sort of the same calculation in JavaScript for the REST API block. I mean to link to that along with the server side rendered version. https://github.com/thoughtis/cata-blocks/blob/main/blocks/rest/src/components/image/get-dimensions.js

thoughtis / cata-blocks

Support portrait and landscape feature image sizes #59

Background

Details