Merge pull request #126 from flyntwp/timberDynamicResize

feat(timberDynamicResize): use in all components
flyntwp · Aug 7, 2019 · 074470c · 074470c
2 parents 3aa47ba + 93019d8
commit 074470c
Show file tree

Hide file tree

Showing 15 changed files with 105 additions and 105 deletions.
diff --git a/Components/BlockImageTextCta/index.twig b/Components/BlockImageTextCta/index.twig
@@ -7,14 +7,14 @@
       <div class="box-inner box-inner--image">
         <figure class="figure">
           <img class="figure-image lazyload"
-            src="{{ image.src|resize(665) }}"
+            src="{{ image.src|resizeDynamic(665) }}"
             srcset="{{ placeholderImage(665, 665 / image.aspect) }}"
             data-srcset="
-              {{ image.src|resize(920) }} 920w,
-              {{ image.src|resize(815) }} 815w,
-              {{ image.src|resize(740) }} 740w,
-              {{ image.src|resize(665) }} 665w,
-              {{ image.src|resize(375) }} 375w"
+              {{ image.src|resizeDynamic(920) }} 920w,
+              {{ image.src|resizeDynamic(815) }} 815w,
+              {{ image.src|resizeDynamic(740) }} 740w,
+              {{ image.src|resizeDynamic(665) }} 665w,
+              {{ image.src|resizeDynamic(375) }} 375w"
             data-sizes="auto"
             alt="{{ image.alt|e }}">
           {% if image.caption %}

diff --git a/Components/BlockTextImageCrop/index.twig b/Components/BlockTextImageCrop/index.twig
@@ -3,12 +3,12 @@
     <div class="box-inner box-inner--image">
       <figure class="figure imagecontainer">
         <img class="figure-image lazyload imagecontainer-img"
-          src="{{ image.src|resize(1280) }}"
+          src="{{ image.src|resizeDynamic(1280) }}"
           srcset="{{ placeholderImage(1280, 1280 / image.aspect) }}"
           data-srcset="
-            {{ image.src|resize(1280) }} 1280w,
-            {{ image.src|resize(768) }} 768w,
-            {{ image.src|resize(375) }} 375w"
+            {{ image.src|resizeDynamic(1280) }} 1280w,
+            {{ image.src|resizeDynamic(768) }} 768w,
+            {{ image.src|resizeDynamic(375) }} 375w"
           data-sizes="auto"
           alt="{{ image.alt|e }}">
         {% if image.caption %}

diff --git a/Components/GridDownloadPortrait/index.twig b/Components/GridDownloadPortrait/index.twig
@@ -27,11 +27,11 @@
               <img
                 class="download-image lazyload"
                 srcset="{{ placeholderImage(370, 555) }}"
-                src="{{ item.image.src|resize(370, 555) }}"
+                src="{{ item.image.src|resizeDynamic(370, 555) }}"
                 data-srcset="
-                {{ item.image.src|resize(450, 675) }} 450w,
-                {{ item.image.src|resize(370, 555) }} 370w,
-                {{ item.image.src|resize(240, 360) }} 240w"
+                {{ item.image.src|resizeDynamic(450, 675) }} 450w,
+                {{ item.image.src|resizeDynamic(370, 555) }} 370w,
+                {{ item.image.src|resizeDynamic(240, 360) }} 240w"
                 sizes="auto"
                 alt="{{ item.image.alt|e }}">
             {% endif %}

diff --git a/Components/GridImageText/index.twig b/Components/GridImageText/index.twig
@@ -10,16 +10,16 @@
         <li class="grid-item">
           <div class="content {{ options.card == 'layoutCard' ? 'boxShadow themeReset' }}">
             <img class="content-image lazyload"
-              src="{{ item.image.src|resize(750, 500) }}"
+              src="{{ item.image.src|resizeDynamic(750, 500) }}"
               srcset="{{ placeholderImage(3, 2) }}"
               data-srcset="
-                {{ item.image.src|resize(1920, 1280) }} 1920w,
-                {{ item.image.src|resize(1280, 853) }} 1280w,
-                {{ item.image.src|resize(1050, 700) }} 1050w,
-                {{ item.image.src|resize(750, 500) }} 750w,
-                {{ item.image.src|resize(600, 400) }} 600w,
-                {{ item.image.src|resize(480, 320) }} 480w,
-                {{ item.image.src|resize(312, 208) }} 312w"
+                {{ item.image.src|resizeDynamic(1920, 1280) }} 1920w,
+                {{ item.image.src|resizeDynamic(1280, 853) }} 1280w,
+                {{ item.image.src|resizeDynamic(1050, 700) }} 1050w,
+                {{ item.image.src|resizeDynamic(750, 500) }} 750w,
+                {{ item.image.src|resizeDynamic(600, 400) }} 600w,
+                {{ item.image.src|resizeDynamic(480, 320) }} 480w,
+                {{ item.image.src|resizeDynamic(312, 208) }} 312w"
               data-sizes="auto"
               alt="{{ item.image.alt|e }}">
             {% if item.contentHtml %}

diff --git a/Components/GridPostsArchive/index.twig b/Components/GridPostsArchive/index.twig
@@ -16,13 +16,13 @@
             {% if post.thumbnail %}
               <figure class="figure">
                 <img class="figure-image lazyload"
-                  src="{{ post.thumbnail|resize(424, 283) }}"
+                  src="{{ post.thumbnail.src|resizeDynamic(424, 283) }}"
                   srcset="{{ placeholderImage(424, 283) }}"
                   data-srcset="
-                    {{ post.thumbnail|resize(1280, 853) }} 1280w,
-                    {{ post.thumbnail|resize(750, 500) }} 750w,
-                    {{ post.thumbnail|resize(424, 283) }} 424w,
-                    {{ post.thumbnail|resize(375, 250) }} 375w"
+                    {{ post.thumbnail.src|resizeDynamic(1280, 853) }} 1280w,
+                    {{ post.thumbnail.src|resizeDynamic(750, 500) }} 750w,
+                    {{ post.thumbnail.src|resizeDynamic(424, 283) }} 424w,
+                    {{ post.thumbnail.src|resizeDynamic(375, 250) }} 375w"
                   data-sizes="auto"
                   alt="{{ post.thumbnail.alt|e }}">
               </figure>

diff --git a/Components/GridPostsLatest/index.twig b/Components/GridPostsLatest/index.twig
@@ -12,16 +12,16 @@
             <div class="content boxShadow themeReset">
               <a href="{{ item.link }}" class="content-link">
                 <img class="content-image lazyload"
-                  src="{{ item.thumbnail|resize(750, 500) }}"
+                  src="{{ item.thumbnail.src|resizeDynamic(750, 500) }}"
                   srcset="{{ placeholderImage(3, 2) }}"
                   data-srcset="
-                    {{ item.thumbnail|resize(1920, 1280) }} 1920w,
-                    {{ item.thumbnail|resize(1280, 853) }} 1280w,
-                    {{ item.thumbnail|resize(1050, 700) }} 1050w,
-                    {{ item.thumbnail|resize(750, 500) }} 750w,
-                    {{ item.thumbnail|resize(600, 400) }} 600w,
-                    {{ item.thumbnail|resize(480, 320) }} 480w,
-                    {{ item.thumbnail|resize(312, 208) }} 312w"
+                    {{ item.thumbnail.src|resizeDynamic(1920, 1280) }} 1920w,
+                    {{ item.thumbnail.src|resizeDynamic(1280, 853) }} 1280w,
+                    {{ item.thumbnail.src|resizeDynamic(1050, 700) }} 1050w,
+                    {{ item.thumbnail.src|resizeDynamic(750, 500) }} 750w,
+                    {{ item.thumbnail.src|resizeDynamic(600, 400) }} 600w,
+                    {{ item.thumbnail.src|resizeDynamic(480, 320) }} 480w,
+                    {{ item.thumbnail.src|resizeDynamic(312, 208) }} 312w"
                   data-sizes="auto"
                   alt="{{ item.thumbnail.alt|e }}">
                 <div class="content-inner boxPadding">

diff --git a/Components/GridPostsSlider/index.twig b/Components/GridPostsSlider/index.twig
@@ -15,13 +15,13 @@
                 {% if item.thumbnail %}
                   <figure class="figure">
                     <img class="image lazyload"
-                      src="{{ item.thumbnail|resize(300, 200) }}"
+                      src="{{ item.thumbnail.src|resizeDynamic(300, 200) }}"
                       srcset="{{ placeholderImage(300, 200) }}"
                       data-srcset="
-                        {{ item.thumbnail|resize(912, 608) }} 608w,
-                        {{ item.thumbnail|resize(600, 400) }} 600w,
-                        {{ item.thumbnail|resize(456, 304) }} 456w,
-                        {{ item.thumbnail|resize(300, 200) }} 300w"
+                        {{ item.thumbnail.src|resizeDynamic(912, 608) }} 608w,
+                        {{ item.thumbnail.src|resizeDynamic(600, 400) }} 600w,
+                        {{ item.thumbnail.src|resizeDynamic(456, 304) }} 456w,
+                        {{ item.thumbnail.src|resizeDynamic(300, 200) }} 300w"
                       data-sizes="auto"
                       alt="{{ item.thumbnail.alt|e }}">
                   </figure>

diff --git a/Components/GridPostsTeaser/index.twig b/Components/GridPostsTeaser/index.twig
@@ -11,16 +11,16 @@
           <li class="grid-item">
             <a href="{{ item.link }}" class="content boxShadow themeReset">
               <img class="content-image lazyload"
-                src="{{ item.thumbnail|resize(750, 500) }}"
+                src="{{ item.thumbnail.src|resizeDynamic(750, 500) }}"
                 srcset="{{ placeholderImage(3, 2) }}"
                 data-srcset="
-                  {{ item.thumbnail|resize(1920, 1280) }} 1920w,
-                  {{ item.thumbnail|resize(1280, 853) }} 1280w,
-                  {{ item.thumbnail|resize(1050, 700) }} 1050w,
-                  {{ item.thumbnail|resize(750, 500) }} 750w,
-                  {{ item.thumbnail|resize(600, 400) }} 600w,
-                  {{ item.thumbnail|resize(480, 320) }} 480w,
-                  {{ item.thumbnail|resize(312, 208) }} 312w"
+                  {{ item.thumbnail.src|resizeDynamic(1920, 1280) }} 1920w,
+                  {{ item.thumbnail.src|resizeDynamic(1280, 853) }} 1280w,
+                  {{ item.thumbnail.src|resizeDynamic(1050, 700) }} 1050w,
+                  {{ item.thumbnail.src|resizeDynamic(750, 500) }} 750w,
+                  {{ item.thumbnail.src|resizeDynamic(600, 400) }} 600w,
+                  {{ item.thumbnail.src|resizeDynamic(480, 320) }} 480w,
+                  {{ item.thumbnail.src|resizeDynamic(312, 208) }} 312w"
                 data-sizes="auto"
                 alt="{{ item.thumbnail.alt|e }}">
               <div class="content-inner">

diff --git a/Components/GridTeaserTiles/index.twig b/Components/GridTeaserTiles/index.twig
@@ -11,11 +11,11 @@
             <img
               class="teaser-image lazyload"
               srcset="{{ placeholderImage(404, 404) }}"
-              src="{{ item.image.src|resize(404, 404) }}"
+              src="{{ item.image.src|resizeDynamic(404, 404) }}"
               data-srcset="
-              {{ item.image.src|resize(808, 808) }} 808w,
-              {{ item.image.src|resize(404, 404) }} 404w,
-              {{ item.image.src|resize(250, 250) }} 250w"
+              {{ item.image.src|resizeDynamic(808, 808) }} 808w,
+              {{ item.image.src|resizeDynamic(404, 404) }} 404w,
+              {{ item.image.src|resizeDynamic(250, 250) }} 250w"
               sizes="auto"
               alt="{{ item.image.alt|e }}"
             >

diff --git a/Components/HeroImageCta/index.twig b/Components/HeroImageCta/index.twig
@@ -6,11 +6,11 @@
         {% if images.imageMobile %}
           <source
             srcset="
-              {{ images.imageDesktop.src | resize(2560) }} 2560w,
-              {{ images.imageDesktop.src | resize(2048) }} 2048w,
-              {{ images.imageDesktop.src | resize(1320) }} 1320w,
-              {{ images.imageDesktop.src | resize(1024) }} 1024w,
-              {{ images.imageDesktop.src | resize(768) }} 768w"
+              {{ images.imageDesktop.src | resizeDynamic(2560) }} 2560w,
+              {{ images.imageDesktop.src | resizeDynamic(2048) }} 2048w,
+              {{ images.imageDesktop.src | resizeDynamic(1320) }} 1320w,
+              {{ images.imageDesktop.src | resizeDynamic(1024) }} 1024w,
+              {{ images.imageDesktop.src | resizeDynamic(768) }} 768w"
             media="(min-width: 768px)">
           <img
             class="content-image lazyload
@@ -19,9 +19,9 @@
               {{ options.alignImage.desktop.vertical }}
               {{ options.alignImage.desktop.horizontal }}"
             srcset="
-              {{ images.imageMobile.src| resize(375) }} 375w,
-              {{ images.imageMobile.src | resize(750) }} 750w"
-            src="{{ images.imageDesktop.src | resize(375) }}"
+              {{ images.imageMobile.src| resizeDynamic(375) }} 375w,
+              {{ images.imageMobile.src | resizeDynamic(750) }} 750w"
+            src="{{ images.imageDesktop.src | resizeDynamic(375) }}"
             data-sizes="auto"
             alt="{{ images.imageDesktop.alt|e }}">
           {% else %}
@@ -32,13 +32,13 @@
                 {{ options.alignImage.desktop.vertical }}
                 {{ options.alignImage.desktop.horizontal }}"
               srcset="
-                {{ images.imageDesktop.src | resize(2560) }} 2560w,
-                {{ images.imageDesktop.src | resize(2048) }} 2048w,
-                {{ images.imageDesktop.src | resize(1320) }} 1320w,
-                {{ images.imageDesktop.src | resize(1024) }} 1024w,
-                {{ images.imageDesktop.src | resize(768) }} 768w,
-                {{ images.imageDesktop.src | resize(375) }} 375w"
-              src="{{ images.imageDesktop.src | resize(375) }}"
+                {{ images.imageDesktop.src | resizeDynamic(2560) }} 2560w,
+                {{ images.imageDesktop.src | resizeDynamic(2048) }} 2048w,
+                {{ images.imageDesktop.src | resizeDynamic(1320) }} 1320w,
+                {{ images.imageDesktop.src | resizeDynamic(1024) }} 1024w,
+                {{ images.imageDesktop.src | resizeDynamic(768) }} 768w,
+                {{ images.imageDesktop.src | resizeDynamic(375) }} 375w"
+              src="{{ images.imageDesktop.src | resizeDynamic(375) }}"
               data-sizes="auto"
               alt="{{ images.imageDesktop.alt|e }}">
         {% endif %}

diff --git a/Components/HeroImageText/index.twig b/Components/HeroImageText/index.twig
@@ -1,17 +1,17 @@
 <div class="flyntComponent" is="flynt-hero-image-text">
   <picture>
     <source srcset="
-      {{ images.imageDesktop.src | resize(2560, 800, 'center') }} 2560w,
-      {{ images.imageDesktop.src | resize(2048, 800, 'center') }} 2048w,
-      {{ images.imageDesktop.src | resize(1440, 400, 'center') }} 1280w,
-      {{ images.imageDesktop.src | resize(900, 400, 'center') }} 900w,
-      {{ images.imageDesktop.src | resize(768, 400, 'center') }} 768w"
+      {{ images.imageDesktop.src | resizeDynamic(2560, 800, 'center') }} 2560w,
+      {{ images.imageDesktop.src | resizeDynamic(2048, 800, 'center') }} 2048w,
+      {{ images.imageDesktop.src | resizeDynamic(1440, 400, 'center') }} 1280w,
+      {{ images.imageDesktop.src | resizeDynamic(900, 400, 'center') }} 900w,
+      {{ images.imageDesktop.src | resizeDynamic(768, 400, 'center') }} 768w"
     media="(min-width: 600px)"
     sizes="100vw">
     <img class="image" srcset="
-      {{ images.imageMobile.src | resize(375, 400) }} 375w,
-      {{ images.imageMobile.src | resize(750, 800) }} 750w"
-    src="{{ images.imageMobile.src | resize(375, 400) }}"
+      {{ images.imageMobile.src | resizeDynamic(375, 400) }} 375w,
+      {{ images.imageMobile.src | resizeDynamic(750, 800) }} 750w"
+    src="{{ images.imageMobile.src | resizeDynamic(375, 400) }}"
     sizes="100vw"
     alt="{{ images.imageDesktop.alt|e }}">
   </picture>

diff --git a/Components/ListLogos/Partials/Image/index.twig b/Components/ListLogos/Partials/Image/index.twig
@@ -1,16 +1,16 @@
 <figure class="image">
   {% if not image.svg %}
     <img class="image-tag lazyload lazyload--fade"
-      src="{{ image.src|resize(384, 216) }}"
+      src="{{ image.src|resizeDynamic(384, 216) }}"
       srcset="{{ placeholderImage(384, 216) }}"
       data-srcset="
-        {{ image.src|resize(384, 216) }} 384w,
-        {{ image.src|resize(240, 135) }} 240w,
-        {{ image.src|resize(206, 116) }} 206w,
-        {{ image.src|resize(170, 96) }} 170w,
-        {{ image.src|resize(164, 92) }} 164w,
-        {{ image.src|resize(128, 72) }} 128w,
-        {{ image.src|resize(114, 64) }} 114w"
+        {{ image.src|resizeDynamic(384, 216) }} 384w,
+        {{ image.src|resizeDynamic(240, 135) }} 240w,
+        {{ image.src|resizeDynamic(206, 116) }} 206w,
+        {{ image.src|resizeDynamic(170, 96) }} 170w,
+        {{ image.src|resizeDynamic(164, 92) }} 164w,
+        {{ image.src|resizeDynamic(128, 72) }} 128w,
+        {{ image.src|resizeDynamic(114, 64) }} 114w"
       data-sizes="auto"
       alt="{{ image.alt|e }}">
   {% else %}

diff --git a/Components/SliderImageGallery/index.twig b/Components/SliderImageGallery/index.twig
@@ -11,16 +11,16 @@
         <div class="swiper-slide sliderMain-item">
           <figure class="figure">
             <img class="figure-image lazyload"
-              src="{{ image.src|resize(0, 683) }}"
+              src="{{ image.src|resizeDynamic(0, 683) }}"
               srcset="{{ placeholderImage(image.aspect * 683, 683) }}"
               data-srcset="
-                {{ image.src|resize(0, 1300) }} {{ (image.aspect * 1300)|round }}w,
-                {{ image.src|resize(0, 1024) }} {{ (image.aspect * 1024)|round }}w,
-                {{ image.src|resize(0, 750) }} {{ (image.aspect * 750)|round }}w,
-                {{ image.src|resize(0, 683) }} {{ (image.aspect * 683)|round }}w,
-                {{ image.src|resize(0, 512) }} {{ (image.aspect * 512)|round }}w,
-                {{ image.src|resize(0, 385) }} {{ (image.aspect * 385)|round }}w,
-                {{ image.src|resize(0, 250) }} {{ (image.aspect * 250)|round }}w"
+                {{ image.src|resizeDynamic(0, 1300) }} {{ (image.aspect * 1300)|round }}w,
+                {{ image.src|resizeDynamic(0, 1024) }} {{ (image.aspect * 1024)|round }}w,
+                {{ image.src|resizeDynamic(0, 750) }} {{ (image.aspect * 750)|round }}w,
+                {{ image.src|resizeDynamic(0, 683) }} {{ (image.aspect * 683)|round }}w,
+                {{ image.src|resizeDynamic(0, 512) }} {{ (image.aspect * 512)|round }}w,
+                {{ image.src|resizeDynamic(0, 385) }} {{ (image.aspect * 385)|round }}w,
+                {{ image.src|resizeDynamic(0, 250) }} {{ (image.aspect * 250)|round }}w"
               data-sizes="auto"
               alt="{{ image.alt|e }}">
             {% if image.caption %}
@@ -44,10 +44,10 @@
           <figure class="figure">
             <img class="figure-image lazyload"
               srcset="{{ placeholderImage(image.aspect * 65, 65) }}"
-              src="{{ image.src|resize(0, 65) }}"
+              src="{{ image.src|resizeDynamic(0, 65) }}"
               data-srcset="
-                {{ image.src|resize(0, 65) }} {{ (image.aspect * 65)|round }}w,
-                {{ image.src|resize(0, 130) }} {{ (image.aspect * 130)|round }}w"
+                {{ image.src|resizeDynamic(0, 65) }} {{ (image.aspect * 65)|round }}w,
+                {{ image.src|resizeDynamic(0, 130) }} {{ (image.aspect * 130)|round }}w"
               alt="{{ image.alt|e }}">
           </figure>
         </div>

diff --git a/Components/SliderImages/index.twig b/Components/SliderImages/index.twig
@@ -12,14 +12,14 @@
           <div class="slider-item swiper-slide">
             <figure class="figure">
               <img class="figure-image lazyload"
-                src="{{ image.src|resize(0, 540) }}"
+                src="{{ image.src|resizeDynamic(0, 540) }}"
                 srcset="{{ placeholderImage(image.aspect * 540, 540) }}"
                 data-srcset="
-                  {{ image.src|resize(0, 1080) }} {{ (image.aspect * 1080)|round }}w,
-                  {{ image.src|resize(0, 800) }} {{ (image.aspect * 800)|round }}w,
-                  {{ image.src|resize(0, 540) }} {{ (image.aspect * 540)|round }}w,
-                  {{ image.src|resize(0, 385) }} {{ (image.aspect * 385)|round }}w,
-                  {{ image.src|resize(0, 250) }} {{ (image.aspect * 250)|round }}w"
+                  {{ image.src|resizeDynamic(0, 1080) }} {{ (image.aspect * 1080)|round }}w,
+                  {{ image.src|resizeDynamic(0, 800) }} {{ (image.aspect * 800)|round }}w,
+                  {{ image.src|resizeDynamic(0, 540) }} {{ (image.aspect * 540)|round }}w,
+                  {{ image.src|resizeDynamic(0, 385) }} {{ (image.aspect * 385)|round }}w,
+                  {{ image.src|resizeDynamic(0, 250) }} {{ (image.aspect * 250)|round }}w"
                 data-sizes="auto"
                 alt="{{ image.alt|e }}">
               {% if image.caption %}

diff --git a/Components/SliderImagesCentered/index.twig b/Components/SliderImagesCentered/index.twig
@@ -13,13 +13,13 @@
           <div class="slider-item swiper-slide">
             <figure class="figure">
               <img class="figure-image lazyload"
-                src="{{ image.src|resize(870, 580) }}"
+                src="{{ image.src|resizeDynamic(870, 580) }}"
                 srcset="{{ placeholderImage(870, 580) }}"
                 data-srcset="
-                  {{ image.src|resize(1740, 1160) }} 1160w,
-                  {{ image.src|resize(870, 580) }} 870w,
-                  {{ image.src|resize(580, 385) }} 580w,
-                  {{ image.src|resize(375, 246) }} 375w"
+                  {{ image.src|resizeDynamic(1740, 1160) }} 1160w,
+                  {{ image.src|resizeDynamic(870, 580) }} 870w,
+                  {{ image.src|resizeDynamic(580, 385) }} 580w,
+                  {{ image.src|resizeDynamic(375, 246) }} 375w"
                 data-sizes="auto"
                 alt="{{ image.alt|e }}">
               {% if image.caption %}