MiniShop2 картинки разного размера

Загружаю к одному товару несколько картинок, все разного размера.
В tpl.msGallery.outer и tpl.msGallery.row ставлю нужные размеры большой картинки и превьюшек.
У товара все превью и большая картинка выводятся нужной ширины, а вот высота везде разная. Т.е. высота картинок подбирается автоматом, чтоб была пропорция.

Как сделать, чтобы все картинки были нужного размера?
Конечно перед загрузкой в галерею можно обрабатывать все фотки, чтоб были одного размера — но это не вариант.

И еще вопрос:
Почему при обновлении страницы с товаром, сначала появляется картинка минишопа, на секунду примерно, а только потом подгружается картинка самого товара?
В каталоге с товарами такого не происходит.

Евгений

08 сентября 2013, 14:27

7 611

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

Василий Наумкин

08 сентября 2013, 19:13

Может, нужно настроить источник файлов, чтобы генерировались превьюшки желаемого размера?

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

Евгений

08 сентября 2013, 19:56

Первый день ток разбираюсь.
Спасибо, Василий!

Василий Наумкин

08 сентября 2013, 20:25

Когда разбираешься, желательно читать документацию — она для того и пишется.

Про галерею у меня довольно подробно расписано, включая генерацию превью.

Александр Толстенко

05 января 2017, 14:17

Василий, подскажите пожалуйста, не могу понять как мне задать параметры загружаемым картинкам.
пользуюсь бд поставщика, и файлы которые он дает есть очень большого размера, можно ли как то сделать так чтобы при загрузке, оригиналы фоток пережимались например до 1024*768px? пробовал задать эти параметры в Источнике файлов: maxUploadWidth: 1024 и maxUploadHeight:768, что то не работает у меня, оригинал фотки, которая лижит в папке с id товаром, все равно остается большим.
спасибо.

Андрей П

05 января 2017, 14:41

Вы задали параметры максимального разрешения файлов. Значение, которое Вам надо корректировать находится в строке thumbnails, по-умолчанию там только одно разрешение 120х90, [{«w»:120,«h»:90,«q»:90,«zc»:«1»,«bg»:«000000»}]. w-ширина, h-высота, q-качество в %, zc-кроп по центру, bg-бэкграунд. Несколько разрешений вводятся через запятую [{«w»:120,«h»:90,«q»:90,«zc»:«1»,«bg»:«000000»},{«w»:1024,«h»:768,«q»:90,«zc»:«1»,«bg»:«000000»}], при этом у Вас в папке с товаром будут создаваться папки с изображениями разных разрешений

Александр Толстенко

05 января 2017, 15:22

в том то и дело, что мне нужно сделать не превью, а оригинал фотки ужать, который лежит в корне, т.к. у поставщика они есть по 2мб, и при загрузке таких 1000 или 3000 штук, хостинг закончится.

Андрей П

05 января 2017, 17:01

Тогда, как мне видится, стандартными средствами это не решить

Константин Ильин

05 января 2017, 17:33

я выход такой нашел:
Указал maxUploadWidth и maxUploadHeight по 1000px, соответственно 2мб обычно это фото больше 1000px и тут галерея минишопа реагирует и сжимает до максимальных.
Это поможет если вам не нужны оригиналы больше 1000px. Также можно учесть средний размер загружаемых фото, т.е. если они все больше 1900px(Height или Width), то можно сделать 1899px(Height или Width).

Итого у меня с 8мб до 300кб сжималось.

Александр Толстенко

05 января 2017, 21:02

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

concept

25 сентября 2017, 10:46

Здравствуйте, Василий!
Скажите, пожалуйста, почему при переходе из каталога в карточку товара вначале появляется изображения размера, который установлен для превьюшки (у меня 150х225) а уже после с небольшой задержкой изображение становится нужного размера (в моем случае ограниченное параметром data-maxheight=«400»). Иногда при переходе на карточку товара изображение так и остается размером с превьюшку.
Вот пример тестовой страницы d0014049.atservers.net/katalog/znachki/znachok-1

Володя

25 сентября 2017, 11:12

попробуйте фикс с предварительной загрузкой изображений modx.pro/help/13256/#comment-86809
думаю должно помочь.

concept

25 сентября 2017, 12:22

Попробовал. Как-то не особо что-то изменилось. Только теперь я не могу вывести изображение нужного мне размера, только размера превьюшки, а задержка и «прыганье» картинок остались

Володя

25 сентября 2017, 12:39

как то плохо вы попробовали joxi.ru/zANQW4qiBdKx42
не надо копировать все целиком, надо всего лишь добавить

{var $preload = []}

// в цикл набивку массива с вашим ключем изображения
{set $preload[] = '<img src='~$file['medium']~'>'}

// после цикла 
<div style="position:fixed;left:9999px;opacity:0;">
    {$preload|join}
</div>

concept

25 сентября 2017, 12:50

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

<div id="msGallery">
    {if $files?}
        <div class="fotorama"
             data-nav="thumbs"
             data-thumbheight="45"
             data-allowfullscreen="true"
             data-swipe="true"
             data-autoplay="5000"
             data-maxheight="400">
            {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>

Володя

25 сентября 2017, 12:56

<div id="msGallery">
    {if $files?}

        {var $preload = []}

        <div class="fotorama"
             data-nav="thumbs"
             data-thumbheight="45"
             data-allowfullscreen="true"
             data-swipe="true"
             data-autoplay="5000"
             data-maxheight="400">
            {foreach $files as $file}

                {set $preload[] = '<img src='~$file['url']~'>'}

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

<div style="position:fixed;left:9999px;opacity:0;">
    {$preload|join}
</div>

concept

25 сентября 2017, 13:03

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

Володя

25 сентября 2017, 13:07

Иногда при переходе на карточку товара изображение так и остается размером с превьюшку.

данный код решает проблему.

Все равно выводится с задержкой.

Выводится когда у вас подгружаются изображения. Пока они не загрузились естественно нечего и выводить.

concept

25 сентября 2017, 13:11

Спасибо за помощь, будем «копать» дальше.

Володя

25 сентября 2017, 13:18

да пожалуйста.
попробуйте замените вот это

<a href="{$file['url']}" target="_blank">
                    <img src="{$file['small']}" alt="" title="">
                </a>

на

<a href="{$file['url']}" target="_blank"></a>

превьюшки будут генерится из основых изображений

concept

25 сентября 2017, 13:38

Спасибо огромное! Вот это, наверное, оптимальный вариант! Превьюшку просто не показывает.
… странно только, что готовый вроде магазин еще допиливать приходится, хотя в примере (https://minishop2.com/catalog/category-3/article-1) вроде все работает нормально без костылей.

concept

26 октября 2017, 18:08

Здравствуйте!
Хочу продолжить тему. Теперь у нас получается, что на карточке товара маленькие превьюшки изображений, которые генерятся из основных изображений и весят, как основные изображения (в моем случе это png до 180kb). Т.е. изображение размером 64х96 px весит по 140-180 Kb! Та же ситуация при просмотре увеличенного изображения, превьюшки внизу те же самые. Может их как через Phpthumb уменьшить?

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

MiniShop2 картинки разного размера

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

Здесь упомянуты