Эскизы изображений товаров

При загрузке каждого изображения товара на сервере создаются несколько уменьшенных вариантов (эскизов) этого изображения. Эскизы разного размера удобно использовать в разных разделах витрины: в списках, при просмотре категории, на странице товара.

При загрузке изображений эскизы формируются в соответствии с правилами, заданными в разделе бекенда магазина «Настройки → Изображения». В этом разделе всегда содержится несколько стандартных правил формирования эскизов — они используются для показа эскизов изображений товаров в бекенде магазина. Если этих правил недостаточно для витрины вашего магазина, в дополнение к стандартным правилам можно добавить собственные.

Добавление новых правил приведет к тому, что при загрузке изображений на сервере будут создаваться дополнительные эскизы с указанными размерами.

Вместо задания новых правил вы можете включить формирование эскизов дополнительных размеров «на лету». Для этого включите параметр «Разрешить создание эскизов произвольных размеров по требованию». В этом случае эскиз нужного размера, если он отсутствует на сервере, будет автоматически сформирован только при открытии страницы, на которой он отображается. Сформированный «на лету» эскиз сохранится на сервере и будет использоваться в дальнейшей работе интернет-магазина.

Правила формирования эскизов

В Shop-Script поддерживается несколько типов правил формирования эскизов из исходных (больших) изображений — все они описаны ниже в этой статье.

Вписывание в квадрат по ширине и высоте [200]

Оригинальное изображение уменьшается с сохранением пропорций таким образом, чтобы ни ширина, ни высота полученного эскиза не превышали указанное значение.

Пример настройки эскиза:

Макс. (ширина, высота) = 200px

Код для HTML-шаблона:

{$wa->shop->productImgHtml($product, '200')}    

Ограничение по ширине [200x0]

Оригинальное изображение уменьшается с сохранением пропорций таким образом, чтобы ширина эскиза не превышала указанное значение.

Пример настройки эскиза:

Ширина = 200px, высота = авто

Код для HTML-шаблона:

{$wa->shop->productImgHtml($product, '200x0')}    
Внимание: при указании формата изображения с несколькими размерами следует использовать латинскую букву x.

Ограничение по высоте [0x200]

Оригинальное изображение уменьшается с сохранением пропорций таким образом, чтобы высота эскиза не превышала указанное значение.

Пример настройки эскиза:

Ширина = авто, высота = 200px

Код для HTML-шаблона:

{$wa->shop->productImgHtml($product, '0x200')}    

Квадратная обрезка [96x96]

Из середины оригинального изображения вырезается квадрат максимальной площади и уменьшается до указанного размера. Если оригинальное изображение квадратное, то оно просто уменьшается до указанного размера.

Пример настройки эскиза:

Квадратная обрезка: размер = 96px

Код для HTML-шаблона:

{$wa->shop->productImgHtml($product, '96x96')}    

Прямоугольная обрезка [100x50]

Из середины оригинального изображения вырезается прямоугольник максимальной площади, соотношение сторон которого соответствует соотношению указанных значений. Вырезанный прямоугольник уменьшается с сохранением пропорций до заданных размеров. Если оригинальное изображение обладает теми же пропорциями, что и указанные значения, то оно просто уменьшается до этих размеров.

Пример настройки эскиза:

Прямоугольная обрезка: ширина = 100px, высота = 50px

Код для HTML-шаблона:

{$wa->shop->productImgHtml($product, '100x50')}    

Как получить адрес эскиза

Для того чтобы получить в шаблоне только адрес (URL) эскиза нужного размера вместо готового кода для отображения эскиза, следует аналогичным образом использовать хелпер {$wa->shop->productImgUrl($product, $size)}, как показано в примере:

{$wa->shop->productImgUrl($product, '750x0')}    

32 комментария

  • +1
    Заур Галаев Заур Галаев 7 июля 2015 03:48 #

    Добрый день, выставлена галочка на опцию создание эскизов произвольных размеров по требованию но сами эскизы на сайте не создаются, подскажите в чем проблема?

  • +1
    Максим Григорьев Максим Григорьев 24 ноября 2015 16:13 #

    А каким образом к сгенерированному <img> добавить класс?

  • +1
    Максим Максим 29 января 2016 05:28 #

    А как изображению 'default' => "`$wa_theme_url`img/dummy200.png" добавить класс?

  • +1
    1044699 1044699 29 февраля 2016 03:13 #

    Добрый день! Столкнулись со следующей проблемой, при выгрузке фото на всех фото получается какой-то фон, как будто накладывается маска, и белый становится в сероватый, на белом фоне фотка выделяется. Это как-то можно поправить ? Сказали что это так отрабатывает PHP.

    Пример фото , сразу незаметно, но если присмотреться то видно что фон сероватого оттенка, особенно видно если в фотошопе применить уровни к фото.

  • +1
    Дмитрий Дмитрий 4 апреля 2016 11:16 #

    Подскажите, пожалуйста, за что отвечает параметр со значением 970 в ссылке фотографии товара?

    <a href="{$wa->shop->productImgUrl($product, '970')}">
    {$wa->shop->productImgHtml($product, '750', [ 'itemprop' => 'image', 'id' => 'product-image', 'alt' => $product.name|escape ])}

    </a>

  • +1
    Сергей Сергей 25 августа 2016 14:59 #

    А где или как включить, чтобы на странице товара отображались квадратные эскизы и миниатюры

    http://motux.ru/product/%D0%B0%D0%B2%D1%82%D0%BE%D...

    • +1
      Михаил Ушенин Михаил Ушенин Webasyst 29 августа 2016 13:01 #

      Отображение миниатюр фотографий зависит от настроек и функциональности темы дизайна. За консультацией обратитесь к разработчику вашей темы.

      • +2
        Сергей Сергей 1 сентября 2016 15:53 #

        Жаль. Это стандартный функционал мог быть для всех тем. И работать с разработчиками тем сложнова то как-то. Не могу понять, как изменить эти параметры


        Макс. ( Ширина, Высота ) = 970 px
        Ширина = 750 px, Высота = авто
        Ширина = 200 px, Высота = авто
        Квадратная обрезка: 96x96 px
        Квадратная обрезка: 48x48 px


        Лучше бы сделали правильную обрезку миниатюр и эскизов, ну хотя бы как вКонтакте... прямоугольные они некрасиво смотрятся.


      • +1
        Nexton Nexton 28 декабря 2017 15:20 #

        Есть ли возможность изменить путь нахождения эскизов
        Может есть готовый плагин?
        Либо в какую сторону смотреть?

        Как пример нужно из базового пути: /wa-data/public/shop/products/73/39/3973/images/5/5.750.jpg
        Сделать наподобие: /assets/название товара или артикул/эскизы

        • +1
          Михаил Ушенин Михаил Ушенин Webasyst 28 декабря 2017 15:34 #

          Напишите, зачем вам это нужно. Возможно, задачу можно переформулировать или решать с другой стороны.

          • +1
            Nexton Nexton 28 декабря 2017 18:47 #

            Мы переносим готовый магазин клиента и там картинки уже проиндексированы и используются на других сайтах, поэтому ищем пути возможно ли как то все сохранить

            Там система папок такая
            /assets/Название товара.jpg
            /assets/Папка с Название эскиза 1/Название товара.jpg
            /assets/Папка с Название эскиза 2/Название товара.jpg

            То есть нужно 2 вещи:
            1 Для каждого эскиза формировать свою папку, в папке эскизов размещаются фото товаров (мы сделаем настройку без переименовывания файла)
            2 Убрать промежуточные папки с id (73/39/3973)

            Тогда если даже папки не совпадут нам достаточно будет сделать простой редирект

            • +1
              Михаил Ушенин Михаил Ушенин Webasyst 28 декабря 2017 21:34 #

              Подозреваю, что вам не стоит изменять структуру хранения эскизов изображений товаров в Shop-Script. Вполне вероятно, что вам и вашему клиенту это изменение может потом стоить лишних нервов и работы.

              Я бы просто настроил редиректы со старых адресов на новые.

              Другой, более экономный способ решения проблемы: просто оставьте файлы изображений там, где они уже есть — в директории /assets/. В Webasyst не используется корневая поддиректоория с таким именем. Внешние ссылки продолжат работать, как и раньше. А для товаров загрузите эти же изображения ещё раз — уже в стандартные директории Shop-Script. Конечно, получится дублирование файлов на сервере и занятое дисковое пространство, но зато вы сэкономите на разработке довольно сложного решения с не совсем ясной перспективой его работоспособности в будущем и на нагрузке на сервер, которую будут вызывать редиректы.

            • +1
              Михаил Ушенин Михаил Ушенин Webasyst 28 декабря 2017 21:36 #

              Если вы хотите получить больше комментариев по вашему вопросу, задайте его в общем хабе поддержки — там вам смогут ответить и другие пользователи. Комментарии к статьям, как здесь, например, чаще всего оставляют только сотрудники Webasyst.

              • +1
                Nexton Nexton 28 декабря 2017 22:48 #

                Спасибо попробую там спросить, если не найдем решение то думаю воспользуемся на время вашим решением и сохраним старую папку

              • +1
                jack jack 10 апреля 2018 20:46 #

                1. Как вывести все имеющиеся эскизы товара для list-thumbs.html?

                {$wa->shop->productImgHtml($product, '200')}
                2. Как вывести первые 2 эскиза товара для list-thumbs.html
                • +1
                  jack jack 11 апреля 2018 01:32 #

                  Такое не работает

                  {if count($product.images) < 1}
                      {$wa->shop->imgHtml($image, '200x200', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png"])}
                  {else}
                      {$product = $wa->shop->product($p.id)}
                      {foreach $product.images as $image}
                      {$wa->shop->imgHtml($image, '200x200', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png"])}
                      {/foreach}
                  {/if}

                  Хочу, если у товара 1 или 0 картинок то должна быть 1 картинка или dummy200.png. Если картинок больше чем 1 то вывести две картинки.

                  как это сделать?

                  • +1
                    Михаил Ушенин Михаил Ушенин Webasyst 11 апреля 2018 10:07 #

                    Попробуйте так:

                    {$product = $wa->shop->product($p.id)}
                    {foreach $product.images as $image}
                        {if $image@iteration < 3}
                            {$wa->shop->imgHtml($image, '200x200', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png"])}
                        {/if}
                    {foreachelse}
                        {$wa->shop->imgHtml(null, '200x200', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png"])}
                    {/foreach}
                  • +1
                    Магазин СлаваМех Магазин СлаваМех 25 октября 2018 12:21 #

                    Как сделать, чтобы генерировались изображения товаров с высотой более 1000 пикселей.

                    В эскизах добавили нужны размер

                    В коде файла темы указали 1800, там где было 970.

                    Но изображение генерируется только 1000 пикселей в высоту

                    • +1
                      Михаил Ушенин Михаил Ушенин Webasyst 25 октября 2018 12:29 #

                      Создайте файл wa-config/apps/shop/config.php с таким содержимым:

                      <?php
                      
                      return array(
                          'image_max_size' => 2000, //строка с новым ограничением
                      );

                      Если такой файл уже есть, добавьте в него только строку с новым ограничением.

                      Очистите кеш Вебасиста.

                      • +1
                        Магазин СлаваМех Магазин СлаваМех 25 октября 2018 12:35 #

                        А из какого приложения/раздела нужно создать этот файл?

                        Как очистить кеш вебасиста, кроме как ctrl+f5 при открытии страницы?

                      • +1
                        Алексей Алексей 5 декабря 2018 17:16 #

                        Как сделать чтобы баннеры в слайдере отображались во весь размер? Сейчас баннер обрезан.

                      • +1
                        Юрий Руднев Юрий Руднев 21 февраля 2019 01:28 #

                        При пересоздании эскизов откуда берется эскиз-оригинал?

                      • +1
                        hicode hicode 13 марта 2019 12:10 #

                        Здравствуйте. как сделать что бы не делались эскизы  фотографий а только оригинальные были картинки, а то у меня не хватает места  на хостинга , а товаров больше 30к?

                        • +1
                          Михаил Ушенин Михаил Ушенин Webasyst 13 марта 2019 17:44 #

                          Запретить формирование эскизов стандартных размеров нельзя — они используются в бекенде магазина. Можно только попробовать отказаться от использования дополнительных размеров, которые используются в вашей теме дизайна.

                          Какие у вас есть варианты выхода:

                          • удалить часть изображений, если у некоторых товаров их по много штук;
                          • удалить товары с изображениями, которые не продаются и не будут продаваться (скрытые, тестовые, временные товары);
                          • переключить витрину на тему дизайна, которая не использует дополнительные размеры эскизов, удалить дополнительные размеры эскизов в настройках магазина, отключить формирование эскизов по требованию и выполнить перегенерацию эскизов изображений в настройках интернет-магазина — при перегенерации удаляются все эскизы и формируются заново только для тех размеров, которые указаны в настройках магазина;
                          • сменить тариф хостинга, чтобы увеличить доступное дисковое пространство для файлов изображений.



                        • +1
                          fun_shop@mail.ru fun_shop@mail.ru 5 июня 2019 08:59 #

                          Добрый день! Обрезала плагином для фотографий белый фон, и в бекенде "поехали" размеры изображений, стали разными, есть просто огромные. Во фротенде смотрится нормально из-за настроек шаблона темы. А в бекенде просто беда. Как вернуть изображениям с обрезанным белым фоном стандартные размеры эскизов для бекенда? Без удаления товаров и новой их загрузки?

                          Добавить комментарий

                          Чтобы добавить комментарий, зарегистрируйтесь или войдите