Как правильно настроить превью в 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

7 517

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

Андрей Старожил

16 октября 2018, 16:48

В источнике файлов пишете:

{"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

Спасибо огромное. А как вот здесь

<img class="111" src="{$thumb}" alt="{$pagetitle}" title="{$pagetitle}"/>

вызвать нужный размер?

Андрей Старожил

16 октября 2018, 22:11

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

[[!msProducts?
    &parents=`0`
    &includeThumbs=`medium`
]]

то у вас они будут доступны внутри чанка:

<img class="111" src="{$medium}" alt="{$pagetitle}" title="{$pagetitle}"/>

Либо можете в источнике файлов задать нужный размер в small, и у вас в thumb будет сразу нужный.

Виталий Старожил

17 октября 2018, 11:56

Ну да, я так и сделал. Получилось только через параметр small, а если нужно свой размер? К примеру medium или big по сути название то не важно, как вызвать в таком случае?

<img class="111" src="{$medium}" alt="{$pagetitle}" title="{$pagetitle}"/>

вот так делал, не работало, в msProducts подключал, можете показать более полную конструкцию если если еще где-то нужно прописать.

Андрей Старожил

17 октября 2018, 12:54

Проверил сейчас на тестовом сайте, всё должно работать, вызов:

[[!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~~ Старожил

13 июля 2020, 00:39

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

<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

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

А что там понимать?

w = width (ширина)
h = height (высота)
q = quality (качество)
zc = zoom crop (центровая обрезка)

Илья Клюковский Старожил

26 июня 2019, 20:57

Здравствуйте!
А если вывод товаров идет через mFilter2, там же нет параметра &includeThumbs, как изменить размер? Спасибо.

Янис Проверенный

26 июня 2019, 21:53

mFilter2 это обёртка. По умолчанию он вызывает mSearch2. А если указать,

&element=`msProducts`

то станут доступны все фичи msProducts. Как бы документация есть и очень хорошая.

Илья Клюковский Старожил

27 июня 2019, 10:18

Спасибо, но всё равно не получается. Что то видимо не так делаю. Может увидите что не так.
Вызов 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

Включите &showLog=`1` и посмотрите что вообще происходит

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

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

Job Piper собирает IT заказы со всего Интернета.

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