Add image size properties to the infoCard component

CHANGELOG.md

@@ -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

docs/InfoCard.md

@@ -50,6 +50,8 @@ The `info-card` component groups information on a single topic. It often include
 | `htmlId`                 | `string`            | ID of the container element.                                                                                               | `null`        |
 | `imageUrl`               | `string`            | Path to the image used on desktop devices.                                                                                 | `""`          |
 | `imageActionUrl`         | `string`            | Redirect URL used when the image component is clicked.                                                                     | `""`          |
+| `imageHeight`            | `number`            | Height of the image that is used to improve CLS while the image is loading.                                                | `null`        |
+| `imageWidth`             | `number`            | Width of the image that is used to improve CLS while the image is loading.                                                 | `null`        |
 | `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`        |

messages/ar.json

@@ -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.imageWidth.description": "يتم استخدام هذه القيمة لحساب نسبة العرض إلى الارتفاع للصورة وتحسين CLS أثناء تحميل الصورة",
+  "admin/editor.info-card.imageHeight.title": "ارتفاع الصورة",
+  "admin/editor.info-card.imageHeight.description": "يتم استخدام هذه القيمة لحساب نسبة العرض إلى الارتفاع للصورة وتحسين CLS أثناء تحميل الصورة",
   "admin/editor.info-card.callAction.none": "لا شيء",
   "admin/editor.info-card.callAction.button": "الزر",
   "admin/editor.info-card.callAction.link": "الرابط",

messages/bg.json

@@ -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.imageWidth.description": "Тази стойност се използва за изчисляване на съотношението на изображението и подобрява CLS по време на зареждане на изображението",
+  "admin/editor.info-card.imageHeight.title": "Височина на изображението",
+  "admin/editor.info-card.imageHeight.description": "Тази стойност се използва за изчисляване на съотношението на изображението и подобрява CLS по време на зареждане на изображението",
   "admin/editor.info-card.callAction.none": "Няма",
   "admin/editor.info-card.callAction.button": "Бутон",
   "admin/editor.info-card.callAction.link": "Връзка",

messages/context.json

@@ -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.imageWidth.description": "This value is used to calculate the aspect ratio of the image and improves the CLS during image loading",
+  "admin/editor.info-card.imageHeight.title": "Image Height",
+  "admin/editor.info-card.imageHeight.description": "This value is used to calculate the aspect ratio of the image and improves the CLS during image loading",
   "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",

messages/de.json

@@ -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.imageWidth.description": "Dieser Wert wird verwendet, um das Seitenverhältnis des Bildes zu berechnen und verbessert den CLS während des Bildladens",
+  "admin/editor.info-card.imageHeight.title": "Bildhöhe",
+  "admin/editor.info-card.imageHeight.description": "Dieser Wert wird verwendet, um das Seitenverhältnis des Bildes zu berechnen und verbessert den CLS während des Bildladens",
   "admin/editor.info-card.callAction.none": "Keine",
   "admin/editor.info-card.callAction.button": "Taste",
   "admin/editor.info-card.callAction.link": "Link",

messages/en.json

@@ -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.imageWidth.description": "This value is used to calculate the aspect ratio of the image and improves the CLS during image loading",
+  "admin/editor.info-card.imageHeight.title": "Image Height",
+  "admin/editor.info-card.imageHeight.description": "This value is used to calculate the aspect ratio of the image and improves the CLS during image loading",
   "admin/editor.info-card.callAction.none": "None",
   "admin/editor.info-card.callAction.button": "Button",
   "admin/editor.info-card.callAction.link": "Link",

messages/es.json

@@ -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": "Anchura de la imagen",
+  "admin/editor.info-card.imageWidth.description": "Este valor se utiliza para calcular la relación de aspecto de la imagen y mejora el CLS durante la carga de la imagen",
+  "admin/editor.info-card.imageHeight.title": "Altura de la imagen",
+  "admin/editor.info-card.imageHeight.description": "Este valor se utiliza para calcular la relación de aspecto de la imagen y mejora el CLS durante la carga de la imagen",
   "admin/editor.info-card.callAction.none": "Ninguno",
   "admin/editor.info-card.callAction.button": "Botón",
   "admin/editor.info-card.callAction.link": "Link",

messages/fr.json

@@ -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.imageWidth.description": "Cette valeur est utilisée pour calculer le rapport d'aspect de l'image et améliore le CLS pendant le chargement de l'image",
+  "admin/editor.info-card.imageHeight.title": "Hauteur de l'image",
+  "admin/editor.info-card.imageHeight.description": "Cette valeur est utilisée pour calculer le rapport d'aspect de l'image et améliore le CLS pendant le chargement de l'image",
   "admin/editor.info-card.callAction.none": "Aucun",
   "admin/editor.info-card.callAction.button": "Bouton",
   "admin/editor.info-card.callAction.link": "Lien",

messages/hu.json

@@ -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.imageWidth.description": "Ezt az értéket a kép oldalarányának kiszámításához használják, és javítja a CLS-t a kép betöltése során",
+  "admin/editor.info-card.imageHeight.title": "Kép magassága",
+  "admin/editor.info-card.imageHeight.description": "Ezt az értéket a kép oldalarányának kiszámításához használják, és javítja a CLS-t a kép betöltése során",
   "admin/editor.info-card.callAction.none": "Nincs",
   "admin/editor.info-card.callAction.button": "Gomb",
   "admin/editor.info-card.callAction.link": "Link",

messages/id.json

@@ -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.imageWidth.description": "Nilai ini digunakan untuk menghitung rasio aspek gambar dan meningkatkan CLS selama pemuatan gambar",
+  "admin/editor.info-card.imageHeight.title": "Tinggi Gambar",
+  "admin/editor.info-card.imageHeight.description": "Nilai ini digunakan untuk menghitung rasio aspek gambar dan meningkatkan CLS selama pemuatan gambar",
   "admin/editor.info-card.callAction.none": "Tidak ada",
   "admin/editor.info-card.callAction.button": "Tombol",
   "admin/editor.info-card.callAction.link": "Tautan",

messages/it.json

@@ -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.imageWidth.description": "Questo valore viene utilizzato per calcolare il rapporto d'aspetto dell'immagine e migliora il CLS durante il caricamento dell'immagine",
+  "admin/editor.info-card.imageHeight.title": "Altezza dell'immagine",
+  "admin/editor.info-card.imageHeight.description": "Questo valore viene utilizzato per calcolare il rapporto d'aspetto dell'immagine e migliora il CLS durante il caricamento dell'immagine",
   "admin/editor.info-card.callAction.none": "Nessuno",
   "admin/editor.info-card.callAction.button": "Pulsante",
   "admin/editor.info-card.callAction.link": "Link",

messages/ja.json

@@ -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.imageWidth.description": "この値は画像のアスペクト比を計算するために使用され、画像読み込み中のCLSを改善します",
+  "admin/editor.info-card.imageHeight.title": "画像の高さ",
+  "admin/editor.info-card.imageHeight.description": "この値は画像のアスペクト比を計算するために使用され、画像読み込み中のCLSを改善します",
   "admin/editor.info-card.callAction.none": "なし",
   "admin/editor.info-card.callAction.button": "ボタン",
   "admin/editor.info-card.callAction.link": "リンク",

messages/ko.json

@@ -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.imageWidth.description": "이 값은 이미지의 종횡비를 계산하는 데 사용되며 이미지 로딩 중 CLS를 개선합니다",
+  "admin/editor.info-card.imageHeight.title": "이미지 높이",
+  "admin/editor.info-card.imageHeight.description": "이 값은 이미지의 종횡비를 계산하는 데 사용되며 이미지 로딩 중 CLS를 개선합니다",
   "admin/editor.info-card.callAction.none": "없음",
   "admin/editor.info-card.callAction.button": "버튼",
   "admin/editor.info-card.callAction.link": "링크",

messages/nl.json

@@ -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.imageWidth.description": "Deze waarde wordt gebruikt om de beeldverhouding van de afbeelding te berekenen en verbetert de CLS tijdens het laden van de afbeelding",
+  "admin/editor.info-card.imageHeight.title": "Afbeeldingshoogte",
+  "admin/editor.info-card.imageHeight.description": "Deze waarde wordt gebruikt om de beeldverhouding van de afbeelding te berekenen en verbetert de CLS tijdens het laden van de afbeelding",
   "admin/editor.info-card.callAction.none": "Geen",
   "admin/editor.info-card.callAction.button": "Knop",
   "admin/editor.info-card.callAction.link": "Link",

messages/nn.json

@@ -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.imageWidth.description": "Denne verdien brukes til å beregne bildets størrelsesforhold og forbedrer CLS under bildefasting",
+  "admin/editor.info-card.imageHeight.title": "Bildehøyde",
+  "admin/editor.info-card.imageHeight.description": "Denne verdien brukes til å beregne bildets størrelsesforhold og forbedrer CLS under bildefasting",
   "admin/editor.info-card.callAction.none": "Ingen",
   "admin/editor.info-card.callAction.button": "Knapp",
   "admin/editor.info-card.callAction.link": "Lenke",

messages/no.json

@@ -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.imageWidth.description": "Denne verdien brukes til å beregne bildeforholdet og forbedrer CLS under bildefasting",
+  "admin/editor.info-card.imageHeight.title": "Bildehøyde",
+  "admin/editor.info-card.imageHeight.description": "Denne verdien brukes til å beregne bildeforholdet og forbedrer CLS under bildefasting",
   "admin/editor.info-card.callAction.none": "Ingen",
   "admin/editor.info-card.callAction.button": "Knapp",
   "admin/editor.info-card.callAction.link": "Lenke",

messages/pt.json

@@ -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.imageWidth.description": "Este valor é usado para calcular a proporção da imagem e melhora o CLS durante o carregamento da imagem",
+  "admin/editor.info-card.imageHeight.title": "Altura da imagem",
+  "admin/editor.info-card.imageHeight.description": "Este valor é usado para calcular a proporção da imagem e melhora o CLS durante o carregamento da imagem",
   "admin/editor.info-card.callAction.none": "Nenhum",
   "admin/editor.info-card.callAction.button": "Botão",
   "admin/editor.info-card.callAction.link": "Link",

messages/ro.json

@@ -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.imageWidth.description": "Această valoare este folosită pentru a calcula raportul de aspect al imaginii și îmbunătățește CLS în timpul încărcării imaginii",
+  "admin/editor.info-card.imageHeight.title": "Înălțimea imaginii",
+  "admin/editor.info-card.imageHeight.description": "Această valoare este folosită pentru a calcula raportul de aspect al imaginii și îmbunătățește CLS în timpul încărcării imaginii",
   "admin/editor.info-card.callAction.none": "Niciunul",
   "admin/editor.info-card.callAction.button": "Buton",
   "admin/editor.info-card.callAction.link": "Link",

messages/th.json

@@ -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.imageWidth.description": "ค่านี้ใช้ในการคำนวณอัตราส่วนภาพและช่วยปรับปรุง CLS ระหว่างการโหลดรูปภาพ",
+  "admin/editor.info-card.imageHeight.title": "ความสูงของรูปภาพ",
+  "admin/editor.info-card.imageHeight.description": "ค่านี้ใช้ในการคำนวณอัตราส่วนภาพและช่วยปรับปรุง CLS ระหว่างการโหลดรูปภาพ",
   "admin/editor.info-card.callAction.none": "ไม่มี",
   "admin/editor.info-card.callAction.button": "ปุ่ม",
   "admin/editor.info-card.callAction.link": "ลิงก์",