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

Изменения в БД

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

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

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

Изменения в админке

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

Модель /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'],

Контроллер /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),

Шаблон /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,

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

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

Шаблон модуля slideshow

Файл /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 модуля. В стандартном варианте, если на странице выведено несколько слайдшоу, кнопками верхнего можно листать и все что ниже.