fix(Components): use correct image sizes and ratios (#221)

* fix(Components/SliderMedia): adjust img aspect ratio to be 16:9 by default closes #198 * fix(Components/BlockMediaText): correct image sizes attribute * fix(Components/BlockImage): set correct image size * fix(Components/BlockVideoOembed): set correct image size * fix(Components/SliderMedia): add missing values to sizes attribute
flyntwp · Jun 12, 2017 · b2b69ac · b2b69ac
1 parent 2370364
commit b2b69ac
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 24 deletions.
diff --git a/Components/BlockImage/index.twig b/Components/BlockImage/index.twig
@@ -3,10 +3,10 @@
     <img class="blockImage-imageElement" srcset="
       {{ image.src | resize(576) }} 576w,
       {{ image.src | resize(768) }} 768w,
-      {{ image.src | resize(1200) }} 1200w,
+      {{ image.src | resize(1110) }} 1110w,
       {{ image.src | resize(1440) }} 1440w"
-      src="{{ image.src | resize(1200) }}"
-      sizes="(min-width: 1140px) 1140px, 100vw"
+      src="{{ image.src | resize(1110) }}"
+      sizes="(min-width: 1140px) 1110px, calc(100vw - 30px)"
       alt="{{ image.alt }}">
   </div>
 </div>
diff --git a/Components/BlockMediaText/Partials/Image/index.twig b/Components/BlockMediaText/Partials/Image/index.twig
@@ -1,6 +1,6 @@
 <img class="image-imageElement" srcset="
-  {{ image.src | resize(542) }} 542w,
-  {{ image.src | resize(720) }} 720w"
-  src="{{ image.src | resize(720) }}"
-  sizes="(min-width: 1140px) 1140px, 100vw"
+  {{ image.src | resize(550) }} 550w,
+  {{ image.src | resize(736) }} 736w"
+  src="{{ image.src | resize(736) }}"
+  sizes="(min-width: 1140px) 550px, (min-width: 767px) calc((100vw - 30px) * .4925), calc(100vw - 30px)"
   alt="{{ image.alt }}">
diff --git a/Components/BlockMediaText/Partials/OembedVideo/index.twig b/Components/BlockMediaText/Partials/OembedVideo/index.twig
@@ -1,10 +1,10 @@
 <div class="oembedVideo">
   <div class="oembedVideo-posterImage">
     <img class="oembedVideo-imageElement" srcset="
-      {{ posterImage.src | resize(542, 305) }} 542w,
-      {{ posterImage.src | resize(720, 405) }} 720w"
-      src="{{ posterImage.src | resize(720, 405) }}"
-      sizes="(min-width: 1140px) 1140px, 100vw"
+      {{ posterImage.src | resize(550, 309) }} 550w,
+      {{ posterImage.src | resize(736, 414) }} 736w"
+      src="{{ posterImage.src | resize(736, 414) }}"
+      sizes="(min-width: 1140px) 550px, (min-width: 767px) calc((100vw - 30px) * .4925), calc(100vw - 30px)"
       alt="{{ posterImage.alt }}">
   </div>
   <div class="oembedVideo-video">

diff --git a/Components/BlockVideoOembed/Partials/OembedVideo/index.twig b/Components/BlockVideoOembed/Partials/OembedVideo/index.twig
@@ -3,9 +3,9 @@
     <img class="oembedVideo-imageElement" srcset="
       {{ posterImage.src | resize(576, 324) }} 576w,
       {{ posterImage.src | resize(768, 432) }} 768w,
-      {{ posterImage.src | resize(1200, 675) }} 1200w"
-      src="{{ posterImage.src | resize(1200, 675) }}"
-      sizes="(min-width: 1140px) 1140px, 100vw"
+      {{ posterImage.src | resize(1110, 624) }} 1110w"
+      src="{{ posterImage.src | resize(1110, 624) }}"
+      sizes="(min-width: 1140px) 1110px, calc(100vw - 30px)"
       alt="{{ posterImage.alt }}">
   </div>
   <div class="oembedVideo-video">

diff --git a/Components/SliderMedia/Partials/Image/index.twig b/Components/SliderMedia/Partials/Image/index.twig
@@ -1,7 +1,7 @@
 <img class="image" srcset="
-  {{ mediaSlide.image.src | resize(400, 200) }} 400w,
-  {{ mediaSlide.image.src | resize(800, 400) }} 800w,
-  {{ mediaSlide.image.src | resize(1200, 600) }} 1200w,
-  {{ mediaSlide.image.src | resize(1600, 800) }} 1600w"
-  src="{{ mediaSlide.image.src | resize(1200, 600) }}"
-  sizes="100vw">
+  {{ mediaSlide.image.src | resize(400, 225) }} 400w,
+  {{ mediaSlide.image.src | resize(800, 450) }} 800w,
+  {{ mediaSlide.image.src | resize(1110, 624) }} 1110w,
+  {{ mediaSlide.image.src | resize(1600, 900) }} 1600w"
+  src="{{ mediaSlide.image.src | resize(1110, 624) }}"
+  sizes="(min-width: 1140px) 1110px, calc(100vw - 30px)">
diff --git a/Components/SliderMedia/Partials/OembedVideo/index.twig b/Components/SliderMedia/Partials/OembedVideo/index.twig
@@ -3,11 +3,11 @@
     <img class="oembedVideo-posterImageElement" srcset="
       {{ posterImage.src | resize(400, 225) }} 400w,
       {{ posterImage.src | resize(800, 450) }} 800w,
-      {{ posterImage.src | resize(1200, 675) }} 1200w,
+      {{ posterImage.src | resize(1110, 624) }} 1110w,
       {{ posterImage.src | resize(1600, 900) }} 1600w"
-      src="{{ posterImage.src | resize(1200, 675) }}"
-      sizes="100vw"
-      alt="{{ posterImage.alt }}" />
+      src="{{ posterImage.src | resize(1110, 624) }}"
+      sizes="(min-width: 1140px) 1110px, calc(100vw - 30px)"
+      alt="{{ posterImage.alt }}">
   </div>
   <div class="oembedVideo-video">
     {{ oembedLazyLoad }}