MiniShop2 картинки разного размера
Загружаю к одному товару несколько картинок, все разного размера.
В tpl.msGallery.outer и tpl.msGallery.row ставлю нужные размеры большой картинки и превьюшек.
У товара все превью и большая картинка выводятся нужной ширины, а вот высота везде разная. Т.е. высота картинок подбирается автоматом, чтоб была пропорция.
Как сделать, чтобы все картинки были нужного размера?
Конечно перед загрузкой в галерею можно обрабатывать все фотки, чтоб были одного размера — но это не вариант.
И еще вопрос:
Почему при обновлении страницы с товаром, сначала появляется картинка минишопа, на секунду примерно, а только потом подгружается картинка самого товара?
В каталоге с товарами такого не происходит.
В tpl.msGallery.outer и tpl.msGallery.row ставлю нужные размеры большой картинки и превьюшек.
У товара все превью и большая картинка выводятся нужной ширины, а вот высота везде разная. Т.е. высота картинок подбирается автоматом, чтоб была пропорция.
Как сделать, чтобы все картинки были нужного размера?
Конечно перед загрузкой в галерею можно обрабатывать все фотки, чтоб были одного размера — но это не вариант.
И еще вопрос:
Почему при обновлении страницы с товаром, сначала появляется картинка минишопа, на секунду примерно, а только потом подгружается картинка самого товара?
В каталоге с товарами такого не происходит.
Комментарии: 21
Может, нужно настроить источник файлов, чтобы генерировались превьюшки желаемого размера?
Сейчас ты просто меняешь ширину в чанках, даже не зная, какого реального размера картинки на сервере.
Сейчас ты просто меняешь ширину в чанках, даже не зная, какого реального размера картинки на сервере.
Первый день ток разбираюсь.
Спасибо, Василий!
Спасибо, Василий!
Когда разбираешься, желательно читать документацию — она для того и пишется.
Про галерею у меня довольно подробно расписано, включая генерацию превью.
Про галерею у меня довольно подробно расписано, включая генерацию превью.
Василий, подскажите пожалуйста, не могу понять как мне задать параметры загружаемым картинкам.
пользуюсь бд поставщика, и файлы которые он дает есть очень большого размера, можно ли как то сделать так чтобы при загрузке, оригиналы фоток пережимались например до 1024*768px? пробовал задать эти параметры в Источнике файлов: maxUploadWidth: 1024 и maxUploadHeight:768, что то не работает у меня, оригинал фотки, которая лижит в папке с id товаром, все равно остается большим.
спасибо.
пользуюсь бд поставщика, и файлы которые он дает есть очень большого размера, можно ли как то сделать так чтобы при загрузке, оригиналы фоток пережимались например до 1024*768px? пробовал задать эти параметры в Источнике файлов: maxUploadWidth: 1024 и maxUploadHeight:768, что то не работает у меня, оригинал фотки, которая лижит в папке с id товаром, все равно остается большим.
спасибо.
Вы задали параметры максимального разрешения файлов. Значение, которое Вам надо корректировать находится в строке 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»}], при этом у Вас в папке с товаром будут создаваться папки с изображениями разных разрешений
в том то и дело, что мне нужно сделать не превью, а оригинал фотки ужать, который лежит в корне, т.к. у поставщика они есть по 2мб, и при загрузке таких 1000 или 3000 штук, хостинг закончится.
Тогда, как мне видится, стандартными средствами это не решить
я выход такой нашел:
Указал maxUploadWidth и maxUploadHeight по 1000px, соответственно 2мб обычно это фото больше 1000px и тут галерея минишопа реагирует и сжимает до максимальных.
Это поможет если вам не нужны оригиналы больше 1000px. Также можно учесть средний размер загружаемых фото, т.е. если они все больше 1900px(Height или Width), то можно сделать 1899px(Height или Width).
Итого у меня с 8мб до 300кб сжималось.
Указал maxUploadWidth и maxUploadHeight по 1000px, соответственно 2мб обычно это фото больше 1000px и тут галерея минишопа реагирует и сжимает до максимальных.
Это поможет если вам не нужны оригиналы больше 1000px. Также можно учесть средний размер загружаемых фото, т.е. если они все больше 1900px(Height или Width), то можно сделать 1899px(Height или Width).
Итого у меня с 8мб до 300кб сжималось.
начал искать проблему, заметил то, что файл какого то формата не правильного вроде бы, т.к. именно его он не хочет пережимать. пробывал другие загружать все адекватно работает.
Здравствуйте, Василий!
Скажите, пожалуйста, почему при переходе из каталога в карточку товара вначале появляется изображения размера, который установлен для превьюшки (у меня 150х225) а уже после с небольшой задержкой изображение становится нужного размера (в моем случае ограниченное параметром data-maxheight=«400»). Иногда при переходе на карточку товара изображение так и остается размером с превьюшку.
Вот пример тестовой страницы d0014049.atservers.net/katalog/znachki/znachok-1
Скажите, пожалуйста, почему при переходе из каталога в карточку товара вначале появляется изображения размера, который установлен для превьюшки (у меня 150х225) а уже после с небольшой задержкой изображение становится нужного размера (в моем случае ограниченное параметром data-maxheight=«400»). Иногда при переходе на карточку товара изображение так и остается размером с превьюшку.
Вот пример тестовой страницы d0014049.atservers.net/katalog/znachki/znachok-1
попробуйте фикс с предварительной загрузкой изображений modx.pro/help/13256/#comment-86809
думаю должно помочь.
думаю должно помочь.
Попробовал. Как-то не особо что-то изменилось. Только теперь я не могу вывести изображение нужного мне размера, только размера превьюшки, а задержка и «прыганье» картинок остались
как то плохо вы попробовали joxi.ru/zANQW4qiBdKx42
не надо копировать все целиком, надо всего лишь добавить
не надо копировать все целиком, надо всего лишь добавить
{var $preload = []}
// в цикл набивку массива с вашим ключем изображения
{set $preload[] = '<img src='~$file['medium']~'>'}
// после цикла
<div style="position:fixed;left:9999px;opacity:0;">
{$preload|join}
</div>
Я и понимал, что я не прав. А можно ли для «особо одаренных» написать весь код целиком, т.к. моих знаний не хватает для понимания, наверно, элементарного фраз " в цикл набивку массива с вашим ключем изображения". Спасибо!
Вот мой код, что куда нужно вставить?
Вот мой код, что куда нужно вставить?
<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>
<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>
Спасибо, код заменил. Ничего не изменилось. Все равно выводится с задержкой.
Иногда при переходе на карточку товара изображение так и остается размером с превьюшку.данный код решает проблему.
Все равно выводится с задержкой.Выводится когда у вас подгружаются изображения. Пока они не загрузились естественно нечего и выводить.
Спасибо за помощь, будем «копать» дальше.
да пожалуйста.
попробуйте замените вот это
попробуйте замените вот это
<a href="{$file['url']}" target="_blank">
<img src="{$file['small']}" alt="" title="">
</a>
на <a href="{$file['url']}" target="_blank"></a>
превьюшки будут генерится из основых изображений
Спасибо огромное! Вот это, наверное, оптимальный вариант! Превьюшку просто не показывает.
… странно только, что готовый вроде магазин еще допиливать приходится, хотя в примере (https://minishop2.com/catalog/category-3/article-1) вроде все работает нормально без костылей.
… странно только, что готовый вроде магазин еще допиливать приходится, хотя в примере (https://minishop2.com/catalog/category-3/article-1) вроде все работает нормально без костылей.
Здравствуйте!
Хочу продолжить тему. Теперь у нас получается, что на карточке товара маленькие превьюшки изображений, которые генерятся из основных изображений и весят, как основные изображения (в моем случе это png до 180kb). Т.е. изображение размером 64х96 px весит по 140-180 Kb! Та же ситуация при просмотре увеличенного изображения, превьюшки внизу те же самые. Может их как через Phpthumb уменьшить?
Хочу продолжить тему. Теперь у нас получается, что на карточке товара маленькие превьюшки изображений, которые генерятся из основных изображений и весят, как основные изображения (в моем случе это png до 180kb). Т.е. изображение размером 64х96 px весит по 140-180 Kb! Та же ситуация при просмотре увеличенного изображения, превьюшки внизу те же самые. Может их как через Phpthumb уменьшить?
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.