Оценок: 1
551
Opencart. Добавление отдельного изображения для мобильной версии в баннерах, слайдшоу

Opencart. Изображения баннеров для мобильной версии

В Opencart есть модули для вывода слайдшоу, баннеров, но вывести можно только один вариант изображения. Здесь инструкция, как "модернизировать" эти модули и вывести в них разные варианты изображения для различных устройств.

В качестве источника изображений эти модули используют "Баннеры" (Дизайн -> Баннеры).

Лучшим вариантом считаю заранее подготовить изображения под разные устройства, для каждого баннера указать несколько вариантов (по умолчанию только один). Далее, уже в модулях, использовать тег picture для вывода разных вариантов в зависимости от разрешения, например широкое изображение для ПК, узкое для мобильных.

В примере (для Opencart 3) будет добавлен один дополнительный вариант изображения. Изображения будут добавляться в "Дизайн -> Баннеры", поэтому начать нужно с этого компонента.

Первый шаг - добавить поле "image_sm" в таблицу "banner_image" (используя phpMyAdmin, например). У меня это "oc_banner_image", использую префикс по умолчанию, может быть другой.

Для удобства вот запрос на добавление поля:

ALTER TABLE `oc_banner_image` ADD `image_sm` VARCHAR(255) NOT NULL DEFAULT '' AFTER `image`;

Далее изменения в модели, контроллере и шаблоне "баннеров" (ниже есть архив с измененными файлами)

1. Модель. /admin/model/design/banner.php

Здесь в двух местах (в функциях addBanner и editBanner, для Opencart 3 строки 11 и 27) нужно найти:

$this->db->query("INSERT INTO " . DB_PREFIX . "banner_image SET banner_id = '" . (int)$banner_id . "', language_id = '" . (int)$language_id . "', title = '" .  $this->db->escape($banner_image['title']) . "', link = '" .  $this->db->escape($banner_image['link']) . "', image = '" .  $this->db->escape($banner_image['image']) . "', sort_order = '" . (int)$banner_image['sort_order'] . "'");

Эти строки в двух функциях одинаковы, но может быть отличие в одном лишнем пробеле. Меняем на:

$this->db->query("INSERT INTO " . DB_PREFIX . "banner_image SET banner_id = '" . (int)$banner_id . "', language_id = '" . (int)$language_id . "', title = '" .  $this->db->escape($banner_image['title']) . "', link = '" .  $this->db->escape($banner_image['link']) . "', image = '" .  $this->db->escape($banner_image['image']) . "', image_sm = '" .  $this->db->escape($banner_image['image_sm']) . "', sort_order = '" . (int)$banner_image['sort_order'] . "'");

Было добавлено:

, image_sm = '" .  $this->db->escape($banner_image['image_sm']) . "'

Еще одно изменение здесь. Нужно найти:

'image'      => $banner_image['image'],

И после этого добавить:

'image_sm'      => $banner_image['image_sm'],

2. Контроллер. /admin/controller/design/banner.php

Здесь изменения небольшие и коснуться только функции getForm. Здесь нужно найти:

$data['banner_images'][$key][] = array(

Перед этой строкой есть проверка существования изображения с объявлением переменных $image и $thumb. Эту конструкцию нужно продублировать с небольшим изменением. Получится так:

				if (is_file(DIR_IMAGE . $banner_image['image_sm'])) {
					$image_sm = $banner_image['image_sm'];
					$thumb_sm = $banner_image['image_sm'];
				} else {
					$image_sm = '';
					$thumb_sm = 'no_image.png';
				}

Далее внутри массива banner_images, после:

'thumb'      => $this->model_tool_image->resize($thumb, 100, 100),

Добавим:

					'image_sm'      => $image_sm,
					'thumb_sm'      => $this->model_tool_image->resize($thumb_sm, 100, 100),

3. Шаблон. /admin/view/template/design/banner_form.twig

Здесь правки в трех местах, нужно найти и продублировать все что касается изображения. Находим:

<td class="text-center">{{ entry_image }}</td>

Сразу после нужно добавить:

<td class="text-center">{{ entry_image }} mobile</td>

Находим:

<td class="text-center"><a href="" id="thumb-image{{ image_row }}" data-toggle="image" class="img-thumbnail"><img src="{{ banner_image.thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                      <input type="hidden" name="banner_image[{{ language.language_id }}][{{ image_row }}][image]" value="{{ banner_image.image }}" id="input-image{{ image_row }}" /></td>

После добавляем:

<td class="text-center"><a href="" id="thumb-imagesm{{ image_row }}" data-toggle="image" class="img-thumbnail"><img src="{{ banner_image.thumb_sm }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
                      <input type="hidden" name="banner_image[{{ language.language_id }}][{{ image_row }}][image_sm]" value="{{ banner_image.image_sm }}" id="input-imagesm{{ image_row }}" /></td>

Находим:

html += '  <td class="text-center"><a href="" id="thumb-image' + image_row + '" data-toggle="image" class="img-thumbnail"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="banner_image[' + language_id + '][' + image_row + '][image]" value="" id="input-image' + image_row + '" /></td>';

После добавляем:

html += '  <td class="text-center"><a href="" id="thumb-imagesm' + image_row + '" data-toggle="image" class="img-thumbnail"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="hidden" name="banner_image[' + language_id + '][' + image_row + '][image_sm]" value="" id="input-imagesm' + image_row + '" /></td>';

В результате получится так:
Результат изменений в баннеры

Вот файлы, правки в которые вносились выше: Скачать

Теперь можно приступать к изменениям в каталоге. Для примера будут правки в модуле слайдшоу.

Для начала контроллер - /catalog/controller/extension/module/slideshow.php

Здесь находим:

$data['banners'][] = array(

Сначала перед этим добавим:

				if (is_file(DIR_IMAGE . $result['image_sm'])) {
					$image_sm = 'image/'.$result['image_sm'];
				} else {
					$image_sm = false;
				}

А затем после (внутри массива):

'image_sm' => $image_sm,

Вывел изображение без масштабирования т.к. предполагается, что изображения будут заранее подготовлены нужного размера. Соответственно и правок в админке модуля не делал. Для изображения под ПК я также обычно убираю масштабирование.

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

Теперь шаблон модуля. Файл /catalog/view/theme/default/template/extension/module/slideshow.twig
Находим (в двух местах, внутри ссылки и без):

<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />

Здесь изображение выведено классическим способом, тегом img. Для адаптивности можно использовать тег picture с указанием различных вариантов зображения и обязательным img внутри, где будет выведено изображение для основного разрешения. Меняем (дважды) на:

<picture>{% if banner.image_sm %}<source media="(max-width: 768px)" srcset="{{ banner.image_sm }}">{% endif %}<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" /></picture>

Как вариант, прикрепляю файл с кодом (slideshow.twig.zip), который получился у меня. Убрал лишний div, так же здесь id указан для общего контейнера ".slideshow", а не ".swiper-container" и кнопки навигации указаны через id модуля. В стандартном варианте, если на странице выведено несколько слайдшоу, кнопками верхнего можно листать и все что ниже.

Оценок: 1

Комментарии (7)

  1. Немного изменил код шаблона, забыл добавить проверку на наличие этого самого изображения

    Владимир 14 февраля 2024, 05:50 0
    • По прежнему ничего не произошло, на фронте не передается вообще изображение.

      пустое получается.

      дмитрий 15 февраля 2024, 11:13 0
    • Добрый день, не сработал метод, в админке все указываю, на фронте не выводится фото.

      дмитрий 13 февраля 2024, 15:41 0
      • Модуль тот же? Если правки внесены в catalog/controller и шаблон, то или кэш, или шаблон другой используется. Скачайте, посмотрите на всякий случай пример шаблона

        Владимир 14 февраля 2024, 05:43 0
        • Скачал по примеру, шаблон стоковый.

          дмитрий 15 февраля 2024, 11:13 0
          • Все заработало в контроллер забыл прописать 'image_sm' => 'image/'.$result['image_sm'],
            Спасибо!!!

            дмитрий 15 февраля 2024, 11:14 0
            • Супер! :)

              Владимир 15 февраля 2024, 20:31 0
      Надежный хостинг VPS серверов
      • Свои ISO образы
      • VDS с оплатой раз и навсегда
      • Аренда VDS на любой срок, с оплатой по дням
      • Большое разнообразие конфигураций
      • Дата-центры в ЕС и России
      + скидка 10%