Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Modx phpthumbon: phpthumb — Школа MODX

phpthumb — Школа MODX

Изменение размера

Исходное изображение в 600х800 пикселей изменяем в 200х200 пикселей с помощью опций zc, far и iar

<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200`]]">    
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,far=C,bg=e2e2e2`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,iar=1`]]">

Прозрачность

Исходное изображение в 600х800 пикселей, где вместо неба прозрачный фон, формат изображения png. Преобразуем в миниатюру в 200х200 пикселей с сохранением прозрачности

<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb4.png` &options=`w=200,h=200,f=png`]]">    

Степень сжатия

<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1. jpg` &options=`w=200,h=200,far=C,bg=e2e2e2,q=1`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,far=C,bg=e2e2e2,q=50`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,far=C,bg=e2e2e2,q=95`]]">

Поворот изображения

<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,ra=45`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,ra=-45`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,ra=90`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,ra=180`]]">

Изменение яркости

<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=brit|-255`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1. jpg` &options=`w=200,h=200,zc=C,fltr[]=brit|-25`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=brit|25`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=brit|255`]]">

Изменение контрастности

<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=cont|-255`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=cont|-25`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=cont|25`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=cont|255`]]">

Гамма-коррекция

<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=gam|0. 01`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=gam|1.0`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=gam|5.0`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=gam|10`]]">

Насыщенность

<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=sat|0`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=sat|-10`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=sat|-50`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=sat|-100`]]">

Водяные знаки

<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1. jpg` &options=`w=200,h=200,zc=C,fltr[]=wmi|assets/img/water.png|BR|50|5|5`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=wmi|assets/img/water.png|C|50`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=wmi|assets/img/water.png|*|50|5|5`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=wmi|assets/img/water.png|C|50|||45`]]">

Скругление углов

<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=ric|15|15`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=ric|50|50`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1.jpg` &options=`w=200,h=200,zc=C,fltr[]=ric|100|100`]]">
<img alt="" src="[[phpthumb? &input=`assets/img/phpthumb1. jpg` &options=`w=200,h=200,zc=C,fltr[]=ric|50|15`]]">

phpthumbon документация MODX

  1. вебшкола MODX
  2. Блог
  3. Разработки MODX Revolution
  4. phpthumbon документация
Параметр Описание Значение
input Путь к картинке которую нужно обработать
Возможные значения
Строка
Значение по умолчанию
(пусто)
Примечание
Благодаря этому параметру сниппет может работать как модификатор
options Параметры для класса phpThumb (см. раздел Parameters).
Возможные значения
Произвольная строка с параметрами отделенными друг от друга символом & (амперсанд), а значение параметра определяется после символа = (равенство).
Значение по умолчанию
q=96&src={assets_path}components/phpthumbon/noimage.jpg
Примечание
Значения по умолчанию q и src можно переопределить в системных настройках при помощи параметров phpthumbon.noimage и phpthumbon.quality
Системные настройки
Параметр Описание Значение
phpthumbon.images_dir Папка, которая будет вырезаться из пути в кеш-директории
Возможные значения
Имя папки
Значение по умолчанию
images
Примечание
Относительно директории assets
phpthumbon.quality Качество картинки по умолчанию
Возможные значения
Целое число больше 0
Значение по умолчанию
96
Примечание
Если не задано качество картинки в параметрах при вызове сниппета, то будет использоваться это значение
phpthumbon. cache_dir Имя папки с кешем
Возможные значения
Имя папки
Значение по умолчанию
cache_image
Примечание
Относительно папки assets
phpthumbon.ext Если на сжатие приходит картинка в неизвестном формате, то будет использоваться этот тип
Возможные значения
Расширение имени файла
Значение по умолчанию
jpeg
Примечание
Если на сжатие приходит картинка в неизвестном формате, то будет использоваться этот тип
phpthumbon.noimage Путь к картинки с изображением «картинка не существует»
Возможные значения
Путь к файлу
Значение по умолчанию
{assets_path}components/phpthumbon/noimage.jpg
Примечание
Если картинка указанная в input окажется не доступной или вообще этот параметр пуст, то на обработку поступит картинка указанная в этом параметре
phpthumbon. queue Активация поддержки очередей
Возможные значения
0, 1, 2
Значение по умолчанию
0
Примечание
0 — не использовать очереди; 1 — использовать очередь и не сжимать noimage; 2 — использовать очередь и сжимать noimage под нужный размер
phpthumbon.queue_classpath Путь к файлу с классом QueueThumb
Возможные значения
0, 1, 2
Значение по умолчанию
{core_path}/components/phpthumbon/queue/QueueThumb.class.php
Примечание
В указанном файле должен располагаться класс QueueThumb с публичным статичным методом add(phpThumbOn $ThumbOn, modX $modx). Класс по умолчанию не использует очередей в прямом смысле слова и лишь сохраняет данные в таблицу modx_thumb_images для последующей обработки через процессор из крона.
phpthumbon. error_mode Правила обработки ошибочных картинок
Возможные значения
1, 2
Значение по умолчанию
1
Примечание
1 (по умолчанию) — сжатие noimage с заданными параметрами; 2 — вывод оригинальной картинки без обработки
phpthumbon.noimage_cache Папка с закешированными noimage файлами
Возможные значения
полный путь к любой папке
Значение по умолчанию
{assets_path}components/phpthumbon/cache/
Примечание
Путь к папке в которой уже хранятся noimage нужных размеров
phpthumbon.total_queue Число обрабатываемых заданий из очереди за 1 раз
Возможные значения
от 1 до 10
Значение по умолчанию
1
Примечание
Не более 10. В случае отсутствия значения у этого параметра устанавливается значение по умолчанию — 1
phpthumbon.make_cachename Сниппет который может подменить дефолтные правила формирования кеш имен картинок
Возможные значения
Любое имя существующего сниппета в системе
Значение по умолчанию
(пусто)
Примечание
Сниппет должен вернуть сериализованный массив со следующими ключами: _cacheFileName (имя файла с полным адресом относительно корня сервера), _cacheSuffix (суффикс в имени кеш файла), _globThumb (шаблон поиска других превьюх этого же файла)
06-10-2015 Виктор Матушевский

Переезд в Вену. Осень-зима Articles. Создание блога в MODx Revolution

Please enable JavaScript to view the comments powered by Disqus.

Как быстро доставлять изображения с помощью Modx, используя PhpThumbOn и WebP — учебные пособия

carlo_13

7 декабря 2021 г. , 16:52

#1

Привет всем, это краткое руководство по быстрой доставке изображений с помощью Modx. Много раз я обращался за помощью на форумы, и поэтому я подумал, что было бы неплохо, если бы я мог помочь и другим.

Прежде чем мы начнем: Если вы читаете это из будущего, формат Avif, вероятно, захватил Интернет. На момент написания этого руководства Safari еще не поддерживал изображения Avif, поэтому сейчас нет особого смысла его использовать. Но если вы хотите использовать Avif вместо WebP, реализация должна быть такой же. Также имейте в виду, что для этого вам, вероятно, потребуется использовать как минимум php 8.1, так как это первая версия php, обеспечивающая поддержку изображений Avif.

Также обратите внимание: Я использую phpthumbon, но если использовать другую версию этого плагина (например, phpthumbof), принцип остается тем же.

Итак, приступим.

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

У вас есть два варианта:

  • Преобразование изображений по одному ( пожалуйста, не делайте этого ) с помощью программного обеспечения, такого как фотошоп, и соответствующего расширения Google.
  • Используйте мощь Modx, и пусть ваша CMS/F сделает всю тяжелую работу за вас.

Итак, во-первых, вот как изображение обычно отображается в Интернете:

Потому что до сих пор существует множество браузеров, которые этого не делают. поддержка WebP ( Safari для систем до Big Sur , Internet Explorer …), мы не можем напрямую заменить наше изображение jpg в формате WebP, так как оно не будет отображаться для всех.

Вот что мы будем использовать: 

 
 webp" type="image/webp">

Это очень просто:

  • Ваша система поддерживает WebP => ваш браузер отображает изображение WebP.
  • Ваша система не поддерживает WebP => вы видите jpeg версии

Теперь в дело вступает phpthumbon: мы хотим, чтобы плагин конвертировал наше изображение в WebP

.

1 — Первый шаг: Установите плагин (безумно верно?! Кто знал?)
2 — Второй шаг: Если вы собираетесь вызывать изображение непосредственно в шаблоне или на странице, вы будете использовать код ниже :

 <картинка>

Вот и все! Очень просто!
Теперь ваши изображения будут молниеносными!

Конечно, есть альтернативные варианты, если вы используете телевизор вместо прямого пути к изображению, но вы найдете больше информации в документации каждого плагина. (Не стесняйтесь публиковать свои советы и рекомендации ниже, это может помочь другим).

Но вы поняли!

Ссылки:

developer.mozilla.org

: Элемент Picture — HTML: язык гипертекстовой разметки | МДН

Элемент HTML содержит ноль или более элементов и один элемент, предлагающий альтернативные версии изображения для различных сценариев отображения/устройства.

modstore.pro

phpThumbOn

Павел: Оптимизирован фрагмент phpThumbOf для MODX Revolution

[ОПЛАЧИВАЕТСЯ] Пользовательский фрагмент кода Fancybox с phpthumbon — Marketplace

Сообщество MODX

carlo_13

#1

Привет всем, я ищу разработчика, который мог бы создать пользовательский фрагмент на основе FancyBox и phpthumbon, который можно перетаскивать в текстовый редактор TinyMCE Rich Text Editor.

В идеале сниппет должен выглядеть так (просто идея):
[[fancyboxcustomsnippet &url="imageurl" &alt=".." &caption=".." &size="" &sizedmallscreen=""]]

HTML-часть должна выглядеть так (не удалось вставить из-за форматирования форума):

forum fancy box 2292×430 80,3 КБ

Важно: Фрагмент кода должен быть

  • Совместимость с php 7.3, 7.4 и 8
  • Совместимость с Modx 2.8.*
  • Совместимость с текстовым редактором TinyMCE Rich Text Editor
  • Сниппет должен вызываться кэшированным

Дополнительные функции:

  • Установите размер по умолчанию в бэкенде (настольном и мобильном). Если поля «size» и «sizesmallscreen» пусты, применяется размер по умолчанию.
  • Установить пользовательский размер при использовании плагина (желательно во время перетаскивания в TinyMCE)
  • Выберите изображение непосредственно из медиа-менеджера (желательно во время перетаскивания в TinyMCE)
  • Установить заголовок и alt для изображения (желательно во время перетаскивания в TinyMCE)

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

Источники:

https://fancyapps.com/fancybox/3/

modstore.pro

phpThumbOn

Павел: Оптимизирован фрагмент phpThumbOf для MODX Revolution

МОДКС

Дополнительные возможности MODX | Редактор форматированного текста TinyMCE 2.0.1-pl

Редактор форматированного текста TinyMCE (2.0.1-pl) | TinyMCE 5 для MODX Revolution | Создано Jan Peca для MODX CMS

Что вам нужно?
См. выше

Когда вам это нужно?
Через неделю-две. Но я гибкий.

Какой бюджет в долларах США (или в местной валюте) вы можете предложить для этой задачи?
Это действительно зависит от опыта разработчика. Конечно, это довольно простой php-скрипт, поэтому ваше предложение должно быть реалистичным.

марк

#2

Вы намерены интегрировать его в TinyMCE RTE, предположительно, в качестве своего рода плагина tinymce? Я могу придумать несколько альтернативных решений, которые проще создать и/или использовать, включая ContentBlocks и синтаксический анализ контента при рендеринге для улучшения изображений, но не уверен, что вы открыты для такого подхода.

1 Нравится

bruno17

#3

Это тоже была моя первая мысль.
Похоже на вариант использования ContentBlocks.

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

1 Нравится

carlo_13

#4

марка:

Вы настроены на интеграцию с TinyMCE RTE,

Не совсем, если самое простое решение — вставить фрагмент в редактор и добавить параметры вручную, то меня это устраивает.
Конечно, если плагин TinyMCE осуществим, я также открыт для этого варианта. Но опять же, я бы удовлетворился простым фрагментом.

Что касается ContentBlocks, я никогда раньше им не пользовался, но боюсь, что переход с TinyMCE RTE доставит мне слишком много дополнительной работы. И мне, вероятно, придется установить сниппет/плагин на 3 или 4 веб-сайта, поэтому я не уверен, что это будет рентабельно…

carlo_13

#5

бруно17:

Или они действительно хотят, чтобы редакторы перетаскивали изображения между текстом?

Да, это действительно так

Например, содержимое может выглядеть так:

 
 ......
[фрагмент...

 bruno17 
 #6
 мне все еще кажется, что это работа для ContentBlocks или MIGX. 
 Например, как здесь: 
 MIGX.Varying layout-boxes - Tutorials | Документация MODX
 Также можно сделать это следующим образом: 
 MIGX.Fancybox-изображения с отдельными заполнителями в Richtext-Content - Учебники | Документация MODX
 carlo_13 
 #7
 carlo_13:
 
 На самом деле я не уверен, что это возможно, потому что TinyMCE заменяет  ""  на  ` , который ломает весь код…
 Итак, в конце он ломает код и выглядит так: 
  [[!phpthumbon? &ввод=` 
  Можно ли создать подключаемый модуль TinyMCE, который предотвращает преобразование содержимого [[…]] в HTML?  
 Если это так, то мне было бы очень интересно. Дай мне знать.
 П.С. Я бегло просмотрел MIGX, я не уверен, что это то, что я ищу, но позже я прочитаю его еще раз.
 бруно17 
 #8
 вы не используете двойные кавычки для сниппет-свойств, но обратные кавычки
 маркх 
 #9
 carlo_13:
 Что касается ContentBlocks, я никогда раньше им не пользовался, но боюсь, что переход с TinyMCE RTE доставит мне слишком много дополнительной работы. И мне, вероятно, придется установить сниппет/плагин на 3 или 4 веб-сайта, поэтому я не уверен, что это будет рентабельно…
 Попробовать можно бесплатно, поэтому я определенно рекомендую это. Мне кажется, что это было бы здорово для вашего варианта использования.
 Это также не обязательно переключатель — вы все равно можете использовать TinyMCE для обычного редактирования контента. Это просто поле изображения, которое вы будете использовать для создания шаблонов изображений в picture/srcset, использования возможностей обрезки и т. д. Я бы предположил, что, вероятно, выгоднее получить ContentBlocks, чем нанимать кого-то для создания функциональности, которую вы описываете.
 Другой вариант, на который я намекал, — это использование пути imageSlim. Это дополнение доступно в дополнениях MODX, которые вы применяете в качестве выходного фильтра к содержимому, которое затем анализирует HTML и проверяет, нужно ли изменять размер каких-либо изображений. Что-то подобное можно было бы расширить, чтобы не просто изменить размер одного изображения, но превратить его в пример разметки, которую вы разместили динамически.
 carlo_13 
 #10
 Я, наверное, посмотрю на ContentBlocks и посмотрю, работает ли он.
 На самом деле, все остальные решения невозможны с TinyMCE, я понял, что редактор все конвертирует в HTML.
 «Backtics» или «&» преобразуются в  `  и  &  , что, очевидно, разбивает все отдельные куски и фрагменты…
 Хотя это не из-за самого плагина, я сообщил о проблеме на Github.
 В любом случае спасибо за помощь.
 бруно17 
 #11
 Другим вариантом может быть использование Fred
 jako 
 #12
 Я не могу воспроизвести проблему с TinyMCE на разных хостах. Вставьте вызов фрагмента в поле TinyMCE и откройте окно исходного кода TinyMCE с помощью  Инструменты -> Исходный код  пункт меню. Если обратные кавычки не преобразуются в  `  в окне исходного кода, преобразование происходит во время сохранения ресурса.
 carlo_13 
 №13
 Привет Яко и спасибо за ответ.
 Я прикрепил код ниже, если вы хотите провести какой-либо тест на своей стороне (  Обратите внимание, что я заменил бэктиксы на " из-за форматирования форума ).
  png" data-caption="Подпись к одному изображению">
Alt для изображения

 
 Но это должно выглядеть так: 
 причудливая коробка форума 2292×430 80,3 КБ
  •  Если я вставлю фрагмент прямо в редактор полей, это не нарушит обратную связь, но изменит код, добавив много 
     
  •  С другой стороны, если я скопирую и вставлю код в исходный код, возникнет проблема, о которой я упоминал ранее.
 как 
 №14
 Я могу воспроизвести эту проблему с помощью вашего кода. TinyMCE заменяет обратные кавычки внутри атрибутов HTML:
 
test

 
 преобразуется в
 
Тест

 
 Вне атрибута заменяется только амперсанд (который будет проанализирован прямо в MODX):
 
[[!phpthumbon? &input=`https://via.placeholder.com/1920x1080.png` &options=`w=400&h=210&zc=1`]]

 
 
[[!phpthumbon? &input=`https://via.placeholder.com/1920x1080.png` &options=`w=400&h=210&zc=1`]]

 
 Я не думаю, что вы можете изменить поведение TinyMCE, чтобы обойти эту проблему. Вы должны использовать фрагменты MODX для этого варианта использования.
 1 Нравится
 carlo_13 
 №15
 Да, это то, о чем я думал, но все равно спасибо за попытку Jako
 Кстати, я заметил, что на странице дополнений также есть CKEditor. Безопасно ли использовать или я должен придерживаться крошечного?
 carlo_13 
 №16
 бруно17:
 Также можно сделать так: 
 MIGX.Fancybox-изображения с отдельными заполнителями в Richtext-Content - Учебники | Документация MODX
 Привет, Бруно, я попробовал упомянутый вами пример с TinyMCE, и он работает, ну, по крайней мере, Tiny не ломает фрагмент . 
 Я еще не пробовал с phpthumbof, но попробую.
 бруно17 
 # 17
 Использование phpthumbof или pthumb в чанке getImageList — tpl ничего не сломает, так как вы просто устанавливаете заполнители в RTE. Анализ фрагментов и замена заполнителей происходит на стороне сервера во время выполнения. Таким образом, это не касается контента в RTE.
 как 
 # 18
 Я проверил поведение в TinyMCE RTE 1.4.0. Там же конвертируются обратные кавычки. Не могли бы вы сказать мне, какие проблемы возникают при разборе этого контента? Возможно, это дегрессия в MODX 2.x?
 carlo_13 
 # 19
 как:
 Не могли бы вы рассказать мне, какие проблемы возникают при синтаксическом анализе этого содержимого?
 Все картинки ломаются, работает только ссылка href.
 как:
 Возможно, это дегресс в MODX 2.x?
 Ой, мне жаль, что я не могу помочь с этим.
  PS  : Раньше я использовал CKEditor, но он конвертировал только  и  в html, поэтому код не нарушался. У меня нет никаких предпочтений, но я выбрал TinyMCE, потому что он обновляется чаще (собственно, если не ошибаюсь)
 This is according to TinyMCE docs: 
  The base entities  <   >   &   '  and  "  will always be entity encoded into their named equivalents. Though  '  and  "  will only быть закодированы в значениях атрибутов, а  <   >  будут закодированы только в текстовых узлах. Это правильно и в соответствии со спецификациями HTML и XML. 
 Думаю, это невозможно… но метод Бруно, кажется, помогает.
 carlo_13
Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *