Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improved Image Fit with Fastly #1976

Merged
merged 5 commits into from
Nov 15, 2019
Merged

Improved Image Fit with Fastly #1976

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f80071a
Sends fit image optimization parameter to fastly
supernova-at Nov 14, 2019
f14eb91
Updates snapshots
supernova-at Nov 14, 2019
61ff479
Removes explicit height on categoryTile
supernova-at Nov 14, 2019
59e2639
Merge branch 'develop' into supernova/159_image_ratio
supernova-at Nov 14, 2019
653b2de
Merge branch 'develop' into supernova/159_image_ratio
dpatil-magento Nov 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/venia-ui/lib/components/CategoryList/categoryTile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
display: block;
height: 5rem;
object-fit: cover;
object-position: center;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't strictly necessary I suppose, the initial value of 50% 50% will have the same result.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unless you think it's better for readability (ie. the common developer doesn't know centering is the default), let's remove it. Not going to block my approval though.

}

.image_empty {
Expand Down
1 change: 1 addition & 0 deletions packages/venia-ui/lib/components/CategoryList/categoryTile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const CategoryTile = props => {
<Image
alt={item.name}
classes={{ image: classes.image, root: classes.imageContainer }}
height={IMAGE_WIDTH}
resource={image.url}
type={image.type}
width={IMAGE_WIDTH}
Expand Down
18 changes: 9 additions & 9 deletions packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,15 +65,15 @@ exports[`renders correctly with valid item data 1`] = `
onLoad={[MockFunction]}
sizes="(max-width: 640px) 300px, 840px"
src="/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=100&height=375"
srcSet="/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=40&height=50 40w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=80&height=100 80w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=160&height=200 160w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=320&height=400 320w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=640&height=800 640w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=960&height=1200 960w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=1280&height=1600 1280w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=1600&height=2000 1600w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=2560&height=3200 2560w"
srcSet="/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=320&height=400&fit=cover 320w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=640&height=800&fit=cover 640w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=960&height=1200&fit=cover 960w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
/media/catalog/product/foo/bar/pic.png?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
width={100}
/>
</div>
Expand Down
18 changes: 9 additions & 9 deletions packages/venia-ui/lib/components/Image/___tests__/__snapshots__/image.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ exports[`renders an image correctly when given resource 1`] = `
onLoad={[MockFunction]}
sizes="100px"
src="/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=100"
srcSet="/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=40&height=50 40w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=80&height=100 80w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=160&height=200 160w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=320&height=400 320w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=640&height=800 640w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=960&height=1200 960w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=1280&height=1600 1280w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=1600&height=2000 1600w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=2560&height=3200 2560w"
srcSet="/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=320&height=400&fit=cover 320w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=640&height=800&fit=cover 640w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=960&height=1200&fit=cover 960w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
/media/catalog/product/timeless.jpg?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
width={100}
/>
</div>
Expand Down
90 changes: 45 additions & 45 deletions ...enia-ui/lib/components/ProductImageCarousel/__tests__/__snapshots__/carousel.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,15 +129,15 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
onLoad={[Function]}
sizes="640px"
src="/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=640"
srcSet="/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=40&height=50 40w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=80&height=100 80w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=160&height=200 160w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=320&height=400 320w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=640&height=800 640w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=960&height=1200 960w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=1280&height=1600 1280w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=1600&height=2000 1600w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=2560&height=3200 2560w"
srcSet="/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=320&height=400&fit=cover 320w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=640&height=800&fit=cover 640w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=960&height=1200&fit=cover 960w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
width={640}
/>
</div>
Expand Down Expand Up @@ -193,15 +193,15 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
onLoad={[Function]}
sizes="135px"
src="/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=135&height=170"
srcSet="/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=40&height=50 40w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=80&height=100 80w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=160&height=200 160w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=320&height=400 320w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=640&height=800 640w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=960&height=1200 960w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=1280&height=1600 1280w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=1600&height=2000 1600w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=2560&height=3200 2560w"
srcSet="/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=320&height=400&fit=cover 320w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=640&height=800&fit=cover 640w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=960&height=1200&fit=cover 960w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
/media/catalog/product/thumbnail1.png?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
width={135}
/>
</div>
Expand Down Expand Up @@ -230,15 +230,15 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
onLoad={[Function]}
sizes="135px"
src="/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=135&height=170"
srcSet="/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=40&height=50 40w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=80&height=100 80w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=160&height=200 160w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=320&height=400 320w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=640&height=800 640w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=960&height=1200 960w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=1280&height=1600 1280w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=1600&height=2000 1600w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=2560&height=3200 2560w"
srcSet="/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=320&height=400&fit=cover 320w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=640&height=800&fit=cover 640w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=960&height=1200&fit=cover 960w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
/media/catalog/product/thumbnail2.png?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
width={135}
/>
</div>
Expand Down Expand Up @@ -267,15 +267,15 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
onLoad={[Function]}
sizes="135px"
src="/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=135&height=170"
srcSet="/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=40&height=50 40w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=80&height=100 80w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=160&height=200 160w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=320&height=400 320w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=640&height=800 640w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=960&height=1200 960w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=1280&height=1600 1280w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=1600&height=2000 1600w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=2560&height=3200 2560w"
srcSet="/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=320&height=400&fit=cover 320w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=640&height=800&fit=cover 640w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=960&height=1200&fit=cover 960w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
/media/catalog/product/thumbnail3.png?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
width={135}
/>
</div>
Expand Down Expand Up @@ -304,15 +304,15 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
onLoad={[Function]}
sizes="135px"
src="/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=135&height=170"
srcSet="/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=40&height=50 40w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=80&height=100 80w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=160&height=200 160w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=320&height=400 320w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=640&height=800 640w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=960&height=1200 960w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=1280&height=1600 1280w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=1600&height=2000 1600w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=2560&height=3200 2560w"
srcSet="/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=320&height=400&fit=cover 320w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=640&height=800&fit=cover 640w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=960&height=1200&fit=cover 960w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
/media/catalog/product/thumbnail4.png?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
width={135}
/>
</div>
Expand Down
36 changes: 18 additions & 18 deletions ...nia-ui/lib/components/ProductImageCarousel/__tests__/__snapshots__/thumbnail.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@ exports[`renders root class if not the active Thumbnail 1`] = `
onLoad={[Function]}
sizes="135px"
src="/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=135&height=170"
srcSet="/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=40&height=50 40w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=80&height=100 80w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=160&height=200 160w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=320&height=400 320w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=640&height=800 640w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=960&height=1200 960w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=1280&height=1600 1280w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=1600&height=2000 1600w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=2560&height=3200 2560w"
srcSet="/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=320&height=400&fit=cover 320w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=640&height=800&fit=cover 640w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=960&height=1200&fit=cover 960w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
width={135}
/>
</div>
Expand Down Expand Up @@ -65,15 +65,15 @@ exports[`renders the Thumbnail component correctly 1`] = `
onLoad={[Function]}
sizes="135px"
src="/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=135&height=170"
srcSet="/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=40&height=50 40w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=80&height=100 80w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=160&height=200 160w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=320&height=400 320w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=640&height=800 640w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=960&height=1200 960w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=1280&height=1600 1280w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=1600&height=2000 1600w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=2560&height=3200 2560w"
srcSet="/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=320&height=400&fit=cover 320w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=640&height=800&fit=cover 640w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=960&height=1200&fit=cover 960w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
/media/catalog/product/thumbnail.png?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
width={135}
/>
</div>
Expand Down
3 changes: 2 additions & 1 deletion packages/venia-ui/lib/util/images.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ const generateURL = (imageURL, mediaBase) => (width, height) => {
const url = resourceUrl(imageURL, {
type: mediaBase,
width,
height
height,
fit: 'cover'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the change that actually fixes the issue.

});

return `${url} ${width}w`;
Expand Down