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

Add image size properties to the infoCard component #1126

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add image size properties to the infoCard component #1126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cb55576
Add image size properties to the infoCard component
efremov-av Jan 6, 2025
8b91af0
Add imageWidth and imageHeight properties to contentSchemas
efremov-av Jan 7, 2025
f6416d6
Add mobile image size properties to infoCard component
efremov-av Jan 14, 2025
d48c7aa
Update InfoCard documentation to include mobile image size properties
efremov-av Jan 14, 2025
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
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

### Added

- Adding image size properties to the infoCard component

## [3.176.1] - 2024-11-08

## [3.176.0] - 2024-11-06
Expand Down
4 changes: 4 additions & 0 deletions docs/InfoCard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,14 @@ The `info-card` component groups information on a single topic. It often include
| `headline` | `string` | Headline of the Info Card. | `null` |
| `htmlId` | `string` | ID of the container element. | `null` |
| `imageUrl` | `string` | Path to the image used on desktop devices. | `""` |
| `imageHeight` | `number` | Height of the image that is used to improve [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) while the image loads.| `null` |
| `imageWidth` | `number` | Width of the image that is used to improve [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) while the image loads.| `null` |
| `imageActionUrl` | `string` | Redirect URL used when the image component is clicked. | `""` |
| `isFullModeStyle` | `boolean` | Style of the Info Card component. If `true`, the image component is used as the background, and text is displayed over it. | `false` |
| `linkTarget` | `LinkTargetEnum` | Where to display the linked URL when the Info Card component is clicked. | `"_self"` |
| `mobileImageUrl` | `string` | Path to the image used on mobile devices. If empty, the desktop image is used. | `null` |
| `imageMobileHeight` | `number` | Height of the mobile image that is used to improve [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) while the image loads.| `null` |
| `imageMobileWidth` | `number` | Width of the mobile image that is used to improve [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) while the image loads.| `null` |
| `subhead` | `string` | Text to be displayed underneath the headline. If not provided, it will not be rendered. | `null` |
| `bodyText` | `string` | Text to be displayed underneath the subhead. If not provided, it will not be rendered. | `null` |
| `textAlignment` | `TextAlignmentEnum` | Text alignment inside the component: `left`, `center` or `right`. This prop is ignored if `isFullModeStyle` is true. | `"left"` |
Expand Down
4 changes: 4 additions & 0 deletions messages/ar.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "ما هو وضع النص الذي يجب أن تتوقع بطاقة المعلومات استلامه. HTML هو الافتراضي والنص المنسق يتيح لك استخدام التحديد.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "نصّ مُنـسّق",
"admin/editor.info-card.imageWidth.title": "عرض الصورة",
"admin/editor.info-card.imageHeight.title": "ارتفاع الصورة",
"admin/editor.info-card.imageMobileWidth.title": "عرض الصورة لتخطيط الهاتف المحمول",
"admin/editor.info-card.imageMobileHeight.title": "ارتفاع الصورة لتخطيط الهاتف المحمول",
"admin/editor.info-card.callAction.none": "لا شيء",
"admin/editor.info-card.callAction.button": "الزر",
"admin/editor.info-card.callAction.link": "الرابط",
Expand Down
4 changes: 4 additions & 0 deletions messages/bg.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "Какъв текстов режим трябва да очаква да получи InfoCard. HTML е режимът по подразбиране, а RTF текст ви дава възможност да използвате маркдаун.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "RTF текст",
"admin/editor.info-card.imageWidth.title": "Ширина на изображението",
"admin/editor.info-card.imageHeight.title": "Височина на изображението",
"admin/editor.info-card.imageMobileWidth.title": "Ширина на изображението за мобилно оформление",
"admin/editor.info-card.imageMobileHeight.title": "Височина на изображението за мобилно оформление",
"admin/editor.info-card.callAction.none": "Няма",
"admin/editor.info-card.callAction.button": "Бутон",
"admin/editor.info-card.callAction.link": "Връзка",
Expand Down
4 changes: 4 additions & 0 deletions messages/context.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "Description for textMode property.",
"admin/editor.info-card.textMode.html": "Enum value for HTML text.",
"admin/editor.info-card.textMode.rich-text": "Enum value for rich-text.",
"admin/editor.info-card.imageWidth.title": "Image Width",
"admin/editor.info-card.imageHeight.title": "Image Height",
"admin/editor.info-card.imageMobileWidth.title": "Image Width for Mobile Layout",
"admin/editor.info-card.imageMobileHeight.title": "Image Height for Mobile Layout",
"admin/editor.info-card.callAction.none": "Name of enum value to make CTA disappear",
"admin/editor.info-card.callAction.button": "Name of enum value to make CTA a button",
"admin/editor.info-card.callAction.link": "Name of enum value to make CTA a link",
Expand Down
4 changes: 4 additions & 0 deletions messages/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "Textmodus InfoCard wird empfangen. HTML ist die Standardeinstellung und Rich-Text ermöglicht Ihnen die Verwendung von Markdown.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "Rich-Text",
"admin/editor.info-card.imageWidth.title": "Bildbreite",
"admin/editor.info-card.imageHeight.title": "Bildhöhe",
"admin/editor.info-card.imageMobileWidth.title": "Bildbreite für mobiles Layout",
"admin/editor.info-card.imageMobileHeight.title": "Bildhöhe für mobiles Layout",
"admin/editor.info-card.callAction.none": "Keine",
"admin/editor.info-card.callAction.button": "Taste",
"admin/editor.info-card.callAction.link": "Link",
Expand Down
4 changes: 4 additions & 0 deletions messages/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,10 @@
"admin/editor.info-card.textMode.description": "Text mode InfoCard will receive. HTML is the default, and rich text enables you to use markdown.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "Rich Text",
"admin/editor.info-card.imageWidth.title": "Image Width",
"admin/editor.info-card.imageHeight.title": "Image Height",
"admin/editor.info-card.imageMobileWidth.title": "Image Width for Mobile Layout",
"admin/editor.info-card.imageMobileHeight.title": "Image Height for Mobile Layout",
"admin/editor.info-card.callAction.none": "None",
"admin/editor.info-card.callAction.button": "Button",
"admin/editor.info-card.callAction.link": "Link",
Expand Down
4 changes: 4 additions & 0 deletions messages/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,10 @@
"admin/editor.info-card.textMode.description": "Qué tipo de texto recibirá el InfoCard. HTML es el predeterminado y Rich-Text permite el uso de Markdown.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "Rich-Text",
"admin/editor.info-card.imageWidth.title": "Ancho de la imagen",
"admin/editor.info-card.imageHeight.title": "Altura de la imagen",
"admin/editor.info-card.imageMobileWidth.title": "Ancho de la imagen para el diseño móvil",
"admin/editor.info-card.imageMobileHeight.title": "Altura de la imagen para el diseño móvil",
"admin/editor.info-card.callAction.none": "Ninguno",
"admin/editor.info-card.callAction.button": "Botón",
"admin/editor.info-card.callAction.link": "Link",
Expand Down
4 changes: 4 additions & 0 deletions messages/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "Quel mode texte devrait recevoir la carte InfoCard. HTML est le mode par défaut et Texte Enrichi vous permet d’utiliser Markdown.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "Texte enrichi",
"admin/editor.info-card.imageWidth.title": "Largeur de l'image",
"admin/editor.info-card.imageHeight.title": "Hauteur de l'image",
"admin/editor.info-card.imageMobileWidth.title": "Largeur de l'image pour la mise en page mobile",
"admin/editor.info-card.imageMobileHeight.title": "Hauteur de l'image pour la mise en page mobile",
"admin/editor.info-card.callAction.none": "Aucun",
"admin/editor.info-card.callAction.button": "Bouton",
"admin/editor.info-card.callAction.link": "Lien",
Expand Down
4 changes: 4 additions & 0 deletions messages/hu.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,10 @@
"admin/editor.info-card.textMode.description": "Szöveg mód, amelyet az InfoCard fogad. Alapértelmezett a HTML, a rich text lehetővé teszi a markdown használatát.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "Rich Text",
"admin/editor.info-card.imageWidth.title": "Kép szélessége",
"admin/editor.info-card.imageHeight.title": "Kép magassága",
"admin/editor.info-card.imageMobileWidth.title": "Kép szélessége mobil elrendezéshez",
"admin/editor.info-card.imageMobileHeight.title": "Kép magassága mobil elrendezéshez",
"admin/editor.info-card.callAction.none": "Nincs",
"admin/editor.info-card.callAction.button": "Gomb",
"admin/editor.info-card.callAction.link": "Link",
Expand Down
4 changes: 4 additions & 0 deletions messages/id.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "Mode teks apa yang seharusnya diharapkan diterima Kartu Info. HTM merupakan default dan Teks Kaya memungkinkan Anda untuk menggunakan Markdown.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "Rich-Text",
"admin/editor.info-card.imageWidth.title": "Lebar Gambar",
"admin/editor.info-card.imageHeight.title": "Tinggi Gambar",
"admin/editor.info-card.imageMobileWidth.title": "Lebar Gambar untuk Tata Letak Seluler",
"admin/editor.info-card.imageMobileHeight.title": "Tinggi Gambar untuk Tata Letak Seluler",
"admin/editor.info-card.callAction.none": "Tidak ada",
"admin/editor.info-card.callAction.button": "Tombol",
"admin/editor.info-card.callAction.link": "Tautan",
Expand Down
4 changes: 4 additions & 0 deletions messages/it.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "Tipo di testo che l'InfoCard riceverà. HTML è il valore predefinito e Rich Text consente l'utilizzo di Markdown.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "Rich Text",
"admin/editor.info-card.imageWidth.title": "Larghezza dell'immagine",
"admin/editor.info-card.imageHeight.title": "Altezza dell'immagine",
"admin/editor.info-card.imageMobileWidth.title": "Larghezza dell'immagine per layout mobile",
"admin/editor.info-card.imageMobileHeight.title": "Altezza dell'immagine per layout mobile",
"admin/editor.info-card.callAction.none": "Nessuno",
"admin/editor.info-card.callAction.button": "Pulsante",
"admin/editor.info-card.callAction.link": "Link",
Expand Down
4 changes: 4 additions & 0 deletions messages/ja.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "InfoCard に届くことになっているテキストモードです。デフォルトは HTML ですが、リッチテキストを有効にすると Markdown を使えます。",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "リッチテキスト",
"admin/editor.info-card.imageWidth.title": "画像の幅",
"admin/editor.info-card.imageHeight.title": "画像の高さ",
"admin/editor.info-card.imageMobileWidth.title": "モバイルレイアウトの画像の幅",
"admin/editor.info-card.imageMobileHeight.title": "モバイルレイアウトの画像の高さ",
"admin/editor.info-card.callAction.none": "なし",
"admin/editor.info-card.callAction.button": "ボタン",
"admin/editor.info-card.callAction.link": "リンク",
Expand Down
4 changes: 4 additions & 0 deletions messages/ko.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "정보 카드가 수신해야 하는 텍스트 모드는 무엇인가요. HTML이 기본이며 서식 있는 텍스트에서는 마크다운을 사용할 수 있습니다.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "서식 있는 텍스트",
"admin/editor.info-card.imageWidth.title": "이미지 너비",
"admin/editor.info-card.imageHeight.title": "이미지 높이",
"admin/editor.info-card.imageMobileWidth.title": "모바일 레이아웃의 이미지 너비",
"admin/editor.info-card.imageMobileHeight.title": "모바일 레이아웃의 이미지 높이",
"admin/editor.info-card.callAction.none": "없음",
"admin/editor.info-card.callAction.button": "버튼",
"admin/editor.info-card.callAction.link": "링크",
Expand Down
4 changes: 4 additions & 0 deletions messages/nl.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "Welke tekstmodus moet de InfoCard verwacht te ontvangen. HTML is de standaard en Rich Text stelt u in staat Markdown te gebruiken.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "Rich tekst",
"admin/editor.info-card.imageWidth.title": "Afbeeldingsbreedte",
"admin/editor.info-card.imageHeight.title": "Afbeeldingshoogte",
"admin/editor.info-card.imageMobileWidth.title": "Afbeeldingsbreedte voor mobiele lay-out",
"admin/editor.info-card.imageMobileHeight.title": "Afbeeldingshoogte voor mobiele lay-out",
"admin/editor.info-card.callAction.none": "Geen",
"admin/editor.info-card.callAction.button": "Knop",
"admin/editor.info-card.callAction.link": "Link",
Expand Down
4 changes: 4 additions & 0 deletions messages/nn.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "Hvilken tekstmodus InfoCard forventer å motta. HTML er standard og \"Rik tekst\" lar deg bruke Markdown.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "Rik tekst",
"admin/editor.info-card.imageWidth.title": "Bildebredde",
"admin/editor.info-card.imageHeight.title": "Bildehøyde",
"admin/editor.info-card.imageMobileWidth.title": "Bildebredde for mobiloppsett",
"admin/editor.info-card.imageMobileHeight.title": "Bildehøyde for mobiloppsett",
"admin/editor.info-card.callAction.none": "Ingen",
"admin/editor.info-card.callAction.button": "Knapp",
"admin/editor.info-card.callAction.link": "Lenke",
Expand Down
4 changes: 4 additions & 0 deletions messages/no.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "Hvilken tekstmodus InfoCard forventer å motta. HTML er standard og \"Rik tekst\" lar deg bruke Markdown.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "Rik tekst",
"admin/editor.info-card.imageWidth.title": "Bildebredde",
"admin/editor.info-card.imageHeight.title": "Bildehøyde",
"admin/editor.info-card.imageMobileWidth.title": "Bildebredde for mobiloppsett",
"admin/editor.info-card.imageMobileHeight.title": "Bildehøyde for mobiloppsett",
"admin/editor.info-card.callAction.none": "Ingen",
"admin/editor.info-card.callAction.button": "Knapp",
"admin/editor.info-card.callAction.link": "Lenke",
Expand Down
4 changes: 4 additions & 0 deletions messages/pt.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,10 @@
"admin/editor.info-card.textMode.description": "O tipo de texto que o InfoCard irá receber. HTML é o padrão e Rich Text permite o uso de Markdown.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "Rich Text",
"admin/editor.info-card.imageWidth.title": "Largura da Imagem",
"admin/editor.info-card.imageHeight.title": "Altura da Imagem",
"admin/editor.info-card.imageMobileWidth.title": "Largura da Imagem para Layout Mobile",
"admin/editor.info-card.imageMobileHeight.title": "Altura da Imagem para Layout Mobile",
"admin/editor.info-card.callAction.none": "Nenhum",
"admin/editor.info-card.callAction.button": "Botão",
"admin/editor.info-card.callAction.link": "Link",
Expand Down
4 changes: 4 additions & 0 deletions messages/ro.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "Ce mod de text ar trebui InfoCard să se aștepte să primească. HTML este implicit, iar Rich Text îți permite să folosești Markdown.",
"admin/editor.info-card.textMode.html": "HTML",
"admin/editor.info-card.textMode.rich-text": "Rich-Text",
"admin/editor.info-card.imageWidth.title": "Lățimea imaginii",
"admin/editor.info-card.imageHeight.title": "Înălțimea imaginii",
"admin/editor.info-card.imageMobileWidth.title": "Lățimea imaginii pentru layout-ul mobil",
"admin/editor.info-card.imageMobileHeight.title": "Înălțimea imaginii pentru layout-ul mobil",
"admin/editor.info-card.callAction.none": "Niciunul",
"admin/editor.info-card.callAction.button": "Buton",
"admin/editor.info-card.callAction.link": "Link",
Expand Down
4 changes: 4 additions & 0 deletions messages/th.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
"admin/editor.info-card.textMode.description": "InfoCard ควรคาดว่าจะได้รับโหมดข้อความอะไร ภาษาเอชทีเอ็มแอลเป็นค่าเริ่มต้นและ Rich Text ทำให้คุณสามารถใช้มาร์กดาวน์ได้",
"admin/editor.info-card.textMode.html": "ภาษาเอชทีเอ็มแอล",
"admin/editor.info-card.textMode.rich-text": "Rich Text",
"admin/editor.info-card.imageWidth.title": "ความกว้างของรูปภาพ",
"admin/editor.info-card.imageHeight.title": "ความสูงของรูปภาพ",
"admin/editor.info-card.imageMobileWidth.title": "ความกว้างของรูปภาพสำหรับเลย์เอาต์มือถือ",
"admin/editor.info-card.imageMobileHeight.title": "ความสูงของรูปภาพสำหรับเลย์เอาต์มือถือ",
"admin/editor.info-card.callAction.none": "ไม่มี",
"admin/editor.info-card.callAction.button": "ปุ่ม",
"admin/editor.info-card.callAction.link": "ลิงก์",
Expand Down
Loading
Loading