From b2b69ac5f9424ad86000880965a3ceb9173f0f7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Do=C4=9Fa=20G=C3=BCrdal?=
 <Qakulukiam@users.noreply.github.com>
Date: Mon, 12 Jun 2017 18:31:30 +0200
Subject: [PATCH] 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
---
 Components/BlockImage/index.twig                     |  6 +++---
 Components/BlockMediaText/Partials/Image/index.twig  |  8 ++++----
 .../BlockMediaText/Partials/OembedVideo/index.twig   |  8 ++++----
 .../BlockVideoOembed/Partials/OembedVideo/index.twig |  6 +++---
 Components/SliderMedia/Partials/Image/index.twig     | 12 ++++++------
 .../SliderMedia/Partials/OembedVideo/index.twig      |  8 ++++----
 6 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/Components/BlockImage/index.twig b/Components/BlockImage/index.twig
index 7af2dc2b..9cd1ae4a 100644
--- 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
index c71b320c..91ebb87a 100644
--- 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
index 4157b97f..d81d452a 100644
--- 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
index ad4f8253..016b3e98 100644
--- 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
index 19311ea6..a42a24b2 100644
--- 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
index 21920221..4c05c8f4 100644
--- 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 }}