From 01cba771cd845c2de56176755b529f73785411ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Boris=20Brt=C3=A1=C5=88?= <boris.brtan@shopsys.com>
Date: Mon, 4 Mar 2019 19:17:18 +0100
Subject: [PATCH] default image sizes are implemented for individual devices
 width (#836)

---
 .../ShopBundle/Resources/config/images.yml    | 30 +++++++++++++++----
 .../views/Front/Content/Advert/box.html.twig  |  4 +--
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/Shopsys/ShopBundle/Resources/config/images.yml b/src/Shopsys/ShopBundle/Resources/config/images.yml
index 2e38dd2bf..f5064dbc1 100644
--- a/src/Shopsys/ShopBundle/Resources/config/images.yml
+++ b/src/Shopsys/ShopBundle/Resources/config/images.yml
@@ -46,18 +46,20 @@
     multiple: true
     sizes:
         -   name: ~
-            width: 550
+            width: 410
             height: ~
             crop: false
             occurrence: 'Front-end: Main image in product detail'
+            additionalSizes:
+                - {width: 710, height: ~, media: "(min-width: 480px) and (max-width: 768px)"}
         -   name: galleryThumbnail
             width: ~
             height: 35
             crop: false
             occurrence: 'Front-end: Thumbnail of images under the main image in product detail'
         -   name: list
-            width: 300
-            height: 200
+            width: 150
+            height: ~
             crop: false
             occurrence: 'Front-end: Listing of products in section, listing of products on special offer'
         -   name: thumbnail
@@ -70,10 +72,12 @@
     class: Shopsys\FrameworkBundle\Model\Slider\SliderItem
     sizes:
         -   name: ~
-            width: 918
+            width: 900
             height: 230
             crop: true
             occurrence: 'Front-end: Main page slider'
+            additionalSizes:
+                - {width: 730, height: 230, media: "(max-width: 1023px)"}
 
 -   name: transport
     class: Shopsys\FrameworkBundle\Model\Transport\Transport
@@ -92,21 +96,35 @@
             height: ~
             crop: false
             occurrence: 'Front-end: Advertising under heading'
+            additionalSizes:
+                - {width: 440, height: ~, media: "(max-width: 479px)"}
+                - {width: 730, height: ~, media: "(max-width: 768px)"}
+                - {width: 990, height: ~, media: "(max-width: 1023px)"}
         -   name: footer
             width: 1160
             height: ~
             crop: false
             occurrence: 'Front-end: Advertising above footer'
+            additionalSizes:
+                - {width: 440, height: ~, media: "(max-width: 479px)"}
+                - {width: 730, height: ~, media: "(max-width: 768px)"}
+                - {width: 990, height: ~, media: "(max-width: 1023px)"}
         -   name: productList
-            width: 920
+            width: 900
             height: ~
             crop: false
             occurrence: 'Front-end: Advertising in category (above the category name)'
+            additionalSizes:
+                - {width: 440, height: ~, media: "(max-width: 479px)"}
+                - {width: 730, height: ~, media: "(max-width: 1023px)"}
         -   name: leftSidebar
-            width: 220
+            width: 240
             height: ~
             crop: false
             occurrence: 'Front-end: Advertising in the left panel under the category tree'
+            additionalSizes:
+                - {width: 440, height: ~, media: "(max-width: 479px)"}
+                - {width: 730, height: ~, media: "(max-width: 768px)"}
         -   name: homepagePrimary
             width: 628
             height: 342
diff --git a/src/Shopsys/ShopBundle/Resources/views/Front/Content/Advert/box.html.twig b/src/Shopsys/ShopBundle/Resources/views/Front/Content/Advert/box.html.twig
index fdf4e4701..abad99118 100644
--- a/src/Shopsys/ShopBundle/Resources/views/Front/Content/Advert/box.html.twig
+++ b/src/Shopsys/ShopBundle/Resources/views/Front/Content/Advert/box.html.twig
@@ -2,9 +2,9 @@
     <div class="in-place in-place--{{advert.positionName}}">
         {% if advert.type == 'image' %}
             {% if advert.link == null %}
-                {{ image(advert, { size: 'original' }) }}
+                {{ image(advert, { size: advert.positionName }) }}
             {% else %}
-                <a href="{{ advert.link }}">{{ image(advert, { size: 'original' }) }}</a>
+                <a href="{{ advert.link }}">{{ image(advert, { size: advert.positionName }) }}</a>
             {% endif %}
         {% elseif advert.type == 'code' %}
             {{ advert.code | raw }}