Unify product thumbnails

src/Sylius/Bundle/AdminBundle/Resources/assets/styles/_thumbnails.scss

@@ -0,0 +1,29 @@
+/*!
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+.thumbnail-box {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    min-width: 20rem;
+}
+
+.thumbnail-box-image {
+    flex-shrink: 0;
+    width: 4rem;
+
+    img {
+        width: 100%;
+        border-radius: var(--tblr-border-radius);
+    }
+}
+
+.thumbnail-box-content {
+    width: 100%;
+}

src/Sylius/Bundle/AdminBundle/Resources/assets/styles/main.scss

@@ -28,5 +28,6 @@
 @import "navbar";
 @import "rating";
 @import "sidebar";
+@import "thumbnails";
 @import "tom-select";
 @import "utils";

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

@@ -61,24 +61,15 @@ sylius_ui:
 liip_imagine:
     filter_sets:
         sylius_admin_product_original: ~
-        sylius_admin_admin_user_avatar:
+        sylius_admin_avatar:
             filters:
-                thumbnail: { size: [ 80, 80 ], mode: outbound }
-        sylius_admin_admin_user_avatar_thumbnail:
-            filters:
-                thumbnail: { size: [50, 50], mode: outbound }
-        sylius_admin_product_tiny_thumbnail:
-            filters:
-                thumbnail: { size: [64, 64], mode: outbound }
+                thumbnail: { size: [ 200, 200 ], mode: outbound }
         sylius_admin_product_thumbnail:
             filters:
-                thumbnail: { size: [50, 50], mode: outbound }
-        sylius_admin_product_small_thumbnail:
-            filters:
-                thumbnail: { size: [150, 112], mode: outbound }
+                thumbnail: { size: [200, 200], mode: outbound }
         sylius_admin_product_large_thumbnail:
             filters:
-                thumbnail: { size: [550, 412], mode: outbound }
+                thumbnail: { size: [600, 800], mode: outbound }
 
 sonata_block:
     default_contexts: ~

src/Sylius/Bundle/AdminBundle/templates/admin_user/form/sections/personal_information/avatar.html.twig

@@ -9,7 +9,7 @@
         {% if admin_user.avatar is not null and admin_user.avatar.path is not empty %}
             <div
                 class="avatar avatar-xl"
-                style="background: url('{{ admin_user.avatar.path|imagine_filter('sylius_admin_admin_user_avatar') }}');"
+                style="background-image: url('{{ admin_user.avatar.path|imagine_filter('sylius_admin_avatar') }}');"
                 {{ sylius_test_html_attribute('avatar-image', admin_user.avatar.path) }}
             ></div>
         {% else %}

src/Sylius/Bundle/AdminBundle/templates/order/show/content/sections/items/body/item.html.twig

@@ -4,12 +4,12 @@
 {% set variant = hookable_metadata.context.variant %}
 
 <td>
-    <div class="d-flex gap-3 align-items-center">
-        <div>
+    <div class="thumbnail-box">
+        <div class="thumbnail-box-image">
             {{ image(product) }}
         </div>
-        <div>
-            <div>
+        <div class="thumbnail-box-content">
+            <div class="mb-1">
                 <a href="{{ path('sylius_admin_product_show', { id: product.id }) }}">
                     <strong>{{ product.name }}</strong>
                 </a>

src/Sylius/Bundle/AdminBundle/templates/product/grid/field/product_image.html.twig

@@ -1,5 +1,5 @@
 {% from '@SyliusAdmin/shared/helper/product_image.html.twig' import image %}
 
-<div class="py-1">
+<div class="thumbnail-box-image">
     {{ image(data) }}
 </div>

src/Sylius/Bundle/AdminBundle/templates/product/show/content/page_body/general/shared/tab/product.html.twig

@@ -4,12 +4,14 @@
 {% set product = hookable_metadata.context.product %}
 
 <td>
-    <div class="d-flex gap-3 align-items-center">
-        <div>
+    <div class="thumbnail-box">
+        <div class="thumbnail-box-image">
             {{ image(product) }}
         </div>
-        <div>
-            <div><strong {{ sylius_test_html_attribute('product-variant-name') }}>{{ variant.name }}</strong></div>
+        <div class="thumbnail-box-content">
+            <div class="mb-1">
+                <strong {{ sylius_test_html_attribute('product-variant-name') }}>{{ variant.name }}</strong>
+            </div>
             {% if product.isSimple() %}
                 <div class="text-muted small" {{ sylius_test_html_attribute('product-code') }}>{{ product.code }}</div>
             {% else %}

src/Sylius/Bundle/AdminBundle/templates/product/show/content/page_body/media.html.twig

@@ -13,7 +13,7 @@
                     {% if product.images|length >= 1 %}
                         <div class="spotlight-group" {{ sylius_test_html_attribute('media') }}>
                             {% for image in product.images %}
-                                {% set path = image.path is not null ? image.path|imagine_filter('sylius_admin_product_small_thumbnail') : asset('build/admin/images/200x200.png', 'admin') %}
+                                {% set path = image.path is not null ? image.path|imagine_filter('sylius_admin_product_thumbnail') : asset('build/admin/images/200x200.png', 'admin') %}
                                     {% if product.isConfigurable() and product.variants|length > 0 %}
                                         {% if product.getVariantSelectionMethod() == 'match' %}
                                             {% for variant in image.productVariants %}

src/Sylius/Bundle/AdminBundle/templates/product_review/form/sections/info/product/body.html.twig

@@ -3,11 +3,11 @@
 {% set product = hookable_metadata.context.resource.reviewSubject %}
 
 <div class="card-body">
-    <div class="row align-items-center">
-        <div class="col-auto">
+    <div class="thumbnail-box">
+        <div class="thumbnail-box-image">
             {{ image(product) }}
         </div>
-        <div class="col">
+        <div class="thumbnail-box-content">
             <div class="mb-0" {{ sylius_test_html_attribute('product-name') }}>
                 <a href="{{ path('sylius_admin_product_show', {'id': product.id}) }}">{{ product.name }}</a>
             </div>

src/Sylius/Bundle/AdminBundle/templates/shared/components/navbar/user.html.twig

@@ -7,7 +7,7 @@
             {% if user.avatar.path is not defined or user.avatar.path is empty %}
                 {{ avatar.small() }}
             {% else %}
-                {{ avatar.small(user.avatar.path|imagine_filter('sylius_admin_admin_user_avatar_thumbnail')) }}
+                {{ avatar.small(user.avatar.path|imagine_filter('sylius_admin_avatar')) }}
             {% endif %}
         </div>
         <div class="d-none d-xl-block ps-2">

src/Sylius/Bundle/AdminBundle/templates/shared/helper/product_image.html.twig

@@ -1,6 +1,6 @@
 {% macro image(product, config = {}) %}
     {% set config = {
-        class: 'avatar',
+        class: 'img-fluid',
         type: 'thumbnail',
         filter: 'sylius_admin_product_thumbnail'
     }|merge(config) %}

src/Sylius/Bundle/AdminBundle/templates/shipment/show/content/page_body/items/body/product.html.twig

@@ -3,14 +3,14 @@
 {% set product = hookable_metadata.context.item.variant.product %}
 
 <td>
-    <div class="d-flex gap-3 align-items-center">
-        <div>{{ image(product) }}</div>
-        <div>
-            <div>
-                <a href="{{ path('sylius_admin_product_show', { id: product.id }) }}">
-                    <strong>{{ product.name }}</strong>
-                </a>
-            </div>
+    <div class="thumbnail-box">
+        <div class="thumbnail-box-image">
+            {{ image(product) }}
+        </div>
+        <div class="thumbnail-box-content">
+            <a href="{{ path('sylius_admin_product_show', { id: product.id }) }}">
+                <strong>{{ product.name }}</strong>
+            </a>
         </div>
     </div>
 </td>