Skip to content

Scale XHS image-caption cards #27

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

Merged
walker1211 merged 1 commit into from
Jun 21, 2026
Merged

Scale XHS image-caption cards #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 8 additions & 0 deletions internal/render/assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -447,6 +447,8 @@ html, body {
}

.image-caption-image {
width: 100%;
block-size: var(--image-caption-image-height);
max-height: var(--image-caption-image-height);
flex: 0 1 auto;
min-height: 0;
Expand All @@ -455,6 +457,12 @@ html, body {
justify-content: center;
}

.image-caption-image img {
width: 100%;
height: 100%;
object-fit: contain;
}

.image-caption-cta {
position: static;
margin-top: auto;
Expand Down
4 changes: 4 additions & 0 deletions internal/render/template_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,7 +525,11 @@ func TestRenderHTMLImageCaptionRendersImageAndBodyWithoutBottomCTA(t *testing.T)
`display: flex;`,
`flex-direction: column;`,
`.image-caption-image {`,
`width: 100%;`,
`block-size: var(--image-caption-image-height);`,
`max-height: var(--image-caption-image-height);`,
`.image-caption-image img {`,
`height: 100%;`,
`.image-frame {`,
`padding: 0;`,
`overflow: hidden;`,
Expand Down
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/default-all-variants.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
a78e241f27875082086b1658bcd21c2d20718661bc6eca27da9e28d98b67c350
85623c2e4d3eeef607d2f42072b7a134e8d01602c1010c79edf829697a97c0a9
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/default-author-global.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
4bc4986a5c2809d4496ca96b717e5390b6e94a4e06a3779d1439e069e7f73839
7b0a1aa20dead4a3e77d27cb5d1857837ad6c929355683ebf03f02046e283fca
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/default-author-long.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
5bba2ca3ed230be77699e1c96c5e4a9ada2a769b646436699707f1a79c840904
b29409b6540a6f68206ea9b24b1b442eea01d0dcba68b125b087474d9763c791
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/default-author-none.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
1d76b559e395e8feebb73b0062b93bab6d1afcc4db6c6c08ca4a09e07aa905f5
472434e7df0ce90b3e5f7199e35e8fb30d4c6a35bbc7f86d8673d189c75ee5ef
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/default-author-override.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
b6ad173ba2585dc01b6a787fad968e77ae9f62285cd5d001626c4a16bb37c815
3861fb799f242a70539016b8e686372f4d350b5bba59ce65513a5420cc56b36a
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/default-semantic-highlight.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
b7f7f1614a14b0c92dae57371f05e90b98d25d3b7f06efc83ae804b95157b200
84567be4fc898da5546ac37886098f7b7b7fb718ec8af2d4d55053f9d0fc5480
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/editorial-cool-all-variants.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
ca33e7ea7f6e2cdbd1dc2da7dc51023a381d907753b3a71b95dcef6d6b39d926
84d8eca70ab129defdf04e28523bfef3e844ea929435f2185f7c7ac5d9674557
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/editorial-cool-semantic-highlight.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
b36549a487a1ef2ce90403b3ea5e4afd2b6c966f8dd2fd91f7cfa9e3645b0080
f2d0419adba2ab1bd38b442b1797029428ca960a8123ece200cd7217f9a4978c
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/fresh-green-all-variants.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
3f8ccdb1bf1df6f168b7912ea6f2978be0c7da3e55800845a1c7b6b04b5e59a1
77d625f0d2df58e6fbb0e4c5e4e3e01a70ca00b3a10bd4b5b1c0bdc5640afb98
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/plum-ink-all-variants.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
191cc710944d8bd71a9639aadbe8344f5c5e977a00cb452511e6979308235f1a
b074a40d9689c1520bd9f665db7b85788858303bd7384c260f1654dd6d256982
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/sage-mist-all-variants.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
9a07522cf7dec3154a49ccf57c9c0d24472fda59da88382df5bf38d4cff81e3b
1fdfcdb47549b9ca3cae3e9666cc84d4c2f18e1a2078687ffc78d1abf6d9d54c
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/tech-noir-all-variants.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
913aa9841faf64b701fc858a580108c03aa8cb0155be3a34ad6d5a934781e35a
29efa7fd964d540ba0f8c68cc4f515956d02daf36bdc600460f001b99960f9b2
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/tech-noir-semantic-highlight.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
05f9ee3af30eaa048a2c3e56b60834572df92f1790949dacc829eb1afa20ab11
5b6d430d666222fe9812b082c484e25e43decd255903d9131bcbaa7055a42d83
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/warm-paper-all-variants.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
78d269a0673af5230beba5899c50c86eaf17f2889f349a30e324e73c5e77753e
6d0e8bdfa166b4f3e1e8db10f77579be098be2fe56ab5348ec62c4e4a83427ff
2 changes: 1 addition & 1 deletion internal/render/testdata/golden-html/warm-paper-semantic-highlight.sha256
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
3632b84229a26e40861e2ae7ea8ab152cc8d64d3d1f73f3b4f9b2659ff832350
e31208299ab8433fcc841efb2ef70eb0b062aa2ca856be8bb79cf5a82bff715d