Как обрезать эскизы товаров по ширине и вписать по высоте?

Подскажите - как обрезать эскизы товаров на странице категории по ширине до квадрата и вписать по высоте. Я знаю, что есть плагин "правильные изображения", но он обрезает все картинки, в том числе и большую картинку товара, скажем у меня картинка 1200 х 930 - он обрезает и эскизы 180 х 180 и большую картинку делает 930 х 930, а мне нужно ее сохранить 1200 х 930. 

Если не использовать, то тогда эскиз вписывается по ширине и получается - 180 х 140.

Знаю, что средствами css это можно сделать, но не силен. Как обрезать по ширине и вписать по высоте в 180х180?

Надо вот так:



8 ответов

  • 1
    Elena 25 февраля 2020 19:38 #

    А сейчас вот так:

  • 1
    replicant 25 февраля 2020 20:10 #

    Генерировать квадратную обрезь 180х180 и выводить её в каталогах товаров. При условии, когда исходник будет квадратный, то у таких ничего не пострадает. Если же исходник прямоугольный, то прикидывайте сами сколько там и чего срежет. Поля под такой обрез всегда можно заложить на стадии подготовки фото перед загрузкой.

    Для этого ни плагины ни цэ-эс-эс не будут нужны.

    Если вернете Панду на место на сайте, то будет удобнее посмотреть как и что подправить в css в реальном времени, но это, кмк, так себе решение, если честно, т.к. костыль. Лучше обрезь квадрат и дело в шляпе. Надежно как рельс с железной дороги.

    И каталог стандартно будет выглядеть и голова не болит. Внутри карточки уже как угодно можно выводить.

  • 1
    Elena 25 февраля 2020 20:13 #

    "Внутри карточки уже как угодно можно выводить" - вот в этом и вопрос был - как эскиз обрезать, а в карточке оставить?!

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

    • +1
      replicant replicant 25 февраля 2020 21:59 #

      Магазин - Настройки - Изображения. Вы же как-то генерируете квадратные штуки 96х96 и 48х48 или нет? Вот так и с этими надо. Если весь каталог - это сплошные квадратные эскизы, то имеет смысл сразу всё квадратить для каталога товаров.

      Решение на CSS такой задачи - костыль. Решить можно, но костыльность не пропадет. Работать будет, но костылем так и останется.

      Почему костыль? Потому что в движке магазина есть встроенный метод генерации квадратной обрези налету, потому всё остальное и есть костыль.

  • 1
    Elena 26 февраля 2020 00:39 #

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

    Я не специалист - что надо сделать конкретно?

    Вот в моем list-thumbs.html :

    <div class="image"> {if !empty($p.autobadge)}{$p.autobadge}{/if} <a href="{$p.frontend_url}" title="{$p.name}{if $p.summary} &ndash; {strip_tags($p.summary)|escape}{/if}">{$wa->shop->productImgHtml($p, '180', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/no-foto-catalog.gif"])}</a> {$badge_html = $wa->shop->badgeHtml($p.badge)}{if $badge_html}{$badge_html}{/if} </div>

    • +1
      replicant replicant 26 февраля 2020 08:35 #

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

      В list-thumbs.html заменить 180 на 180x180 (х - латиницей). Т.к. у вас включена генерация на лету произвольных размеров эскизов, то в Настройках вы этого размера 180px и не увидите, а квадратная обрезь вообще сама появится после правки шаблона и задача упрощается в разы.

      Верните прямоугольную Панду и проверьте.

      Поскольку у вас включено сохранение оригинальных имен файлов и webp, то проверяйте обстоятельно и внимательно.

      Для примера можете пройти по ссылке

      https://belyibars.ru/wa-data/public/shop/products/68/31/3168/images/8253/tcvetok-garnitur.80x280.jpg

      и поглядеть как меняется картинка, когда вы ей задаете в строке браузера новые размеры 180х180 или 80х80 или какие-нибудь 100х300. Понаблюдайте. Это полезно для понимания ситуации с генерацией эскизов встроенными средствами движка.

      Поскольку у вас были квадратные исходники, то разницы между 180 и 180х180 вы не видели, а это два разных изображения с точки зрения шаблона и вообще два разных файла. Её (разницы) и не будет, если по приведенной выше ссылке именить размер картинки на просто 180.jpg. Но вам нужно именно второе значение размера после Х, если хотите получать квадратные эскизы для каталога из прямоугольных оригиналов.

  • 1
    Elena 26 февраля 2020 00:45 #

    Вот в настройках темы дизайна:

    • +1
      replicant replicant 26 февраля 2020 08:35 #

      Это уже лишний скриншот. Тут ничего не нужно.

  • 1
    replicant 26 февраля 2020 12:06 #

    Если создать в предустановках изображений вот такую настройку

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

    Это сделано стандартными средствами движка.



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



    Что с этим делать решать вам. Создание всех эскизов и перегенерацию всего объема фото, а затем и пересоздание webp при смене концепции рекомендую. Есть пара лайфхаков для гиков, как заставить webp плагин перегенерировать весь объем эскизов магазина по запросу, удалив предварительно старые. От мусора избавитесь точно.
    • +1
      Elena Elena 26 февраля 2020 12:11 #

      Я пробовал, в том-то и дело, что не получается такая обрезка... 

      • +1
        replicant replicant 26 февраля 2020 12:16 #

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

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

        И не забудьте, что в шаблонах вызов нужно заменить на 180х180. Это важно.

        • +1
          Elena Elena 26 февраля 2020 13:36 #

          Действительно, после того как в шаблоне изменил на 180x180 все сработало

          В настройках добавил: "квадратная обрезка: 180х180 px"

          Теперь и правда получаются фото 180x180? НО(!!!) фото вписывается в квадрат опять по ширине!!! Вот проблема! Как у вас на первом фото!

          • +1
            Elena Elena 26 февраля 2020 14:07 #

            Почему-то каждый раз происходит не обрезка. а вписывание в квадрат!! ??

            • +1
              Elena Elena 26 февраля 2020 14:15 #

              Всё!!! Нашел причину, почему не происходила именно обрезка - мешал плагин "правильные изображения". Отключил и все сработало!!!

              • +1
                replicant replicant 26 февраля 2020 14:30 #

                На присутствие плагина в этом процессе намекал слегка, но хорошо, что вам все-таки удалось более-менее со всем этим разобраться.

                • +1
                  Elena Elena 26 февраля 2020 14:33 #

                  Про лайфхаки могу я узнать? Если что - можно в «личку» )

                  • +1
                    replicant replicant 26 февраля 2020 14:58 #

                    Если у вас стоит в настройках плагина режим налету или rewrite, то используйте в плагине кнопку "Удалить созданные webp эскизы", чтобы зачистить хранилище от старья, когда товары и фото добавляются, удаляются и т.п., а эскизы webp копятся в избытке. Сработает в итоге так же в долгосрочной перспективе. Опять же это стоит делать тогда, когда на хостинге труба с местом и надо что-то делать, чтобы освободить пространство.

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

                    У вас с webp эскизами на сайте всё в полном порядке. Не заморачивайтесь. Сайт грузится за 2 сек. Всё клево.

        • +1
          Elena Elena 26 февраля 2020 14:16 #

          replicant

          Спасибо Вам огромное!!!! ))

  • 1
    Elena 26 февраля 2020 13:45 #

    Таак..., а что за "пара лайфхаков" ? )))

  • 0
    Elena 25 февраля 2020 20:19 #

    В чем "костыль"? Сейчас все такие задачи решаются с помощью css 

    • +1
      Elena Elena 25 февраля 2020 22:01 #

      Это просто пример..

      Генерируются квадраты из квадратов

      Прямоугольник вписывается в квадрат по ширине..

      • +1
        replicant replicant 25 февраля 2020 22:02 #

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

        • +1
          Elena Elena 25 февраля 2020 22:04 #

          Еще раз - они генерируются как на втором рисунке - т.е. вписываются в квадрат по ширине.. Устал объяснять

          А нужно, чтобы вписывались по высоте, слева и справа обрезаясь.

          • +1
            replicant replicant 25 февраля 2020 22:13 #


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

            А те эскизы, которые генерируете сейчас Макс. (ширина, высота) = 180 px выпилите вообще отовсюду и проблема решится сразу и глобально. Если всё должно быть квадратным в каталогах товаров, то вам они вообще не нужны.

            • +1
              Elena Elena 25 февраля 2020 23:47 #

              Вот такие настройки у меня

              А результат как на второй картинке

              Т.е. "выпилить" - это удалить в настройках вот это:

               "квадратная обрезка: 180х180 px" ?

Добавить ответ

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