Merge pull request #414 from statikbe/KarelJanVanHaute/issue411

Load original image if image optimize is not done yet
statikbe · Feb 12, 2025 · 38be22b · 38be22b
2 parents b4e5c87 + ad9e4fb
commit 38be22b
Show file tree

Hide file tree

Showing 16 changed files with 1,932 additions and 113 deletions.
diff --git a/config/image-optimize.php b/config/image-optimize.php
@@ -115,7 +115,7 @@
                 'commandPath'           => '/usr/bin/cwebp',
                 'commandOptions'        => '-jpeg_like -af',
                 'commandOutputFileFlag' => '-o',
-                'commandQualityFlag'    => '-q',
+                'commandQualityFlag'    => '-q 100',
                 'imageVariantExtension' => 'webp',
             ],
         ],
@@ -159,10 +159,10 @@
         'imageVariantCreators' => [
             // webp variant creator
             'cwebp' => [
-                'commandPath'           => '/usr/local/bin/cwebp',
+                'commandPath'           => '/usr/local/Cellar/webp/1.3.0_1/bin/cwebp',
                 'commandOptions'        => '-jpeg_like -af',
                 'commandOutputFileFlag' => '-o',
-                'commandQualityFlag'    => '-q',
+                'commandQualityFlag'    => '-q 100',
                 'imageVariantExtension' => 'webp',
             ],
         ],

diff --git a/config/project/fields/optimizedContent--5a25f3e9-a180-4a29-aa41-8721fbf815b9.yaml b/config/project/fields/optimizedContent--5a25f3e9-a180-4a29-aa41-8721fbf815b9.yaml
@@ -4,9 +4,9 @@ instructions: 'Optimized images for the content builder.'
 name: 'Optimized Content'
 searchable: false
 settings:
-  displayDominantColorPalette: false
+  displayDominantColorPalette: true
   displayLazyLoadPlaceholderImages: false
-  displayOptimizedImageVariants: false
+  displayOptimizedImageVariants: true
   fieldVolumeSettings:
     __assoc__:
       -
@@ -15,6 +15,7 @@ settings:
   ignoreFilesOfType:
     - image/svg
     - image/gif
+    - application/pdf
   variants:
     -
       __assoc__:
@@ -112,7 +113,7 @@ settings:
             - '2'
         -
           - quality
-          - '60'
+          - '82'
         -
           - format
           - ''

diff --git a/config/project/fields/optimizedHero--197566c6-94bb-4e67-86d7-8945f2589a1d.yaml b/config/project/fields/optimizedHero--197566c6-94bb-4e67-86d7-8945f2589a1d.yaml
@@ -4,9 +4,9 @@ instructions: null
 name: 'Optimized Hero'
 searchable: false
 settings:
-  displayDominantColorPalette: false
+  displayDominantColorPalette: true
   displayLazyLoadPlaceholderImages: false
-  displayOptimizedImageVariants: false
+  displayOptimizedImageVariants: true
   fieldVolumeSettings:
     __assoc__:
       -
@@ -137,7 +137,7 @@ settings:
             - '2'
         -
           - quality
-          - '60'
+          - '82'
         -
           - format
           - ''

diff --git a/config/project/fields/optimizedOverview--0207f1a0-8ec0-4b87-9197-c1d5a9a7b61d.yaml b/config/project/fields/optimizedOverview--0207f1a0-8ec0-4b87-9197-c1d5a9a7b61d.yaml
@@ -4,9 +4,9 @@ instructions: 'Optimized images for overview items.'
 name: 'Optimized Overview'
 searchable: false
 settings:
-  displayDominantColorPalette: false
+  displayDominantColorPalette: true
   displayLazyLoadPlaceholderImages: false
-  displayOptimizedImageVariants: false
+  displayOptimizedImageVariants: true
   fieldVolumeSettings:
     __assoc__:
       -
@@ -15,6 +15,7 @@ settings:
   ignoreFilesOfType:
     - image/svg
     - image/gif
+    - application/pdf
   variants:
     -
       __assoc__:
@@ -62,7 +63,7 @@ settings:
             - '2'
         -
           - quality
-          - '60'
+          - '82'
         -
           - format
           - ''
@@ -87,7 +88,7 @@ settings:
             - '2'
         -
           - quality
-          - '60'
+          - '82'
         -
           - format
           - ''

diff --git a/config/project/fields/optimizedTextImage--60b48ff5-1ab2-471b-8592-cdc623e0882c.yaml b/config/project/fields/optimizedTextImage--60b48ff5-1ab2-471b-8592-cdc623e0882c.yaml
@@ -4,9 +4,9 @@ instructions: 'Optimized images for text + image in content builder'
 name: 'Optimized Text Image'
 searchable: false
 settings:
-  displayDominantColorPalette: false
+  displayDominantColorPalette: true
   displayLazyLoadPlaceholderImages: false
-  displayOptimizedImageVariants: false
+  displayOptimizedImageVariants: true
   fieldVolumeSettings:
     __assoc__:
       -
@@ -15,6 +15,7 @@ settings:
   ignoreFilesOfType:
     - image/svg
     - image/gif
+    - application/pdf
   variants:
     -
       __assoc__:
@@ -62,7 +63,7 @@ settings:
             - '2'
         -
           - quality
-          - '60'
+          - '82'
         -
           - format
           - ''
@@ -87,7 +88,7 @@ settings:
             - '2'
         -
           - quality
-          - '60'
+          - '82'
         -
           - format
           - ''

diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "postcss-mixins": "^9.0.4",
     "postcss-nested": "^6.0.1",
     "promise-polyfill": "^8.3.0",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.4.16",
     "terser": "^5.24.0",
     "typescript": "5.3.2",
     "vite": "^5.0.13",
@@ -51,6 +51,7 @@
     "@popperjs/core": "^2.11.8",
     "flatpickr": "^4.6.13",
     "leaflet": "^1.9.4",
+    "tailwind": "^4.0.0",
     "tippy.js": "^6.3.7",
     "vite-plugin-dynamic-import": "^1.5.0"
   },

diff --git a/templates/_site/_snippet/_content/_blocks/_callToAction.twig b/templates/_site/_snippet/_content/_blocks/_callToAction.twig
@@ -13,7 +13,7 @@
                                         sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px"
                                         type="image/webp"/>
                             {% endif %}
-                            <img src="{{ optimizedImage.placeholderBox() }}"
+                            <img src="{{ optimizedImage.optimizedImageUrls|length == 0 ? image.getUrl() : optimizedImage.placeholderBox() }}"
                                  srcset="{{ optimizedImage.srcset() }}"
                                  sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px"
                                  alt="{{ image.alt }}"

diff --git a/templates/_site/_snippet/_content/_blocks/_image.twig b/templates/_site/_snippet/_content/_blocks/_image.twig
@@ -48,7 +48,7 @@
                                     class="w-full {% if block.showLargerVersionInPopup %}h-full object-cover{% endif %}"
                                     loading="lazy"/>
                             {% else %}
-                                <img src="{{ optimizedImage.placeholderBox() }}"
+                                <img src="{{ optimizedImage.optimizedImageUrls|length == 0 ? image.getUrl() : optimizedImage.placeholderBox() }}"
                                     srcset="{{ optimizedImage.srcset() }}"
                                     sizes="{{sizes}}"
                                     width="{{ optimizedImage.placeholderWidth }}"

diff --git a/templates/_site/_snippet/_content/_blocks/_slider.twig b/templates/_site/_snippet/_content/_blocks/_slider.twig
@@ -16,11 +16,12 @@
 												sizes="(max-width: 819px) 100vw, (min-width: 820px) 780px"
 												type="image/webp"/>
 									{% endif %}
-									<img src="{{ optimizedImage.placeholderBox() }}"
+									<img src="{{ optimizedImage.optimizedImageUrls|length == 0 ? image.getUrl() : optimizedImage.placeholderBox() }}"
 										 srcset="{{ optimizedImage.srcset() }}"
 										 sizes="(max-width: 819px) 100vw, (min-width: 820px) 780px"
 										 width="{{optimizedImage.placeholderWidth}}" height="{{optimizedImage.placeholderHeight}}"
 										 alt="{{ image.alt }}"
+										 class="aspect-[4/3] object-cover w-full object-center"
 										 loading="lazy"/>
 								</picture>
 							</a>

diff --git a/templates/_site/_snippet/_content/_blocks/_textImage.twig b/templates/_site/_snippet/_content/_blocks/_textImage.twig
@@ -17,7 +17,7 @@
 						alt="{{ image.alt }}"
 						class="w-full" loading="lazy"/>
 				{% else %}
-					<img src="{{ optimizedImage.placeholderBox() }}"
+					<img src="{{ optimizedImage.optimizedImageUrls|length == 0 ? image.getUrl() : optimizedImage.placeholderBox() }}"
 						srcset="{{ optimizedImage.srcset() }}"
 						sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px"
 						width="{{optimizedImage.placeholderWidth}}" height="{{optimizedImage.placeholderHeight}}"

diff --git a/templates/_site/_snippet/_content/_blocks/_textVideo.twig b/templates/_site/_snippet/_content/_blocks/_textVideo.twig
@@ -17,7 +17,7 @@
                                             sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px"
                                             type="image/webp"/>
                                 {% endif %}
-                                <img src="{{ optimizedImage.placeholderBox() }}"
+                                <img src="{{ optimizedImage.optimizedImageUrls|length == 0 ? image.getUrl() : optimizedImage.placeholderBox() }}"
                                      srcset="{{ optimizedImage.srcset() }}"
                                      sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px"
                                      width="{{optimizedImage.placeholderWidth}}" height="{{optimizedImage.placeholderHeight}}"

diff --git a/templates/_site/_snippet/_content/_blocks/_video.twig b/templates/_site/_snippet/_content/_blocks/_video.twig
@@ -13,7 +13,7 @@
 									sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 526px, (min-width: 980px) and (max-width: 1199px) 632px, (min-width: 1200px) 779px"
 									type="image/webp"/>
 						{% endif %}
-							<img src="{{ optimizedImage.placeholderBox() }}"
+							<img src="{{ optimizedImage.optimizedImageUrls|length == 0 ? image.getUrl() : optimizedImage.placeholderBox() }}"
 								srcset="{{ optimizedImage.srcset() }}"
 								sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 526px, (min-width: 980px) and (max-width: 1199px) 632px, (min-width: 1200px) 779px"
 								width="{{optimizedImage.placeholderWidth}}" height="{{optimizedImage.placeholderHeight}}"

diff --git a/templates/_site/_snippet/_content/_defaultHeader.twig b/templates/_site/_snippet/_content/_defaultHeader.twig
@@ -17,7 +17,7 @@
                                      width="{{ headerImage.width }}" height="{{ headerImage.height }}"
                                      alt="" class="sr-only js-bg-src" loading="lazy"/>
                             {% else %}
-                                <img src="{{ optimizedImage.placeholderBox() }}"
+                                <img src="{{ optimizedImage.optimizedImageUrls|length == 0 ? headerImage.getUrl() : optimizedImage.placeholderBox() }}"
                                      srcset="{{ optimizedImage.srcset() }}"
                                      sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 591px, (min-width: 980px) and (max-width: 1199px) 711px, (min-width: 1200px) 876px"
                                      width="{{ optimizedImage.placeholderWidth }}"

diff --git a/templates/_site/_snippet/_content/_hero.twig b/templates/_site/_snippet/_content/_hero.twig
@@ -29,7 +29,7 @@
                 {% if craft.imageOptimize.serverSupportsWebP() and heroImage.extension != 'svg' and heroImage.extension != 'gif' and heroImage.extension != 'webp' %}
                     <source srcset="{{ optimizedHero.srcsetWebP() }}" sizes="100vw" type="image/webp"/>
                 {% endif %}
-                <img src="{{ optimizedHero.placeholderBox() }}" srcset="{{ optimizedHero.srcset() }}" sizes="100vw" alt="" class="sr-only js-bg-src" loading="lazy"/>
+                <img src="{{ optimizedHero.optimizedImageUrls|length == 0 ? heroImage.getUrl() : optimizedHero.placeholderBox() }}" srcset="{{ optimizedHero.srcset() }}" sizes="100vw" alt="" class="sr-only js-bg-src" loading="lazy"/>
             </picture>
         </div>
     </div>

diff --git a/templates/_site/_snippet/_item/_card.twig b/templates/_site/_snippet/_item/_card.twig
@@ -33,13 +33,13 @@
                                         sizes="{{ sizes }}"
                                         type="image/webp"/>
                             {% endif %}
-                            <img src="{{ optimizedImage.placeholderBox() }}"
+                            <img src="{{ optimizedImage.optimizedImageUrls|length == 0 ? overviewImage.getUrl() : optimizedImage.placeholderBox() }}"
                                  srcset="{{ optimizedImage.srcset() }}"
                                  sizes="{{ sizes }}"
                                  width="{{ optimizedImage.placeholderWidth }}"
                                  height="{{ optimizedImage.placeholderHeight }}"
                                  alt=""
-                                 class="w-full {% if not showInColumns %}sr-only js-bg-src{% endif %}"
+                                 class="w-full {% if not showInColumns %}sr-only js-bg-src {% else %}aspect-[4/3] object-cover w-full object-center{% endif %}"
                                  loading="lazy"/>
                         </picture>
                     </div>