SVG логотип в OpenCart

OpenCart
1 мин. на чтение

Повсеместное использование SVG сегодня, особенно если говорить про логотипы в веб приложениях и сайтах легко объяснить. Зоопарк разрешений экранов с каждым годом только увеличивается, а это значит, что постоянное появление все более и более «разрешенистых» экранов неизбежно. К слову, я сейчас пишу статью на макбуке с разрешением экрана меньшим, чем на моем смартфоне.

Например, обычный растровый логотип размером в 250х40 пикселей, при попытке отобразиться на смартфоне с FullHD будет ну очень страшный, его размажет как яйца в завтраке Макдональдса. Кстати, вот примерно так:

А вот этот же логотип, но уже в SVG формате.

 

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

SVG добивается такой четкости очень просто – рисование «изображения» происходит непосредственно в браузере устройства по кривым. А какой длинны будет кривая 10 пикселей или 110 это уже не важно.

Разрешаем SVG в OpenCart 2.х

Почему 2.х? Да мне просто лениво было писать под другие версии инструкции, если вы разработчик то и сами разберетесь по этому примеру. Единственное скажу, что пока по непонятной причине в OpenCart 3.x в атрибуте src="" тега <img> для svg отображается не адрес ресурса (типа /image/catalog/image.svg), а серверный путь (/home/var/www/hostname/image/image.svg), что не позволяет php-скриптам получить доступ к файликам. Понятное дело, что нужно ковыряться в библиотеке image, но у меня на это времени не нашлось.

Обновлено 07.01.2019 Проблема решена как в тексте статьи так и в ocmod, ссылка на который дана в конце статьи.

Решить проблему, описанную выше просто. Идем в admin/model/tool/image.php и после:

$extension = pathinfo($filename, PATHINFO_EXTENSION);
добавляем:
if('svg' == $extension) {
            if ($this->request->server['HTTPS']) {
                return HTTPS_CATALOG . 'image/' . $filename;
            } else {
                return HTTP_CATALOG . 'image/' . $filename;
            }
    	}
Аналогичную процедуру надо произвести для фронтенда, т.к. формирование размеров файлов (соответственно и пути к кешу происходит отдельно для пользовательской и админской части).
Идем в catalog/model/tool/image.php, после:
$extension = pathinfo($filename, PATHINFO_EXTENSION);
добавляем практически аналогичный административной части код (все потому, что название php констант отличается)
if('svg' == $extension) {
            if ($this->request->server['HTTPS']) {
                return HTTPS_SERVER . 'image/' . $filename;
            } else {
                return HTTP_SERVER . 'image/' . $filename;
            }
    	}

Обновлено 07.01.2019. Проблема с путями решена.

Так вот вернемся к 2.х. При попытке загрузить файл с разрешением svg, вам будет сообщено, что это неверный тип файла. Чтобы это исправить, для начала разрешим загрузку svg файлов на сервер.

Для этого идем в admin/controller/common/filemanager.php

// Get files
 $files = glob($directory . '/' . $filter_name . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}', GLOB_BRACE);

сюда нужно добавить типы SVG строчными и капсом (кто не знает, image.svg и image.SVG это для линукс файловых подсистем разные файлы).

$files = glob($directory . '/' . $filter_name . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF,svg,SVG}', GLOB_BRACE);

Далее

// Allowed file extension types
 $allowed = array(
 'jpg',
 'jpeg',
 'gif',
 'png'
 );

Заменяем на:

// Allowed file extension types
 $allowed = array(
 'jpg',
 'jpeg',
 'gif',
 'png',
 'svg'
 );

И еще немного:

// Allowed file mime types
 $allowed = array(
 'image/jpeg',
 'image/pjpeg',
 'image/png',
 'image/x-png',
 'image/gif'
 );

Заменяем (добавляем):

// Allowed file mime types
 $allowed = array(
 'image/jpeg',
 'image/pjpeg',
 'image/png',
 'image/x-png',
 'image/gif',
 'image/svg+xml'
 );

Конечно же для самых ленивых (как вы пост до конца дочитали?!) ссылочка на мое ocmod дополнение на офф сайте opencart.com, которое делает все это само.

SVG enable for OpenCart 2

Игорь Чишкала

Директор по технологиям в SoftForge.
Люблю ИТ, пишу технические статьи в этом блоге или для сайта фриланс-биржи Upwork. Кодю на PHP с использованием фреймворков Laravel или Symfony.

Оцените автора
Авторский блог Игоря Чишкалы
Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

  1. Paul

    Класс! Спасибо большущее, очень помогли

    Ответить
    1. Игорь Чишкала автор

      Всегда пожалуйста

      Ответить
  2. Виталий

    Для opencart 3.0.2.0 Работает отлично! Единственное, что в админке, там где загружаешь фото логотипа он будет отображаться криво. А на сайте четко! Спасибо!

    Ответить
    1. Ihor Chyshkala

      Да, есть такое. Постараюсь исправить, когда руки дойдут.

      Ответить
  3. Igor

    Игорь, когда вы сделаете опции для svg-файла в opencart 3.0. Могу ли я надеяться на будущее? Заранее спасибо, Игорь

    Ответить
    1. Ihor Chyshkala
      Ответить
  4. Алексей

    Подскажите пожалуйста, а как быть с письмом системным, там пропал логотип

    1
    1
    Ответить
  5. игорь

    Добрый день работает, но надо поисправлять везде
    ‘image/svg+xml’,(запятую в конце ) в окмоде все есть а вот здесь нет в тексте, я понимаю хитрованный ход такой чтоб приложения скачивали и еще описать редакцию файла
    admin/model/tool/image.php в окмоде есть на сайте нет.

    Ответить
    1. Ihor Chyshkala

      Очепятка обычная, исправлю. Проблему с путями тоже решил и в статье и в ocmod.

      Ответить
  6. Фред

    Не правильно пути ставит , хуйня модуль

    Ответить
    1. Ihor Chyshkala

      Смотря под какую версию ОС вы пытаетесь его поставить :) Мой код написан с учетом бекенда 2.3, кроме того проверьте корректность всех правок. Что-то забыли и вот уже «модуль» виноват. Кеш чистили?

      Ответить
  7. Oleg

    Подскажите, почему в ocStore 2.3.0.2.3 в админке и каталоге не отображается лог после загрузки.

    Ответить
  8. Ленар

    Спасибо. Все отлично работает.

    Ответить
    1. Ihor Chyshkala

      Да пожалуйста :)

      Ответить
  9. Алекс

    Зачет! Работает 2.3.0.2
    Спасибо!

    Ответить
  10. Роман

    Большое спасибо! все работает!

    Ответить
  11. Роман

    В письмах (покупателю и технические) логотип не отображается. Подскажите, пожалуйста, как исправить?

    Ответить
    1. Ihor Chyshkala

      Нужно поправить шаблон письма и ручками прописать картинке размеры. Например так:
      img src="path/to/logo.svg" width="100" height="100" alt="Logo"

      Ответить
  12. Вячеслав

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

    Ответить
  13. Виктория

    Благодарю за статью!

    Ответить
  14. Влад

    Игорь, добрый день!
    Установил ваш модуль, и в свое время он меня очень сильно спас:) Работало все исправно
    Уже после этого установил множество разных модулей нужных на то время. Сейчас снова встал вопрос о загрузке SVG, но редактор у меня почему то пропал( Я так понимаю из-за конфликта с каким то из новых модулей.
    Попробовал переустановить ваш модуль — не заработало. Попробовал сделал действия из статьи выше — почему то пропало диалоговое окно выбора изображений, то есть я на нажимаю на миниатюру картинки, далее на карандаш, чтобы выбрать изображение, но файловый менеджер не появляется(
    Подскажите пожалуйста, в чем может быть проблема?

    Из позже установленных модулей:
    OCfilter
    Simple
    WebP Image
    и разные модули по типу кнопки Уатсап и так далее

    Ответить