From cb55576b4e67b7f391e7329cf268bc69883b12e6 Mon Sep 17 00:00:00 2001 From: Alex Efremov Date: Mon, 6 Jan 2025 16:37:18 +0700 Subject: [PATCH 1/2] Add image size properties to the infoCard component --- CHANGELOG.md | 4 ++++ docs/InfoCard.md | 2 ++ messages/ar.json | 4 ++++ messages/bg.json | 4 ++++ messages/context.json | 4 ++++ messages/de.json | 4 ++++ messages/en.json | 4 ++++ messages/es.json | 4 ++++ messages/fr.json | 4 ++++ messages/hu.json | 4 ++++ messages/id.json | 4 ++++ messages/it.json | 4 ++++ messages/ja.json | 4 ++++ messages/ko.json | 4 ++++ messages/nl.json | 4 ++++ messages/nn.json | 4 ++++ messages/no.json | 4 ++++ messages/pt.json | 4 ++++ messages/ro.json | 4 ++++ messages/th.json | 4 ++++ react/components/InfoCard/index.js | 16 ++++++++++++++++ 21 files changed, 94 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 99b6f5ba9..9d5073c2c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/docs/InfoCard.md b/docs/InfoCard.md index f8a347a06..f48f61d8e 100644 --- a/docs/InfoCard.md +++ b/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` | diff --git a/messages/ar.json b/messages/ar.json index b2e274998..10139082e 100644 --- a/messages/ar.json +++ b/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": "الرابط", diff --git a/messages/bg.json b/messages/bg.json index a2b5b6efc..943fa2813 100644 --- a/messages/bg.json +++ b/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": "Връзка", diff --git a/messages/context.json b/messages/context.json index e6f328345..10d61f71e 100644 --- a/messages/context.json +++ b/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", diff --git a/messages/de.json b/messages/de.json index b4ad96989..483b371da 100644 --- a/messages/de.json +++ b/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", diff --git a/messages/en.json b/messages/en.json index 31bb39d60..696e7b61c 100644 --- a/messages/en.json +++ b/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", diff --git a/messages/es.json b/messages/es.json index 91d2b0020..22253e928 100644 --- a/messages/es.json +++ b/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", diff --git a/messages/fr.json b/messages/fr.json index 1a1667b3e..8ae749bc0 100644 --- a/messages/fr.json +++ b/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", diff --git a/messages/hu.json b/messages/hu.json index 818f046a5..d90bc0792 100644 --- a/messages/hu.json +++ b/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", diff --git a/messages/id.json b/messages/id.json index dd41f40a4..5042a6464 100644 --- a/messages/id.json +++ b/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", diff --git a/messages/it.json b/messages/it.json index 68042394c..0cdd32d2d 100644 --- a/messages/it.json +++ b/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", diff --git a/messages/ja.json b/messages/ja.json index 2e9b74618..97e90394e 100644 --- a/messages/ja.json +++ b/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": "リンク", diff --git a/messages/ko.json b/messages/ko.json index 8be7ab902..81bbc4474 100644 --- a/messages/ko.json +++ b/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": "링크", diff --git a/messages/nl.json b/messages/nl.json index 69ac748c8..a61cdfcc4 100644 --- a/messages/nl.json +++ b/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", diff --git a/messages/nn.json b/messages/nn.json index 305ed09a9..77130aa37 100644 --- a/messages/nn.json +++ b/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", diff --git a/messages/no.json b/messages/no.json index 305ed09a9..17f65f4b7 100644 --- a/messages/no.json +++ b/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", diff --git a/messages/pt.json b/messages/pt.json index 0bd46ac64..d6a42d0a3 100644 --- a/messages/pt.json +++ b/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", diff --git a/messages/ro.json b/messages/ro.json index cb69dd261..f3e7f6a2d 100644 --- a/messages/ro.json +++ b/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", diff --git a/messages/th.json b/messages/th.json index 99a2a0f7d..d3ebb0013 100644 --- a/messages/th.json +++ b/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": "ลิงก์", diff --git a/react/components/InfoCard/index.js b/react/components/InfoCard/index.js index 81e70532a..c7f31f7c6 100644 --- a/react/components/InfoCard/index.js +++ b/react/components/InfoCard/index.js @@ -99,6 +99,8 @@ const InfoCard = ({ linkTarget, fetchpriority, preload, + imageHeight, + imageWidth, }) => { const { hints: { mobile }, @@ -241,6 +243,8 @@ const InfoCard = ({ {formatIOMessage({ Date: Tue, 7 Jan 2025 14:19:36 +0700 Subject: [PATCH 2/2] Add imageWidth and imageHeight properties to contentSchemas --- store/contentSchemas.json | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/store/contentSchemas.json b/store/contentSchemas.json index b8a9f8ac7..b20cf042f 100644 --- a/store/contentSchemas.json +++ b/store/contentSchemas.json @@ -93,6 +93,16 @@ "$ref": "app:vtex.native-types#/definitions/url", "default": "" }, + "imageWidth": { + "title": "admin/editor.info-card.imageWidth.title", + "description": "admin/editor.info-card.imageWidth.description", + "type": "number" + }, + "imageHeight": { + "title": "admin/editor.info-card.imageHeight.title", + "description": "admin/editor.info-card.imageHeight.description", + "type": "number" + }, "textPosition": { "default": "left", "type": "string",