Skip to content

馃帹 Added user-editable alt text for the Product card. #30526

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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cathysarisky wants to merge 5 commits into
base: main
Choose a base branch
from
Open

馃帹 Added user-editable alt text for the Product card. #30526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7cb719f
Added productImageAlt property to the product card node
cathysarisky Sep 5, 2026
23c8551
Added alt attribute to rendered product card images
cathysarisky Sep 5, 2026
dd0c6a1
Added product card image alt parsing from HTML
cathysarisky Sep 5, 2026
964eebc
Added conversion and import coverage for product card image alt text
cathysarisky Sep 5, 2026
017ba1c
Added alt text control to the product card editor
cathysarisky Sep 5, 2026
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
6 changes: 6 additions & 0 deletions .changeset/product-card-image-alt-tests.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@tryghost/kg-html-to-lexical": none
"@tryghost/kg-converters": none
---

Added test coverage for product card image alt text; no runtime change
6 changes: 6 additions & 0 deletions .changeset/product-card-image-alt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@tryghost/kg-default-nodes": minor
"@tryghost/koenig-lexical": minor
---

Added alt text support for the product card image: a productImageAlt property on the product node, rendered as the image's alt attribute on web and email, parsed from HTML on import, and editable from an Alt toggle on the card in the editor
4 changes: 2 additions & 2 deletions ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8444,7 +8444,7 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing

<tbody><tr>
<td class=\\"kg-product-image\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; margin-bottom: 0; padding-top: 0; padding-bottom: 16px;\\" valign=\\"top\\">
<img src=\\"https://main.ghost.org/content/images/2023/12/ghost-logo.png\\" width=\\"560\\" height=\\"180\\" border=\\"0\\" style=\\"-ms-interpolation-mode: bicubic; max-width: 100%; width: 100%; height: auto; padding: 0; border: none;\\">
<img src=\\"https://main.ghost.org/content/images/2023/12/ghost-logo.png\\" width=\\"560\\" height=\\"180\\" alt=\\"Ghost logo\\" border=\\"0\\" style=\\"-ms-interpolation-mode: bicubic; max-width: 100%; width: 100%; height: auto; padding: 0; border: none;\\">
</td>
</tr>

Expand Down Expand Up @@ -10030,7 +10030,7 @@ Beautiful, modern publishing with newsletters and premium subscriptions built-in

<tbody><tr>
<td class=\\"kg-product-image\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 18px; vertical-align: top; color: #15212A; margin-bottom: 0; padding-top: 0; padding-bottom: 16px;\\" valign=\\"top\\">
<img src=\\"https://main.ghost.org/content/images/2023/12/ghost-logo.png\\" width=\\"560\\" height=\\"180\\" border=\\"0\\" style=\\"-ms-interpolation-mode: bicubic; max-width: 100%; width: 100%; height: auto; padding: 0; border: none;\\">
<img src=\\"https://main.ghost.org/content/images/2023/12/ghost-logo.png\\" width=\\"560\\" height=\\"180\\" alt=\\"Ghost logo\\" border=\\"0\\" style=\\"-ms-interpolation-mode: bicubic; max-width: 100%; width: 100%; height: auto; padding: 0; border: none;\\">
</td>
</tr>

Expand Down
2 changes: 2 additions & 0 deletions ghost/core/test/unit/server/services/content-import/import/media.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ describe('PostMediaInliner', function () {
{
type: 'product',
productImageSrc: 'https://assets.test/product.jpg',
productImageAlt: 'Product photo',
productUrl: 'https://example.com/product',
},
{
Expand Down Expand Up @@ -156,6 +157,7 @@ describe('PostMediaInliner', function () {
assert.equal(children[4].src, '__GHOST_URL__/content/files/guide.pdf');
assert.equal(children[5].productImageSrc, '__GHOST_URL__/content/files/product.jpg');
assert.equal(children[5].productUrl, 'https://example.com/product');
assert.equal(children[5].productImageAlt, 'Product photo');
assert.equal(children[6].backgroundImageSrc, '__GHOST_URL__/content/files/header.jpg');
assert.equal(children[6].buttonUrl, 'https://example.com/header-button');
assert.equal(children[7].backgroundImageSrc, '__GHOST_URL__/content/files/signup.jpg');
Expand Down
1 change: 1 addition & 0 deletions ghost/core/test/utils/fixtures/email-service/golden-post.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,7 @@
"productImageSrc": "https://main.ghost.org/content/images/2023/12/ghost-logo.png",
"productImageWidth": 800,
"productImageHeight": 257,
"productImageAlt": "Ghost logo",
"productTitle": "<span style=\"white-space: pre-wrap;\">Make a blog!</span>",
"productDescription": "<p dir=\"ltr\"><span style=\"white-space: pre-wrap;\">with Ghost</span></p>",
"productRatingEnabled": true,
Expand Down
61 changes: 61 additions & 0 deletions koenig/kg-converters/test/lexical-to-mobiledoc.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3066,6 +3066,67 @@ describe('lexicalToMobiledoc', function () {
);
});

it('keeps product card image alt text', function () {
const result = lexicalToMobiledoc(
JSON.stringify({
root: {
children: [
{
type: 'product',
version: 1,
productImageSrc: 'https://example.com/images/camera.jpg',
productImageWidth: 724,
productImageHeight: 76,
productImageAlt: 'A camera on a wooden table',
productTitle: 'Camera',
productDescription: 'A nice camera',
productRatingEnabled: false,
productStarRating: 5,
productButtonEnabled: false,
productButton: '',
productUrl: '',
},
],
direction: null,
format: '',
indent: 0,
type: 'root',
version: 1,
},
}),
);

assert.equal(
result,
JSON.stringify({
version: MOBILEDOC_VERSION,
ghostVersion: GHOST_VERSION,
atoms: [],
cards: [
[
'product',
{
version: 1,
productImageSrc: 'https://example.com/images/camera.jpg',
productImageWidth: 724,
productImageHeight: 76,
productImageAlt: 'A camera on a wooden table',
productTitle: 'Camera',
productDescription: 'A nice camera',
productRatingEnabled: false,
productStarRating: 5,
productButtonEnabled: false,
productButton: '',
productUrl: '',
},
],
],
markups: [],
sections: [[10, 0]],
}),
);
});

it('renames cards', function () {
const result = lexicalToMobiledoc(
JSON.stringify({
Expand Down
61 changes: 61 additions & 0 deletions koenig/kg-converters/test/mobiledoc-to-lexical.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2438,6 +2438,67 @@ describe('mobiledocToLexical', function () {
);
});

it('keeps product card image alt text', function () {
const result = mobiledocToLexical(
JSON.stringify({
version: MOBILEDOC_VERSION,
ghostVersion: GHOST_VERSION,
atoms: [],
cards: [
[
'product',
{
version: 1,
productImageSrc: 'https://example.com/images/camera.jpg',
productImageWidth: 724,
productImageHeight: 76,
productImageAlt: 'A camera on a wooden table',
productTitle: 'Camera',
productDescription: 'A nice camera',
productRatingEnabled: false,
productStarRating: 5,
productButtonEnabled: false,
productButton: '',
productUrl: '',
},
],
],
markups: [],
sections: [[10, 0]],
}),
);

assert.equal(
result,
JSON.stringify({
root: {
children: [
{
type: 'product',
version: 1,
productImageSrc: 'https://example.com/images/camera.jpg',
productImageWidth: 724,
productImageHeight: 76,
productImageAlt: 'A camera on a wooden table',
productTitle: 'Camera',
productDescription: 'A nice camera',
productRatingEnabled: false,
productStarRating: 5,
productButtonEnabled: false,
productButton: '',
productUrl: '',
},
],
direction: null,
format: '',
indent: 0,
type: 'root',
version: 1,
},
}),
);
});

it('renames cards', function () {
const result = mobiledocToLexical(
JSON.stringify({
Expand Down
4 changes: 3 additions & 1 deletion koenig/kg-default-nodes/src/nodes/product/ProductNode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const productProperties = {
productImageSrc: {default: '', urlType: 'url'},
productImageWidth: {default: null as number | null},
productImageHeight: {default: null as number | null},
productImageAlt: {default: ''},
productTitle: {default: '', urlType: 'html', wordCount: true},
productDescription: {default: '', urlType: 'html', wordCount: true},
productRatingEnabled: {default: false},
Expand All @@ -25,7 +26,7 @@ export class ProductNode extends generateDecoratorNode({
/* override */
exportJSON() {
// checks if src is a data string
const {productImageSrc, productImageWidth, productImageHeight, productTitle, productDescription, productRatingEnabled, productStarRating, productButtonEnabled, productButton, productUrl} = this;
const {productImageSrc, productImageWidth, productImageHeight, productImageAlt, productTitle, productDescription, productRatingEnabled, productStarRating, productButtonEnabled, productButton, productUrl} = this;
const isBlob = productImageSrc && productImageSrc.startsWith('data:');

const dataset = {
Expand All @@ -34,6 +35,7 @@ export class ProductNode extends generateDecoratorNode({
productImageSrc: isBlob ? '<base64String>' : productImageSrc,
productImageWidth,
productImageHeight,
productImageAlt,
productTitle,
productDescription,
productRatingEnabled,
Expand Down
4 changes: 4 additions & 0 deletions koenig/kg-default-nodes/src/nodes/product/product-parser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ export function parseProductNode(ProductNode: new (data: Record<string, unknown>
if (img && img.getAttribute('src')) {
payload.productImageSrc = img.getAttribute('src');

if (img.getAttribute('alt')) {
payload.productImageAlt = img.getAttribute('alt');
}

if (img.getAttribute('width')) {
const productImageWidth = Number(img.getAttribute('width'));

Expand Down
6 changes: 4 additions & 2 deletions koenig/kg-default-nodes/src/nodes/product/product-renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {renderEmptyContainer} from '../../utils/render-empty-container.js';
import {getFirstHtmlElement} from '../../utils/get-first-html-element.js';
import {getResizedImageDimensions} from '../../utils/get-resized-image-dimensions.js';
import {renderEmailButton} from '../../utils/render-helpers/email-button.js';
import {escapeHtml} from '../../utils/escape-html.js';

interface ProductNodeData {
productStarRating: number;
Expand All @@ -19,6 +20,7 @@ interface ProductTemplateBaseData {
productImageSrc: string;
productImageWidth: number | null;
productImageHeight: number | null;
productImageAlt: string;
productTitle: string;
productDescription: string;
productRatingEnabled: boolean;
Expand Down Expand Up @@ -86,7 +88,7 @@ export function cardTemplate({data}: {data: ProductTemplateData; feature?: Expor
`
<div class="kg-card kg-product-card">
<div class="kg-product-card-container">
${data.productImageSrc ? `<img src="${data.productImageSrc}" ${data.productImageWidth ? `width="${data.productImageWidth}"` : ''} ${data.productImageHeight ? `height="${data.productImageHeight}"` : ''} class="kg-product-card-image" loading="lazy" />` : ''}
${data.productImageSrc ? `<img src="${data.productImageSrc}" ${data.productImageWidth ? `width="${data.productImageWidth}"` : ''} ${data.productImageHeight ? `height="${data.productImageHeight}"` : ''} alt="${escapeHtml(data.productImageAlt)}" class="kg-product-card-image" loading="lazy" />` : ''}
<div class="kg-product-card-title-container">
<h4 class="kg-product-card-title">${data.productTitle}</h4>
</div>
Expand Down Expand Up @@ -139,7 +141,7 @@ export function emailCardTemplate({data}: {data: ProductTemplateData; feature?:
${data.productImageSrc ? `
<tr>
<td class="kg-product-image" align="center">
<img src="${data.productImageSrc}" ${imageDimensions ? `width="${imageDimensions.width}"` : ''} ${imageDimensions ? `height="${imageDimensions.height}"` : ''} border="0"/>
<img src="${data.productImageSrc}" ${imageDimensions ? `width="${imageDimensions.width}"` : ''} ${imageDimensions ? `height="${imageDimensions.height}"` : ''} alt="${escapeHtml(data.productImageAlt)}" border="0"/>
</td>
</tr>
` : ''}
Expand Down
Loading
Loading