Как правильно настроить превью в Minishop2?

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

Сайт на minishop2 версия 2.4.14. Нужно выводить изображения разного размера на разных страницах:

Карточка товаров
Страница каталога
Рекомендуемые товары
и т.д.

Сейчас все настройки магазина по умолчанию:

Источник файлов skrinshoter.ru/s/161018/VIsCu9iI не понимаю что там прописывать нужно и как потом вызывать данные размеры превью.

Код галереи, что здесь нужно прописать, если нужно?
<div id="msGallery">
    {if $files?}
        <div class="fotorama"
             data-nav="thumbs"
             data-thumbwidth="60"
             data-allowfullscreen="true"
             data-swipe="true"
             data-autoplay="5000">
            {foreach $files as $file}
                <a href="{$file['url']}" target="_blank">
                    <img src="{$file['small']}" alt="" title="">
                </a>
            {/foreach}
        </div>
    {else}
        <img src="{('assets_url' | option) ~ 'components/minishop2/img/web/ms2_medium.png'}"
             srcset="{('assets_url' | option) ~ 'components/minishop2/img/web/ms2_medium@2x.png'} 2x"
             alt="" title=""/>
    {/if}
</div>
Вот часть кода из чанка msProduct. Что здесь нужно прописать, чтобы картинки были нужного размера, к примеру 255х264px

{if $thumb?}
            <img class="111" src="{$thumb}" alt="{$pagetitle}" title="{$pagetitle}"/>
            {else}
                <img src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png"
                     srcset="{'assets_url' | option}components/minishop2/img/web/ms2_small@2x.png 2x"
                     alt="{$pagetitle}" title="{$pagetitle}"/>
            {/if}
Буду очень признателен за помощь. Вообще не могу разобраться в этих тумбах и превью.
Виталий
16 октября 2018, 16:16
modx.pro
1
4 845
0

Комментарии: 11

Андрей
16 октября 2018, 16:48
+1
В источнике файлов пишете:
{"small":{"w":255,"h":264,"q":90,"zc":"0"}}

И у вас будет плейсхолдеры small и thumb этого размера. Если же надо дополнительные размеры, то задаётся так:
{"small":{"w":255,"h":264,"q":90,"zc":"0"},"medium":{"w":500,"h":500,"q":90,"zc":"0"}}

И будет доступен новый плейсхолдер medium, в чанке галереи соответственно так:
{foreach $files as $file}
<a href="{$file['url']}" target="_blank">
    <img src="{$file['medium']}" alt="" title="">
</a>
{/foreach}

Если нужно подключить превью для вывода в msProducts, это делается так:
[[!msProducts?
    &parents=`0`
    &includeThumbs=`small,medium`
]]

Почитать про параметры phpthumb для генерации превью(zc:0 и прочее) можно здесь.
    Виталий
    16 октября 2018, 21:24
    0
    Спасибо огромное. А как вот здесь
    <img class="111" src="{$thumb}" alt="{$pagetitle}" title="{$pagetitle}"/>
    вызвать нужный размер?
      Андрей
      16 октября 2018, 22:11
      0
      Так после того как вы подключите нужный размер в вызове:
      [[!msProducts?
          &parents=`0`
          &includeThumbs=`medium`
      ]]
      то у вас они будут доступны внутри чанка:
      <img class="111" src="{$medium}" alt="{$pagetitle}" title="{$pagetitle}"/>

      Либо можете в источнике файлов задать нужный размер в small, и у вас в thumb будет сразу нужный.
        Виталий
        17 октября 2018, 11:56
        0
        Ну да, я так и сделал. Получилось только через параметр small, а если нужно свой размер? К примеру medium или big по сути название то не важно, как вызвать в таком случае?
        <img class="111" src="{$medium}" alt="{$pagetitle}" title="{$pagetitle}"/>
        вот так делал, не работало, в msProducts подключал, можете показать более полную конструкцию если если еще где-то нужно прописать.
          Андрей
          17 октября 2018, 12:54
          0
          Проверил сейчас на тестовом сайте, всё должно работать, вызов:
          [[!msProducts? &includeThumbs=`medium`]]

          Чанк:
          {if $medium?}
              <img src="{$medium}" alt="{$pagetitle}" title="{$pagetitle}"/>
          {else}
              <img src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png"
                           srcset="{'assets_url' | option}components/minishop2/img/web/ms2_small@2x.png 2x"
                           alt="{$pagetitle}" title="{$pagetitle}"/>
          {/if}

          В источнике файлов для примера:
          {"small":{"w":120,"h":90,"q":90,"zc":"1","bg":"000000"},"medium":{"w":200,"h":200,"q":90,"zc":"1","bg":"000000"}}

          Также когда прописали новый размер, нужно заново сгенерировать превью, т.к. сами собой они не появятся, это можно сделать в галерее выделив фотографии и правой кнопкой — Обновить превью. Либо через скрипт — Перегенерировать все превью товаров miniShop2, запускается через компонент Console.
            Rost
            Rost
            13 июля 2020, 00:39
            0
            Извиняюсь дико у меня вот такая проблема, выводит миниатюру и картинку вместе как это решить?
            чанк
            <div id="msGallery">
                {if $files?}
                    <div class="fotorama"
                         data-nav="thumbs"
                         data-thumbheight="60"
                         data-thumbwidth="60"
                         data-swipe="true"
                         data-stopautoplayontouch="false"
                         data-allowfullscreen="native"
                        data-ratio="9/10"
                         >
                        {foreach $files as $file}
                            <a href="{$file['url']}" alt="[[+pagetitle]]" title="[[+pagetitle]]">
                                  <img src="{$file['thumb']}" alt="[[+pagetitle]]" title="[[+pagetitle]]">
                            </a>
                        {/foreach}
                    </div>
                {else}
                    <img src="{('assets_url' | option) ~ 'components/minishop2/img/web/nophoto_medium.jpg'}"
                         srcset="{('assets_url' | option) ~ 'components/minishop2/img/web/nophoto_medium2x.jpg'} 2x"
                         alt="" title=""/>
                {/if}
            </div>
            вывожу вот так
            [[!msGallery? &tpl=`tpl.msGallery-elki`]]
            Мне просто нужно это устранить, когда одно изображение показывает 2 миниатюры, не могу понять как решить эту задачу ((
            Просто да же загружаешь 3 картинки всё равно одна добавляется ((
    SEQUEL.ONE
    16 октября 2018, 17:49
    0
    Источник файлов skrinshoter.ru/s/161018/VIsCu9iI не понимаю что там прописывать нужно и как потом вызывать данные размеры превью.
    А что там понимать?

    w = width (ширина)
    h = height (высота)
    q = quality (качество)
    zc = zoom crop (центровая обрезка)
      Илья Клюковский
      26 июня 2019, 20:57
      0
      Здравствуйте!
      А если вывод товаров идет через mFilter2, там же нет параметра &includeThumbs, как изменить размер? Спасибо.
      Илья Клюковский
      27 июня 2019, 10:18
      0
      Спасибо, но всё равно не получается. Что то видимо не так делаю. Может увидите что не так.
      Вызов mFilter2
      [[!mFilter2?
      	&element=`msProducts`
      	&filters=`msoption|profit:number, msoption|price_for_buy:number, msoption|activity:activity, msoption|city:city, msoption|business_age:number, msoption|form_company:form_company, msoption|rent:boolean, msoption|rent_and_bay:boolean, msoption|work_now:boolean`
        
        
        &tplFilter.outer.msoption|city=`tpl.mFilter2.filter.select`
        &tplFilter.row.msoption|city=`tpl.mFilter2.filter.option`
        &suggestionsRadio=`msoption|city`
        
        &tplFilter.outer.msoption|activity=`tpl.mFilter2.filter.select`
        &tplFilter.row.msoption|activity=`tpl.mFilter2.filter.option`
        &suggestionsRadio=`msoption|activity`
        
        &tplFilter.outer.msoption|business_age=`tpl.mFilter2.filter.slider`
        &tplFilter.row.msoption|business_age=`tpl.mFilter2.filter.number`
        
        &tplFilter.outer.msoption|form_company=`tpl.mFilter2.filter.select`
        &tplFilter.row.msoption|form_company=`tpl.mFilter2.filter.option`
        &suggestionsRadio=`msoption|form_company`
        
        &tplFilter.outer.msoption|profit=`tpl.mFilter2.filter.slider`
        &tplFilter.row.msoption|profit=`tpl.mFilter2.filter.number`
        
        &tplFilter.outer.msoption|price_for_buy=`tpl.mFilter2.filter.slider`
        &tplFilter.row.msoption|price_for_buy=`tpl.mFilter2.filter.number`
       
      	&class=`msProduct`
      	&tpl= `item-business`
      	&tplOuter= `mFilterOuter`
      	&aliases=`ms|price==price, resource|parent==parent`
              &includeThumbs=`medium`
      ]]
      Запись в настройка медиа thumbnails:
      {"small":{"w":120,"h":90,"q":90,"zc":"1","bg":"000000"}, "medium:"{"w":320,"h":290,"q":90,"zc":"1","bg":"000000"}}
      Вывод превью в айтеме
      <img src="{$medium}" class="mw-100 item_img" alt="{$pagetitle}" title="{$pagetitle}"/>
      Заранее спасибо вам.
        Станислав
        27 июня 2019, 10:48
        0
        Включите &showLog=`1` и посмотрите что вообще происходит
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        11