Отображение превьюшек для svg-картинок в ТВ типа "Изображение"

Сегодня обнаружил, что из коробки тв-шки с картинками не умеют показывать превью после выбора картинки. Всё дело в том, что по-умолчанию все картинки скармливаются phpThumb чтоб сгенерить превью нужного размера. Это логично, но не учитывается вариант с svg — картинка векторная, и пхпТумб не может сгенерить превью.
То, что я сделал — не панацея, и я отдаю себе отчёт почему я это сделал и что это не универсальное решение, но, тем не менее, вероятно кому-то в его ситуации это тоже подойдёт.

Итак, вот что надо сделать:

  1. Открыть шаблон по адресу manager/templates/default/element/tv/renders/input/image.tpl
  2. В нём есть 2 места, где выводится изображение — первое в самом начале — это когда мы просто загружаем форму с уже добавленной картинкой, и второе ближе к концу внутри яваскрипта — это когда пользователь выбрал изображение в файловом менеджере только что и надо обновить превьюшку. Не смотря на схожесть с феном, шаблонизатор в этих шаблонах используется другой — смарти, он похож по синтаксису, но намного более скудный по возможностям, но решение есть.
  3. Вначале файла надо сделать вот такую замену:
    ...
    <div id="tv-image-preview-{$tv->id}" class="modx-tv-image-preview">
    {if $tv->value}
        {if $tv->value|substr:-4:4 == '.svg'}
            <img src="/img/{$tv->value}" alt="" width=300 height=200 />
        {else}
            <img src="{$_config.connectors_url}system/phpthumb.php?w=400&h=400&aoe=0&far=0&src={$tv->value}&source={$source}" alt="" />
    {/if}
    ...
    Тут всё просто — если в содержимое TV заканчивается на .svg то мы выводим просто тег имг с фиксированными значениями ширины и высоты. Тут надо оговориться, у меня кастомный медиаисточник, поэтому я написал /img/ вначале, если у вас свой источник, или источник по умолчанию, то и урл должен быть соответствующий, например для дефолтного надо просто слеш вначале поставить.
    Ну а если это не свг, то оставляем оригинальный вывод через пхпТумб.
  4. Во вотором месте делаем следующее:
    ...
    if (Ext.isEmpty(data.url)) { //тут пока без изменений
    	d.update('');
    } else {
            //а вот тут надо вклинить нашу проверку на свг, на этот раз уже на яваскрипте:
    	if (data.url.includes('.svg')) {
    		d.update('<img src="/img/'+data.url+'" alt="" width="300" height="200" />');
    	} else {
            //тут остаётся без изменений.
    	{/literal}
    		d.update('<img src="{$_config.connectors_url}system/phpthumb.php?w=400&h=400&aoe=0&far=0&src='+data.url+'&wctx={$ctx}&source={$source}" alt="" />');
    	{literal}
    	} // не забудь закрыть скобочку!
    }
    Tоже понятно — теперь у нас в руках есть вся мощь яваскрипта, так что проверяем наличие подстроки '.svg' и, в зависимости от результата, делаем или свой вывод или дефолтный
  5. Готово! Теперь в формах ресурсов, или мигх будут отображаться превьюшки для .svg
В этом решении не учитывается работа с медиасорцами, а точнее учитвыается конкретно мой случай, если у вас более хитрые настройки медиасорсов, это тоже не проблема, просто надо будет больше проверок и, соответственно, больше вариантов вывода.
Ну и надо понимать, что при обновлении системы это дело слетит, так что надо держать это в уме при обновлении. Повторюсь — это костыльное решение, но свою задачу оно выполняет, так что используйте осознанно.
Антон
14 февраля 2020, 20:47
modx.pro
2
1 414
+6
Поблагодарить автора Отправить деньги

Комментарии: 11

Николай
14 февраля 2020, 22:24
0
Ну и надо понимать, что при обновлении системы это дело слетит, так что надо держать это в уме при обновлении.
Я думаю проблему можно решить создав кастомное ТВ-поле:

Custom Template Variables
    Антон
    14 февраля 2020, 22:42
    0
    Ну если так делать, то это под свгшки отдельное поле, или полностью писать свой тв для картинок. Выглядит, как оверкилл.
      Николай
      14 февраля 2020, 23:17
      0
      Ну почему, сделать похожее тв один в один, только с изменениями нужными. Зато в будущем не натыкаться на эти грабли.
      Yurij Finiv
      14 февраля 2020, 23:24
      +1
      Уже частично сделано планирую через 2 недели доработать iconTV

      P.S. плохо делать правки в ядре.

      github.com/CrazyBoy49z/iconTV/issues/7
      Павел Бигель
      15 февраля 2020, 13:35
      0
      Решение оно конечно решение, но мэдскилз лютый.
      Как выше заметили — править ядро недопустимо
        Антон
        15 февраля 2020, 14:13
        0
        Именно поэтому я дисклаймер и написал, что я понимаю, что я делаю.
        Павел Романов
        15 февраля 2020, 18:21
        +3
        Странно, у меня нормально генерятся:


        Путь:
        site.ru/connectors/system/phpthumb.php?w=400&h=400&aoe=0&far=0&f=png&src=icons/tg.svg&wctx=web&source=2
          Антон
          15 февраля 2020, 21:40
          0
          Хм, интересно. Последняя версия модх?
            Иван Бочкарев
            15 февраля 2020, 22:41
            +2
            Вопрос не версии MODX, а в хостинге
              Антон
              15 февраля 2020, 22:43
              0
              Типа разные либы для пережатия картинок?
                Павел Романов
                16 февраля 2020, 10:41
                +1
                Да, верно. Проверил на локалке — не работает, на хостинге все ОК.
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          11