Уроки 1с-Битрикс: как добавить баннер картинку в каталог товаров на Аспро Лайтшоп
Приветствую, друзья!
В этом видео мы с вами рассмотрим, как в решении «Аспро Лайтшоп» в каталогах товаров подставить изображения или текст.
У нас есть «Каталог». В «Каталоге» есть определённые категории и как вот в этих категориях выводить дополнительную информацию.
Вот, например, как сейчас вы видите на экране:
Мы перешли в Каталог «Строительство и ремонт» и здесь, над каталогом товаров можно вывести текст. Либо же можно вывести картинку.
Вот как в данном примере:
Итак, первое – мы заходим в админку, находим наш «Каталог товаров»:
И выбираем нужный нам каталог.
В данном случае, нам нужно будет поставить картинку в каталог под названием «Гуляй-город».
Для этого мы нажимаем здесь «Изменить»:
И переходим в настройки каталога. Здесь есть несколько вкладок:
- Раздел;
- SEO;
- Дополнительно;
- Дополнительные поля
И вот именно сюда, во вкладке «Доп. поля» нам нужно вставить путь к картинке. А для того, чтобы вставить путь к картинке, предварительно нам нужно эту картинку загрузить на наш хостинг, на наш сервер.
И желательно создать какой-то каталог.
В нашем случае это выглядит вот так:
Вот он наш сайт на сервере. Мы подключились в данном случае через iftp-менеджер под названием FileZilla. По работе с ним есть отдельное видео. Перешли в папку с нашим сайтом. И здесь есть папка под названием «images» (картинки).
Если у вас такой папки нет, то вы можете её с лёгкостью создать.
Нажимаем правой кнопкой мышки в любом месте и нажимаем «Создать каталог»:
И вводим имя каталога. В нашем случае уже есть, создавать ничего не нужно. Мы переходим в каталог «Картинки». И здесь у нас лежит папка 1348. Мы назвали так эту папку, потому что она нам показывает размер картинки. (То есть, первое число от размера картинки).
Размер картинки в нашем случае: 1348 на 415
То есть, 1348 – это ширина, 415 – это высота.
Всё это для того, чтобы здесь у нас вот эта картиночка встала вровень с контентом:
Итак, мы переходим в папку 1348. Здесь у нас уже есть какие-то картинки. Выбираем с левой части экрана нашу картинку. И нажимаем кнопку «Закачать на сервер». Всё, картинка у нас с вами загружена на сайт.
Также существует и альтернативный способ загрузки картинок на сайт.
В разделе Контент выбираем «Структура сайта», Файлы и папки. Находим каталог «images» (картинки). Там есть папка 1348. И там лежат эти картинки.
Нажимаем «Добавить файл» или «Загрузить файл»:
Выбираем также файл.
Вот здесь «Добавить файл»: и закачиваем его куда нужно.
Вы можете столкнуться с тем, что файл ужмётся до определённого размера. Если мы допустим, делаем это в обход админки (то есть, через iftp-клиент), то у нас файл передаётся на сервер в оригинальном размере. Вот в нашем случае 1348 х 415.
А если мы загрузим через админку, то Битрикс может его сжать и вы получите файл размера допустим, 1024 пикселя. Это уже будет не совсем то, что нужно. Тогда нужно проводить определённую настройку в админке, чтобы Битрикс не сжимал эти картинки самостоятельно.
Но в нашем случае мы загрузили через iftp-клиент.
Следующим шагом мы с вами возвращаемся в каталог товаров. Выбираем нашу папку с каталогом «Гуляй-город». Нажимаем «Изменить». Переходим в «Дополнительные поля».
И теперь нам сюда надо вставить путь к картинке:
Но это не просто путь, а это путь с http разметкой:
Мы открываем скобочку:
Пишем src– это тег для всех картинок. То есть, на любом сайте используется этот тег для вывода картинок.
Дальше =, открываем кавычки и в кавычках мы указываем путь к картинке на сервере:
В нашем случае /imaes/ – это - пака с картинками. Потом следующая папка /1348/. И дальше название самого файла.
В нашем случае файл называется gg1348.jpg
Мы можем с вами просто скопировать название в буфер и здесь подставить
Дальше мы добавляем к картинке дополнительный атрибут:
Добавляем class «img – responsive». Что он даёт?
Он нам даёт опцию такую, что на разных форматах экранов у нас будет картинка ужиматься под формат экрана, то есть, чтоб она была адаптивной.
Итак, мы с вами всё это прописали:
Скопировали в буфер, вернулись на сайт и вставили сюда:
И нажали «Сохранить».
При желании мы внизу, вот здесь:
Можем добавить ещё какой-то текст или что-то ещё, что мы захотим. То есть, сюда мы можем вставить любой intimal-объект, любую intimal-вёрстку.
В нашем случае сейчас – это только картинка.
Итак, мы с вами возвращаемся на сайт и проверяем:
Всё. Наша картинка встала.
Я достаточно долго это всё объяснял. Но по факту, операция достаточно простая. То есть, достаточно один раз (или два раза) вам её повторить и дальше у вас не составит труда подставлять нужные материалы в какие-то разделы каталога на сайте.
На этом у меня всё. Благодарю за внимание.
