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

[R20-1656] Add image captions in content #1028

Merged
merged 1 commit into from
Feb 7, 2024
+18 −4
Merged

[R20-1656] Add image captions in content #1028

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
2 changes: 1 addition & 1 deletion packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const fixed = {

</div>
`,
image: `<img src="https://example.com/image.jpg" class="rpl-img" width="100" alt="Image" srcset="https://example.com/image.jpg?width=720, https://example.com/image.jpg?width=1440 2x">`,
image: `<figure><img src="https://example.com/image.jpg" class="rpl-img" width="100" alt="Image" srcset="https://example.com/image.jpg?width=720, https://example.com/image.jpg?width=1440 2x"></figure>`,
button: `<a class="rpl-button rpl-button--default rpl-u-focusable-block rpl-button--filled" href="https://example.com"><span class="rpl-button__label rpl-type-label rpl-type-weight-bold">Button</span></a>`,
link: `<a href="https://example.com" target="_blank" class="rpl-text-link rpl-u-focusable-inline">Link<span class="rpl-u-visually-hidden">(opens in a new window)</span></a>`,
iframe: `<div class="rpl-iframe rpl-iframe--default rpl-iframe--auto"><iframe src="https://powerbi.com" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>`
Expand Down
11 changes: 9 additions & 2 deletions packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,12 +185,19 @@ const pluginImages = function (this: any) {
const width = $img.attr('width')
const src = $img.attr('src')
const alt = $img.attr('alt')
const $caption = this.find(el)
.find('div.field--name-field-media-caption')
?.text()
// this is the max width of the content area
const contentWidth = 720
return this.find(el).replaceWith(
`<img src="${src}" class="rpl-img" width="${width}" alt="${alt}" srcset="${src}?width=${contentWidth}, ${src}?width=${
`<figure><img src="${src}" class="rpl-img" width="${width}" alt="${alt}" srcset="${src}?width=${contentWidth}, ${src}?width=${
contentWidth * 2
} 2x"></img>`
} 2x"></img>${
$caption
? '<figcaption class="rpl-img__caption">' + $caption + '</figcaption>'
: ''
}</figure>`
)
})
}
Expand Down
2 changes: 1 addition & 1 deletion packages/ripple-tide-landing-page/mapping/components/basic-text/basic-text-mapping.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const result: TideDynamicPageComponent<ITideBasicText> = {
}
],
props: {
html: '<h2 id="nulla-ultricies-dignissim-leo-posuere-vestibulum-erat-cursus-vitae">Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae</h2>\n<h3 id="phasellus-congue-aliquam-vehicula">Phasellus congue aliquam vehicula</h3>\n<p class="rpl-callout rpl-callout--neutral">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus. Quisque nec congue ligula, vitae condimentum tellus. Nulla nec urna augue. Curabitur commodo nisi est, eu pulvinar tortor cursus vel. Morbi dictum ex est, et semper diam finibus eu. Cras rutrum, nunc a fringilla convallis, massa est vulputate velit, in blandit augue dui vitae elit. Donec hendrerit commodo augue, in maximus orci tempor congue. Mauris ultricies euismod orci, nec vehicula quam vehicula ac. Nunc dictum tortor dolor, nec eleifend orci luctus sed.</p>\n<h3 id="donec-scelerisque-cursus-ex-varius-efficitur">Donec scelerisque cursus ex varius efficitur</h3>\n<div class="rpl-callout"><p class="callout-wrapper">Lorem ipsum dolor sit amet</p></div>\n<h4>Morbi cursus placerat mi</h4>\n<h5>Nullam laoreet ante placerat</h5>\n<p>Integer interdum nisl ut neque dictum, et sagittis metus feugiat. Sed in mattis neque. Duis at risus non ipsum semper dapibus. Sed enim sapien, molestie sed commodo vel, lacinia vitae risus. Proin sagittis diam nisi, sed rhoncus diam varius id. Sed malesuada felis tortor, scelerisque pretium elit tempor non. Pellentesque ultrices volutpat tincidunt. Fusce quis viverra urna, quis finibus nulla.</p>\n\n<figure class="rpl-blockquote">\n <blockquote class="rpl-blockquote__quote">\n <p class="rpl-type-p-large-fixed">Mauris tincidunt tincidunt felis vel tempus. Vestibulum rhoncus blandit justo quis finibus. Phasellus lacus lectus, sollicitudin sed posuere non, ultricies ut quam.</p>\n </blockquote>\n <figcaption class="rpl-blockquote__author rpl-type-label-small"><span class="rpl-blockquote__author-name">Duis ligula lacus</span><span class="rpl-blockquote__author-name">Phasellus est turpis, efficitur nec odio imperdiet</span></figcaption>\n</figure>\n\nMauris tincidunt tincidunt felis vel tempus\n<img src="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg" class="rpl-img" width="900" alt="Demo: Melbourne tram" srcset="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg?width=720, https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg?width=1440 2x">\n<p>Phasellus in varius leo. Suspendisse potenti. Donec scelerisque cursus ex varius efficitur. Vivamus pretium nisi sed libero accumsan mattis. Duis convallis, velit eget varius tempus, orci erat aliquam sem, eget porta mauris nisl at mauris.</p>\n\n<figure class="rpl-document">\n <a class="rpl-document__link rpl-u-focusable-within" aria-label="Demo Sample Document File type: Word. Size: 7.53 KB." href="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/sample.docx" target="_blank">\n <span class="rpl-document__icon rpl-icon rpl-icon--size-l rpl-icon--colour-default rpl-icon--icon-document-lined">\n <svg role="presentation"><use xlink:href="#icon-document-lined"></use></svg>\n </span>\n <div class="rpl-document__content">\n <span class="rpl-document__name rpl-type-p rpl-type-weight-bold rpl-u-focusable-inline">Demo Sample Document</span>\n <div class="rpl-document__info rpl-type-label-small">\n <span class="rpl-file__meta">Word</span>\n <span class="rpl-file__meta">7.53 KB</span>\n </div>\n </div>\n <span class="rpl-u-visually-hidden">(opens in a new window)</span>\n </a>\n</figure>\n\n'
html: '<h2 id="nulla-ultricies-dignissim-leo-posuere-vestibulum-erat-cursus-vitae">Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae</h2>\n<h3 id="phasellus-congue-aliquam-vehicula">Phasellus congue aliquam vehicula</h3>\n<p class="rpl-callout rpl-callout--neutral">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus. Quisque nec congue ligula, vitae condimentum tellus. Nulla nec urna augue. Curabitur commodo nisi est, eu pulvinar tortor cursus vel. Morbi dictum ex est, et semper diam finibus eu. Cras rutrum, nunc a fringilla convallis, massa est vulputate velit, in blandit augue dui vitae elit. Donec hendrerit commodo augue, in maximus orci tempor congue. Mauris ultricies euismod orci, nec vehicula quam vehicula ac. Nunc dictum tortor dolor, nec eleifend orci luctus sed.</p>\n<h3 id="donec-scelerisque-cursus-ex-varius-efficitur">Donec scelerisque cursus ex varius efficitur</h3>\n<div class="rpl-callout"><p class="callout-wrapper">Lorem ipsum dolor sit amet</p></div>\n<h4>Morbi cursus placerat mi</h4>\n<h5>Nullam laoreet ante placerat</h5>\n<p>Integer interdum nisl ut neque dictum, et sagittis metus feugiat. Sed in mattis neque. Duis at risus non ipsum semper dapibus. Sed enim sapien, molestie sed commodo vel, lacinia vitae risus. Proin sagittis diam nisi, sed rhoncus diam varius id. Sed malesuada felis tortor, scelerisque pretium elit tempor non. Pellentesque ultrices volutpat tincidunt. Fusce quis viverra urna, quis finibus nulla.</p>\n\n<figure class="rpl-blockquote">\n <blockquote class="rpl-blockquote__quote">\n <p class="rpl-type-p-large-fixed">Mauris tincidunt tincidunt felis vel tempus. Vestibulum rhoncus blandit justo quis finibus. Phasellus lacus lectus, sollicitudin sed posuere non, ultricies ut quam.</p>\n </blockquote>\n <figcaption class="rpl-blockquote__author rpl-type-label-small"><span class="rpl-blockquote__author-name">Duis ligula lacus</span><span class="rpl-blockquote__author-name">Phasellus est turpis, efficitur nec odio imperdiet</span></figcaption>\n</figure>\n\nMauris tincidunt tincidunt felis vel tempus\n<figure><img src="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg" class="rpl-img" width="900" alt="Demo: Melbourne tram" srcset="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg?width=720, https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg?width=1440 2x"></figure>\n<p>Phasellus in varius leo. Suspendisse potenti. Donec scelerisque cursus ex varius efficitur. Vivamus pretium nisi sed libero accumsan mattis. Duis convallis, velit eget varius tempus, orci erat aliquam sem, eget porta mauris nisl at mauris.</p>\n\n<figure class="rpl-document">\n <a class="rpl-document__link rpl-u-focusable-within" aria-label="Demo Sample Document File type: Word. Size: 7.53 KB." href="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/sample.docx" target="_blank">\n <span class="rpl-document__icon rpl-icon rpl-icon--size-l rpl-icon--colour-default rpl-icon--icon-document-lined">\n <svg role="presentation"><use xlink:href="#icon-document-lined"></use></svg>\n </span>\n <div class="rpl-document__content">\n <span class="rpl-document__name rpl-type-p rpl-type-weight-bold rpl-u-focusable-inline">Demo Sample Document</span>\n <div class="rpl-document__info rpl-type-label-small">\n <span class="rpl-file__meta">Word</span>\n <span class="rpl-file__meta">7.53 KB</span>\n </div>\n </div>\n <span class="rpl-u-visually-hidden">(opens in a new window)</span>\n </a>\n</figure>\n\n'
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/ripple-ui-core/src/components/content/RplContent.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
margin-top: 0;
}

figure:not(:first-child),
.rpl-img:not(:first-child),
.rpl-media-embed:not(:first-child) {
margin-top: var(--rpl-sp-5);
Expand Down
6 changes: 6 additions & 0 deletions packages/ripple-ui-core/src/styles/components/_img.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,9 @@
object-fit: cover;
max-width: 100%;
}

.rpl-img__caption {
margin-bottom: var(--rpl-sp-3);
margin-top: var(--rpl-sp-3);
color: var(--rpl-clr-neutral-600);
}
Loading