С чем вам помочь?

Задавайте вопрос или опишите проблему, с которой Вы столкнулись

Как изменить размер фотографии (картинок) для всех сущностей в каталоге

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

В данной статье мы рассмотрим как изменить размеры основных картинок которые используются в магазине.

 

Настройки размеров изображений в целом

В AdVantShop.NET версии 4 и выше предусмотрена возможность задавать размеры как картинок категории, так и для товаров, логотипа и мини картинок новостей. 

Чтобы изменить размеры этих картинок нужно задать в панели администрирования, пункт меню "Дизайн - Настройки шаблона"


Рисунок 1.

Далее, в списке параметров, найти нужную секцию и задать новые размеры для ширины и высоты картинки. Размеры задаются в пикселях (px). 


Рисунок 2.

Затем нужно сохранить изменения, нажав на оранжевую кнопку "Сохранить настройки".

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

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

 

Как изменить размер для "Лого производителя" / Бренды

Панель администрирования, пункт меню "Дизайн - Настройки шаблона" - секция "Лого производителя"

По умолчанию размеры:

Ширина 100 (px)

Высота 80 (px)

Лого производителя - это картинка которая показывается рядом с названием производителя (бренда) в разделе "Бренды".

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


Рисунок 3.

 

Как изменить размер для "Изображение новости"

Панель администрирования, пункт меню "Дизайн - Настройки шаблона" - секция "Изображение новости"

По умолчанию размеры:

Ширина 140 (px)

Высота 140 (px)

Изображение новости - Картинка которая показывается рядом с текстом анонса в списке новостей. Картинка не отображается в самой новости. Пример картинки на рисунке ниже. (Рис 4)

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


Рисунок 4.

 

Как изменить размер для "Иконки для оплаты"

Панель администрирования, пункт меню "Дизайн - Настройки шаблона" - секция "Иконки для оплаты"

По умолчанию размеры:

Ширина 60 (px)

Высота 40 (px)

Иконка для оплаты - картинка малого размера, практически иконка, выводится в процессе оформления заказа в списке методов оплаты. Пример картинки можно увидеть ниже. (Рис 5)

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


Рисунок 5.

 

Как изменить размер для "Иконки для доставки"

Панель администрирования, пункт меню "Дизайн - Настройки шаблона" - секция "Иконки для доставки"

По умолчанию размеры:

Ширина 60 (px)

Высота 40 (px)

Иконка для доставки- по аналогии с иконкой оплаты, это картинка малого размера, выводится в процессе оформления заказа в списке методов доставки. Пример картинки можно увидеть ниже. (Рис 5)

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


Рисунок 6.

 

Как изменить размер для "Категория. Большая и маленькая фотография."

Панель администрирования, пункт меню "Дизайн - Настройки шаблона" - секция "Категория."

По умолчанию размеры "Большая фотография":

Ширина 740 (px)

Высота 200 (px)

Большая фотография - практически баннер, который показывается над товарами категории, когда пользователь переходит в категорию. Пример на рисунке ниже. (Рис 7)


Рисунок 7.

По умолчанию размеры "Маленькая фотография":

Ширина 80 (px)

Высота 80 (px)

Маленькая фотография категории - это изображение у категории, которое показывается когда вы находитесь в категории выше. Например, вы находитесь в категории Каталог, и в ней содержатся подкатегории Телефоны, Техника и т.д.  


Рисунок 8.

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

 

Как изменить размер "Товар. Большая, средняя, маленькая и самая маленькая фотография."

Панель администрирования, пункт меню "Дизайн - Настройки шаблона" - секция "Товар."

Вообще, в магазине на базе AdVantShop.NET формируется четыре физически отдельных изображения из одного загруженного оригинала. 

Одно мини изображение для корзины, одно меньше для превью в каталоге, одно среднее для показа в каталоге и большое для показа при клике на фото в карточке товара. 

Получается 4 картинки, размеры которых можно менять по нужде. Мы естественно, рекомендуем оставить значения по умолчанию. 

По умолчанию размеры "Большая фотография":

Ширина 1000 (px)

Высота 1000 (px)

Большая фотография товара - это изображение которое показывается при наведении (или клике) на изображении в карточке товара. Пример на рисунке 9, справа.

 

По умолчанию размеры "Средняя фотография":

Ширина 250 (px)

Высота 350 (px)

Средняя фотография товара - это изображение которое показывается в карточке товара. Пример на рисунке 9, слева.


Рисунок 9.

По умолчанию размеры для "Маленькая фотография":

Ширина 160 (px)

Высота 180 (px)

Маленькая фотография - это собственно фото которое показывается в каталоге в списке товаров. Посмотрите пример на рисунке ниже. (Рис 10).


Рисунок 10.

По умолчанию размеры "Самая маленькая фотография":

Ширина 60 (px)

Высота 60 (px)

Самая маленькая фотография отображается когда товар добавляют в корзину, и в карточке товара под основным фото, показывая тем самым, что есть ещё фотографии и какие они. (рис 11)


Рисунок 11.

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

 

Что если загрузить картинку больше чем указаны размеры в настройках?

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

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

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Как мы можем улучшить статью?
Благодарим за отзыв.
Благодарим за отзыв. Мы улучшим эту статью.
Произошла ошибка.
Не нашли нужную статью? Предложить тему
Не нашли нужную статью?
Благодарим за отзыв.
Произошла ошибка.

Дизайн интернет-магазина

Работа с CSS Как изменить надписи кнопок на сайте Как изменить дизайн сайта Как изменить размер и стиль шрифта на сайте Примеры изменения CSS Как создать и загрузить свою цветовую схему в трансформер дизайна Настройка внешнего вида интернет-магазина Как загрузить свою тему в трансформер дизайна Редактирование блоков и текстов на главной странице Как создать и загрузить свой фон в трансформер дизайна Работа со статическими блоками (видео) Работа со статическими блоками (описание блоков) Вопросы авторского права на дизайн Товары на главной: добавление новинок и хитов Настройка карусели на главной странице интернет-магазина (видео) Настройка карусели на главной странице интернет-магазина Вывод изображения большего размера при нажатии изображение Вывод вплывающего окна с текстом при нажатии на ссылку Как добавить таблицу в текст страницы, описания или новости Установка якоря на странице Формирование рамки таблицы Как изменить размер фотографии (картинок) для всех сущностей в каталоге Как создать и загрузить свою тему в трансформер дизайна (Для версии 4.x и 3.x)
© AdvantShop. Платформа для открытия интернет-магазина.