Twig admin show product fixes

docs/cookbook/images/images.rst

@@ -15,7 +15,10 @@ There are three places in the Sylius platform where the configuration for images
 * `CoreBundle <https://github.com/Sylius/Sylius/blob/master/src/Sylius/Bundle/CoreBundle/Resources/config/app/config.yml>`_
 
 These configs provide you with a set of filters for resizing images to **thumbnails**.
-
++-----------------------------------------+------------------+
+| ``sylius_admin_product_large_thumbnail``| size: [550, 412] |
++-----------------------------------------+------------------+
+| ``sylius_admin_product_small_thumbnail``| size: [150, 112] |
 +-----------------------------------------+------------------+
 | ``sylius_admin_product_tiny_thumbnail`` | size: [64, 64]   |
 +-----------------------------------------+------------------+

src/Sylius/Bundle/AdminBundle/Resources/config/app/config.yml

@@ -44,7 +44,8 @@ sylius_grid:
 
 liip_imagine:
     filter_sets:
-        sylius_admin_admin_user_avatar_thumbnail:
+        sylius_admin_product_original: ~
+        sylius_admin_user_avatar_thumbnail:
             filters:
                 thumbnail: { size: [50, 50], mode: outbound }
         sylius_admin_product_tiny_thumbnail:
@@ -53,6 +54,12 @@ liip_imagine:
         sylius_admin_product_thumbnail:
             filters:
                 thumbnail: { size: [50, 50], mode: outbound }
+        sylius_admin_product_small_thumbnail:
+            filters:
+                thumbnail: { size: [150, 112], mode: outbound }
+        sylius_admin_product_large_thumbnail:
+            filters:
+                thumbnail: { size: [550, 412], mode: outbound }
 
 sonata_block:
     default_contexts: ~

src/Sylius/Bundle/AdminBundle/Resources/views/Product/Show/_imageVariants.html.twig

@@ -0,0 +1,11 @@
+<div class="sylius-image-variants">
+{% if product.getVariantSelectionMethod() == 'match' %}
+    {% for variant in image.productVariants %}
+    <div data-variant-options="{% for option in variant.optionValues %}{{ option.code }} {% endfor %}"></div>
+    {% endfor %}
+{% else %}
+    {% for variant in image.productVariants %}
+    <div data-variant-code="{{ variant.code }}"></div>
+    {% endfor %}
+{% endif %}
+</div>

src/Sylius/Bundle/AdminBundle/Resources/views/Product/Show/_mainImage.html.twig

@@ -0,0 +1,9 @@
+{% if product.imagesByType('thumbnail') is not empty %}
+    {% set path = product.imagesByType('thumbnail').first.path|imagine_filter(filter|default('sylius_admin_product_thumbnail')) %}
+{% elseif product.images.first %}
+    {% set path = product.images.first.path|imagine_filter(filter|default('sylius_admin_product_thumbnail')) %}
+{% else %}
+    {% set path = '//placehold.it/200x200' %}
+{% endif %}
+
+<img src="{{ path }}" alt="{{ product.name }}" class="ui bordered image" />

src/Sylius/Bundle/AdminBundle/Resources/views/Product/Show/_media.html.twig

@@ -7,13 +7,13 @@
         {% if product.images|length >= 1 %}
             <div class="ui small images">
                 {% for image in product.images %}
-                    {% set path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_small_thumbnail') : '//placehold.it/200x200' %}
+                    {% set path = image.path is not null ? image.path|imagine_filter('sylius_admin_product_small_thumbnail') : '//placehold.it/200x200' %}
                     <div class="ui image">
                         {% if product.isConfigurable() and product.variants|length > 0 %}
-                            {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
+                            {% include '@SyliusAdmin/Product/Show/_imageVariants.html.twig' %}
                         {% endif %}
-                        <a href="{{ image.path|imagine_filter('sylius_shop_product_original') }}" data-lightbox="sylius-product-image">
-                            <img src="{{ path }}" data-large-thumbnail="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" alt="{{ product.name }}" />
+                        <a href="{{ image.path|imagine_filter('sylius_admin_product_original') }}" data-lightbox="sylius-product-image">
+                            <img src="{{ path }}" data-large-thumbnail="{{ image.path|imagine_filter('sylius_admin_product_large_thumbnail') }}" alt="{{ product.name }}" />
                         </a>
                     </div>
                 {% endfor %}

src/Sylius/Bundle/AdminBundle/Resources/views/Product/Show/_variants.html.twig

@@ -28,9 +28,9 @@
                                 <div class="item">
                                     <div class="ui tiny image">
                                         {% if variant.hasImages %}
-                                            {% include '@SyliusShop/Product/_mainImage.html.twig' with {'product': variant, 'filter': 'sylius_shop_product_large_thumbnail'} %}
+                                            {% include '@SyliusAdmin/Product/_mainImage.html.twig' with {'product': variant, 'filter': 'sylius_admin_product_large_thumbnail'} %}
                                         {% else %}
-                                            {% include '@SyliusShop/Product/_mainImage.html.twig' with {'product': product, 'filter': 'sylius_shop_product_large_thumbnail'} %}
+                                            {% include '@SyliusAdmin/Product/_mainImage.html.twig' with {'product': product, 'filter': 'sylius_admin_product_large_thumbnail'} %}
                                         {% endif %}
                                     </div>
                                     <div class="middle aligned content">