default image sizes are implemented for individual devices width (#836)

shopsys · Mar 4, 2019 · 01cba77 · 01cba77
1 parent 1078c98
commit 01cba77
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git 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
@@ -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 }}