chore(gd): Styles for SVG Icons thumbnails were broken (#29278)

### Proposed Changes * Add specific styles for SVGs ### Screenshots https://github.com/user-attachments/assets/37ff795e-1c81-4a77-879d-64541324e744
dotCMS · Jul 19, 2024 · ed498f3 · ed498f3
1 parent e01da44
commit ed498f3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 deletions.
diff --git a/.../dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.scss b/.../dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.scss
@@ -26,6 +26,11 @@ dot-contentlet-icon {
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
+
+    &.svg-thumbnail {
+        background-size: contain;
+    }
+
     img {
         width: 0px;
         height: 0px;

diff --git a/...s/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx b/...s/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx
@@ -36,9 +36,11 @@ export class DotContentletThumbnail {
     fieldVariable = '';
 
     @State() renderImage: boolean;
+    @State() isSVG: boolean;
 
     componentWillLoad() {
         const { hasTitleImage, mimeType } = this.contentlet;
+        this.isSVG = mimeType === 'image/svg+xml';
         // Some endpoints return this property as a boolean
         if (typeof hasTitleImage === 'boolean' && hasTitleImage) {
             this.renderImage = hasTitleImage;
@@ -54,6 +56,7 @@ export class DotContentletThumbnail {
         const backgroundImageURL =
             this.contentlet && this.backgroundImage ? `url(${this.getImageURL()})` : '';
         const imgClass = this.backgroundImage ? 'background-image' : '';
+        const svgClass = this.isSVG ? ' svg-thumbnail' : '';
 
         return (
             <Host>
@@ -66,8 +69,10 @@ export class DotContentletThumbnail {
                     />
                 ) : this.renderImage ? (
                     <div
-                        class={`thumbnail ${imgClass}`}
-                        style={{ 'background-image': backgroundImageURL }}>
+                        class={`thumbnail ${imgClass}${svgClass}`}
+                        style={{
+                            'background-image': backgroundImageURL
+                        }}>
                         <img
                             src={this.getImageURL()}
                             alt={this.alt}
@@ -87,13 +92,16 @@ export class DotContentletThumbnail {
     }
 
     private getImageURL(): string {
-        return this.contentlet.mimeType === 'application/pdf'
-            ? `/contentAsset/image/${this.contentlet.inode}/${
-                  this.fieldVariable || this.contentlet.titleImage
-              }/pdf_page/1/resize_w/250/quality_q/45`
-            : `/dA/${this.contentlet.inode}/${this.fieldVariablePath()}500w/50q?r=${
-                  this.contentlet.modDateMilis || this.contentlet.modDate
-              }`;
+        if (this.contentlet.mimeType === 'application/pdf')
+            return `/contentAsset/image/${this.contentlet.inode}/${
+                this.fieldVariable || this.contentlet.titleImage
+            }/pdf_page/1/resize_w/250/quality_q/45`;
+
+        if (this.isSVG) return `/contentAsset/image/${this.contentlet.inode}/asset`;
+
+        return `/dA/${this.contentlet.inode}/${this.fieldVariablePath()}500w/50q?r=${
+            this.contentlet.modDateMilis || this.contentlet.modDate
+        }`;
     }
 
     private fieldVariablePath(): string {

diff --git a/...-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.scss b/...-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.scss
@@ -7,8 +7,14 @@
 }
 
 dot-contentlet-thumbnail::ng-deep {
+    .background-image:not(.svg-thumbnail) {
+        img {
+            object-fit: cover;
+        }
+    }
+
     img {
-        object-fit: cover;
+        object-fit: contain;
     }
 }