fix: Don't apply background placeholder CSS to images that may be tra…

…nsparent like SVGs or GIFs ([#410](#410))
nystudio107 · Oct 9, 2024 · 1c6b5cd · 1c6b5cd
1 parent 12bb25c
commit 1c6b5cd
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/models/BaseImageTag.php b/src/models/BaseImageTag.php
@@ -38,8 +38,13 @@ protected function swapLazyLoadAttrs(string $loading, string $placeHolder, array
             if (empty($attrs['style'])) {
                 $attrs['style'] = [];
             }
-            $attrs['style']['background-image'] = 'url(' . $this->getLazyLoadSrc($placeHolder) . ')';
-            $attrs['style']['background-size'] = 'cover';
+            // If the original image is an SVG or gif, don't add the placeholder box CSS so that transparency works as intended
+            $path = parse_url($attrs['src'], PHP_URL_PATH);
+            $extension = pathinfo($path, PATHINFO_EXTENSION);
+            if ($extension !== 'svg' && $extension !== 'gif') {
+                $attrs['style']['background-image'] = 'url(' . $this->getLazyLoadSrc($placeHolder) . ')';
+                $attrs['style']['background-size'] = 'cover';
+            }
         }
         // Handle attributes that lazy  and lazySizesFallback have in common
         switch ($loading) {