-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Add constrain media and media fit settings to product page #2052
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.
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
Changes from all commits
ed4b4af
a1321dc
cff4f20
6ab47ff
7bd9b03
e465f33
3091b9d
fd92710
68c37a3
5202bf3
54bd15d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -1366,14 +1366,72 @@ a.product__text { | |||||
| /* Product-thumbnail snippet */ | ||||||
|
|
||||||
| .product-media-container { | ||||||
| --aspect-ratio: var(--preview-ratio); | ||||||
| --ratio-percent: calc(1 / var(--aspect-ratio) * 100%); | ||||||
| position: relative; | ||||||
| width: 100%; | ||||||
| max-width: calc(100% - calc(var(--media-border-width) * 2)); | ||||||
| } | ||||||
|
|
||||||
| .product-media-container.constrain-height { | ||||||
| /* arbitrary offset value based on average theme spacing and header height */ | ||||||
| --viewport-offset: 400px; | ||||||
| --constrained-min-height: 300px; | ||||||
| --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset))); | ||||||
| margin-right: auto; | ||||||
| margin-left: auto; | ||||||
| } | ||||||
|
|
||||||
| .product-media-container.constrain-height.media-fit-contain { | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm not sure this needs as much specificity, this seems to work both on mobile and desktop:
Suggested change
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I intend for I know you didn't have the full picture with the media fit setting when you first looked, but for context, these other classes and the specific combinations of them are deliberate and shouldn't be removed for specificity. I did think about using |
||||||
| --contained-width: calc(var(--constrained-height) * var(--aspect-ratio)); | ||||||
| width: min(var(--contained-width), 100%); | ||||||
| } | ||||||
|
|
||||||
| .product-media-container .media { | ||||||
| padding-top: var(--ratio-percent); | ||||||
| } | ||||||
|
|
||||||
| .product-media-container.constrain-height .media { | ||||||
| padding-top: min(var(--constrained-height), var(--ratio-percent)); | ||||||
| } | ||||||
|
|
||||||
| @media screen and (max-width: 749px) { | ||||||
| .product-media-container.media-fit-cover { | ||||||
| display: flex; | ||||||
| align-self: stretch; | ||||||
| } | ||||||
|
|
||||||
| .product-media-container.media-fit-cover .media { | ||||||
| /* allow media img element to scale relative to modal-opener/product-media-container */ | ||||||
| position: initial; | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| @media screen and (min-width: 750px) { | ||||||
| .product-media-container { | ||||||
| max-width: 100%; | ||||||
| } | ||||||
|
|
||||||
| .product-media-container:not(.media-type-image) { | ||||||
| /* override to use actual media ratio (not poster ratio) for video/models on desktop */ | ||||||
| --aspect-ratio: var(--ratio); | ||||||
| } | ||||||
|
|
||||||
| .product-media-container.constrain-height { | ||||||
| --viewport-offset: 170px; | ||||||
| --constrained-min-height: 500px; | ||||||
| } | ||||||
|
|
||||||
| .product-media-container.media-fit-cover, | ||||||
| .product-media-container.media-fit-cover .product__modal-opener, | ||||||
| .product-media-container.media-fit-cover .media { | ||||||
ludoboludo marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
| height: 100%; | ||||||
| } | ||||||
|
|
||||||
| .product-media-container.media-fit-cover .deferred-media__poster img { | ||||||
| object-fit: cover; | ||||||
| width: 100%; | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| .product-media-container .product__modal-opener { | ||||||
|
|
@@ -1386,7 +1444,3 @@ a.product__text { | |||||
| display: none; | ||||||
| } | ||||||
| } | ||||||
kmeleta marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
|
||||||
| .product-media-container .media { | ||||||
| padding-top: var(--ratio-percent); | ||||||
| } | ||||||
Uh oh!
There was an error while loading. Please reload this page.