Поступила задача по наполнению контента в интернет-магазине на движке OpenCart. Буквально 10-12 страниц, оформить готовый текст, разместить картинки и прикрутить скрипт соцсетей. Для практикующего контент-менеджера дело буквально на полчаса, а вот человеку, который редко верстает контент с помощью html/css и плохо знающему данную CMS, придется попотеть. В общем, пишу заметку, как решила проблему со вставкой горизонтальных картинок в текст. Вдруг кому пригодится, а может кто и дополнит мое решение.
Суть задания: в тело текста вставить по три картинки в ряд, растянутые по центру. Адаптивность подразумевается по умолчанию.
Проблема в том, что в OpenCart картинки следуют вертикально, так что стандартное <img src=" "> <img src=" "> <img src=" "> не проходит. Нужно оборачивать в блок и прописывать стили. К тому же изображения нужно сделать одинакового размера и растянуть по ширине.
Где в OpenCart хранятся изображения
Путь к файлам изображений: /image/catalog/… Загружать можно через менеджер изображений, если нет полноценного доступа к файловой системе.
Может я пошла слишком сложным путем, но просто открыла дубль своей страницы → вкладка "данные" → нажать "изображение" → откроется менеджер изображений, где можно создавать папки и загружать файлы.
Как сделать изображения одинакового размера
Тут я, конечно же, пошла на хитрость, так как у заказчика в загрузках было две с половиной картинки, в основном товаров, к тому же плохого качества. И мне дали «добро» брать подходящие изображения из сети. Так что я накачала подходящие картинки одинакового размера 450х450, и назначила width 30%. Для пущей верности указала margin-right и left 10px.
Как поставить три картинки горизонтально по центру в ОпенКарт
На поиск решения убила не менее двух часов. То картинки тесно ютились в центре, то в мобильной версии уползали за горизонт. Если в редакторе у меня проблем с изображениями не возникало, то OpenCart выдавал мне какую-то муть. А ведь я не верстальщик, да и правки в основных стилях не могу вносить.
В общем, путем долгих манипуляций помогло такое вот решение:
Сначала все тестила через style параграфа и самих картинок, а когда добилась идеального результата, просто перенесла стиль в редактор шаблона.
На ПК мое творение выглядит так:
На мобильном (тьфу-тьфу) тоже все отображается корректно:
Так что теперь можно спокойно применять данный стиль ко всем изображениям на страницах в рамках моего ТЗ.
Где в OpenCart находится настройки темы и дополнительные стили
Ну это на всякий, вдруг кто-то ищет заветную вкладку битых полчаса (как и я сегодня):
P. S. Через обычных редактор работать с изображениями не советую, все-равно придется лезть в исходный код и делать правки. А вообще, буду рада комментариям от спецов по OpenCart)