ImgsPaste / Работа с фото, видео и файлами / Дополнения MODX / modstore.pro
Внимание, этот компонент требует версию PHP 7.1 или выше! Если ваш сайт использует PHP ниже требуемого, установка этого дополнения может его сломать.
Устанавливает специальный плагин, который позволяет в поле контент вставлять одну или несколько картинок в удобном виде (том числе с разметкой в виде галереи)
с выбором из MIGX TV галереи, ms2Gallery.
Не тестировалось на modx 3.0.
Поддерживаются:
— TinyMCE Rich Text Editor 2.0.0+
— CKEditor 1.4.0+
!!! Если их нет, то пользоваться плагином не получится.
Галереи:
— MIGX
— ms2Gallery
В версии 1.2.0.Для ms2Gallery и CKEditor пока теги и вставка произвольного шаблона в самом окошке НЕ ПОДДЕРЖИВАЕТСЯ.
Т.е. вы сможете спокойно вставлять набор фоток, подключив к ним слайдер и «увеличивалку» в любом месте контента в любом количестве.
Этот инструмент необходим каждому контент менеджеру или владельцу сайта.
Визуальный обзор: Обзор установки, настройка, использования в виде gif анимации.
Другие пакеты пока не поддерживаются. Если Вас заинтересовала поддержка иных редакторов – дайте обратную связь в топике, добавлю быстрее.
В планах поддержка msGallery. Маякните если нужно ускоряться с поддержкой этих дополнений или других.
Пользоваться очень просто:
— Создайте галерею с помощью MIGX пакета, установите TinyMCE RTE 2.0+
— Купите и установите данное дополнение ImgsPaste.
— Зайдите в системные настройки imgspaste – укажите Имя TV галереи с migx, поле картинки в migx, имя чанка сможете заменить на свое потом если необходимы будут коррекции.
— Зайдите в системные настройки TinyMCE Rich Text Editor 2, а именно tinymcerte:
— Для MIGX добавьте плагин IPasteMigx в поле tinymcerte.plugins
— Для Ms2Gallery Добавьте плагин IPasteMs2g в поле tinymcerte.plugins
— Добавьте вывод кнопки в любой из 3х тулбаров, например пропишите IPasteMigx во второй: tinymcerte.toolbar2
— Для CKEditor: впишите нужные плагины в поле настройки: ckeditor.extra_plugins через запятую БЕЗ ПРОБЕЛОВ! IPasteMigx,IPasteMs2g
— Теперь загрузите фотографии в ресурсе в свою галерею migx. Сохраните документ. Перейдите на вкладку с СОДЕРЖИМЫМ.
— пишите текст с пару абзацев. Потом установите курсор где необходимо вставка фото или галереи.
— Нажмите кнопку на панели тулбара (картинка с текстом MIGX) и выберите 1 или несколько фотографий. Нажмите вставить галерею – произойдет вставка шорт кода (чанка) в текст.
— Сохраните документ, откройте текущую страницу и вы увидите вставленные картинки.
Чтобы получилась полноценная галерея – подключите по своему вкусу js плагины: слайдеры, «увеличилки» и т.п.
Не делал из коробки подключение, т.к. большинство людей пользуются разными js плагинами.
Визуальная пошаговая настройка:
1. Вы установили Все и создали TVшку с конфигурацией MIGX. Допустим имя TV gallery, а поле для картинки в конфиге image. Эти имена по умолчанию вбиты в настройки.
2.1 ** Для ms2Gallery Добавьте плагин IPasteMs2g в поле tinymcerte.plugins и пропишите его в тулбаре.
3. Загрузите фотографии в MIGX-галерею или ms2Gallery. Сохраните документ. Перейдите к содержимому поставьте курсор куда нужно в тексте, нажмите кнопку с добавлением галереи MIGX, откроется окно в котором будут картинки и чекбоксы – отметьте нужные, выберите вставить как галерею.
4. Сохраните документ. Проверьте изменения.
Настройки.
imgspaste_ms2gcats — для ms2Gallery папка категории где будет список вставляемых чанков (шаблонов) для менеджера.
С плагином идет 2 чанка-примера вставки галереи.
- imgsPasteMigxGallery – Оболочка и основной чанк вставки его можно назвать шорт кодом, хотя он не такой короткий, вы можете сделать его под себя намного короче. Настройка imgspaste_migxchunck вам поможет. Внутрь чанка передается параметр imgs с номерами ID картинок. А в чанке уже все передается сниппету getImageList.
- imgsPasteMigxGalleryRow – элемент списка самой картинки.
- Аналогично с ms2Gallery: imgsPasteMs2Gallery — вставляемая обертка; imgsPasteMs2GalleryRow — чанк с выводом фото
В этих чанках лишь пример.
Вы можете навесить на них свои классы и функционал галереи.
Например галереи и фотки сделать, как на Яндекс-дзене! Легко.
А вставка фотографии тегом вам позволит просто и быстро
Если есть пожелания для улучшения функционала, встретили баг? Пишите.
Collections
- Главная
- Сниппеты
- Shopkeeper
- Modx Revo admin
- Bootstrap
- CSS
- HTML
- Modx Revo + PDO
- Для сайта
- Проблема MODX REVO
- Главная »
- Modx Revo admin »
- Collections
Ещё одно достоинство компонента MODX Revolution Collections, как уже было отмечено выше, связано с тем, что он не отображает дочерние ресурсы в дереве админки.
В качестве редакторов таблицы может использоваться любой корректный Xtype (строка) или объект JSON.
По умолчанию доступны следующие виды редакторов:
- textfield (для текстовых полей).
- textarea (для текстовых областей).
- modx-combo-boolean (для установки логического значения «Да» или «Нет»).
- numberfield или
{"type": "number field", "allowDecimals": false, "allowNegative": false}(для числовых полей).
Рендереры (функции), посредством которых осуществляется представление данных дочерних ресурсов в полях таблицы:
- this.rendYesNo — Да/Нет (1/0), используется для вывода логических значений.
- Collections.renderer.qtip — отображает значения поля в виде подсказки (при наведении). Обычно используется для вывода полей, содержащих большое количество символов.
- Collections.renderer.pagetitleWithButtons — заголовок (pagetitle) ресурса (в h3 элементе) со ссылкой «Редактирование» и кнопками для обновления (update), просмотра (view), удаления (delete), публикации (publish).
- Collections.renderer.pagetitle — заголовок (pagetitle) ресурса (в h3 элементе) со ссылкой «Редактирование».
- Collections.renderer.pagetitleLink — заголовок (pagetitle) ресурса со ссылкой «Редактирование» (текст заголовка меньше чем
h3). - Collections.renderer.datetimeTwoLines — выводит поле, содержащее дату и время в 2 строки. На первой строке отображает дату, а на второй — время. Отображение даты и времени форматируется в соответствии с системными настройками MODX Revolution.
- Collections.renderer.datetime — выводит дату и время на одной строке. Отображение даты и времени форматируется в соответствии с системными настройками MODX Revolution.
- Collections.renderer.image — выводит поле, содержащее изображение, в виде миниатюры.
17.03.2023
Главная »
Управление изображением с помощью phpThumbOf в MODx Revolution
23 июня 2011 г. | Теги для этой записи: MODx, PHP, веб-разработка
PhpThumbOf — это надстройка MODx Revolution, основанная на популярном php-скрипте под названием phpThumb. Это позволяет вам использовать графические библиотеки на сервере Apache для внесения изменений в изображения на лету.
Эта запись основана на презентации phpThumbOf, которую я сделал на июньской встрече MODx в Хьюстоне, которая демонстрирует некоторые из замечательных вещей, которые мы можем делать для управления изображениями с помощью phpThumbOf в MODx Revolution.
Я не буду рассказывать о том, как загрузить и установить phpThumbOf из репозитория MODx. Я предполагаю, что вы уже загрузили и установили надстройку. Нет никаких других надстроек, которые необходимо установить, чтобы заставить это работать.
Эти примеры созданы с использованием MODx 2.1.0 и phpThumbOf 1.2.1-pl .
Примечание: существует также версия этого дополнения для MODx Evolution под названием phpThumb .
На момент написания этой статьи официальная документация MODx для phpThumbOf довольно скудна. Изначально я думал, что вы можете использовать только
Анатомия вызова phpThumbOf — в качестве выходного фильтра
Выходной фильтр MODx позволяет вам передавать значение элемента через любой из набора фильтров, чтобы изменить его перед загрузкой на страницу.
Синтаксис выглядит так:
[[element:modifier=`value`]]
Первый и наиболее распространенный способ использования phpThumbOf — использовать его в качестве выходного фильтра , присоединив его к основанной на изображении переменной шаблона в MODx.
Для большей ясности я расскажу о создании переменной шаблона на основе изображения.
Сначала вы создадите новую переменную шаблона и назовете ее как хотите. Возьмем, к примеру, следующее:
Поля для создания новой переменной шаблона
Затем выберите «Изображение» в качестве типа ввода в разделе Опции ввода .
Выберите «Изображение» в качестве параметра ввода
Мы выберем следующее изображение в качестве источника нашей переменной шаблона: изображение. Код для вызова этой переменной шаблона выглядит следующим образом:
Как мы упоминали в начале, выходной фильтр модифицирует элемент до того, как он будет напечатан на странице.
Итак, мы присоединяем выходной фильтр phpThumbOf к нашему предыдущему телевизионному вызову, вот так.
[[*tvImage :phpthumbof=`w=120&h=120` ]]
Примечание: Если это вызывается внутри файла TPL или фрагмента, то звездочка становится плюсом: [[+tvImage :phpthumbof=`w=120&h=120`]]
Результатом является новое сгенерированное изображение, на основе изображения, которое вы выбрали для переменной шаблона ‘tvImage’ , размеры которого изменены до 120 на 120 пикселей. Но если вы заметили, он добавил белый фон , чтобы сохранить соотношение размеров нашего изображения неизменным.
Размер изображения изменен до 120 на 120 пикселей
Если вы не хотите, чтобы фон был принудительно установлен, просто оставьте ширину или высоту. Вот что произойдет, если мы укажем только ширину:
[[+tvImage:phpthumbof=`w=120`]]
Он изменяет размер до указанной ширины, а высота просто уменьшается до того, что пропорционально этой ширине.
120 пикселей, только ширина. Высота рассчитывается автоматически.
Просто чтобы вы могли видеть, что возможности изменения размера чрезвычайно гибкие, вот еще один пример с определенной шириной 270 пикселей. Вы даже можете вывести изображение, которое больше исходного изображения. (Не то чтобы это было хорошей идеей).
[[*tvImage:phpthumbof=` w=270 `]]
Обрезка изображения до точного размера мы бы добавили опцию
zoom-crop &zc=1 .[[*tvImage:phpthumbof=`w=120&h=120 &zc=1 `]]
Теперь у нас есть обрезанная версия того же изображения с точными размерами, которые мы указали.
Примечание: Начиная с этой версии (phpThumbOf 1.2.1-pl) гравитация урожая не работает. Таким образом, изменение значения &zc= на «C», «T», «B», «L», «R», «TL», «TR», «BL», «BR» не изменится.
область (верхняя, нижняя, левая, правая и т. д.) изображения, к которой будет привязана обрезка. Он всегда будет центрально-взвешенным.
Фильтры PhpThumb — с чего начинается самое интересное
Теперь, когда вы знаете, как управлять размером изображения, мы перейдем к тому, что я считаю настоящей силой phpThumb: к фильтрам. Я просто выброшу несколько демонстраций фильтров, доступных в phpThumb. Обратите внимание, что мы просто добавляем новые фильтры в конец предыдущих опций phpThumb. Порядок имеет значение. Фильтры применяются слева направо.
Blur
[[*TVImage: Phpthumbof = `w = 120 & H = 120 & zc = 1 & fltr [] = Blur | 10 `]]
120px на 120px с Blurs value of 10
120px на 120px с Blurs at 10.904
120px.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1 &fltr[]=grey `]]
120 на 120 пикселей в оттенках серого 9Закругленные углы фильтр добавляет белый фон в области без изображения, где есть закругленные углы? Мы можем избавиться от этого, переключив тип изображения с JPG на PNG.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1 &f=png &fltr[]=ric|20|20`]]
120 на 120 пикселей, округлено до прозрачного PNG
Границы
Все мы хотим добавить рамки к изображениям. Вы можете сделать это с помощью CSS, конечно. Но бывают случаи, когда вы можете захотеть сделать это внутри самой графики. Я не люблю заходить в Photoshop для таких простых вещей. Это перебор. Итак, взгляните на пример, где я бы использовал phpThumb вместо CSS:
[[*tvImage:phpthumbof=`w=120&h=120&zc=1 &f=png&fltr[]=bord|5|0|0 |FFFFFF&fltr[]=гниль|-15|E4F6FE `]]
Вывод PNG, граница 5px без кривых, установлен белый цвет. Повернуто на -15° с матовым цветом #E4F6FE, соответствующим фону
Поворот изображения
Поворот требует небольшого пояснения. Вы должны указать цвет фона для неграфической области в углах. В этом примере мы используем #006699. Поворот на -45°
[[*tvImage:phpthumbof=`w=120&h=120&zc=1 &fltr[]=rot|-45|006699 `]]
120px на 120px, повернут на -45 градусов
Если вы хотите уменьшить уродство JPG, вы можете увеличить качество JPG (1-100):
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45|006699 &q=100 `]]
120 на 120 пикселей, повернуто на -45° с качеством JPEG 100
Если вы хотите иметь прозрачный фон, просто измените вывод на PNG, как мы делали раньше:
[[* tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45| &f=png `]]
120px на 120px, повернуто на -45° с прозрачным png
Наложение цвета
Фильтр Colorize позволяет накладывать любой шестнадцатеричный цвет на изображение.
Первое значение — это процент, второе — шестнадцатеричное значение.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1 &fltr[]=clr|35|9`]]
120 на 120 пикселей с 35% наложением цвета #9
3 хотите эффект дуэта , просто перед фильтром наложения используйте фильтр оттенков серого, чтобы сначала удалить цвет изображения.[[*tvImage:phpthumbof=`w=120&h=120&zc=1 &fltr[]=gray &fltr[]=clr|35|9`]]
120px на 120px с наложением цвета # 35% 9 поверх изображения в градациях серого, что дает нам эффект двухцветного изображения
Основной текстовый водяной знак
Вы также можете создавать текстовые и графические водяные знаки, используя phpThumb. С помощью текстовых водяных знаков вы можете определить размер, размещение, непрозрачность и даже шрифт TTF, с которым вы хотите, чтобы они отображались.
Необходимо установить множество переменных. Проверьте исходную документацию, чтобы увидеть все варианты.
Вот простой текстовый водяной знак с использованием серверного шрифта по умолчанию:
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=gray &fltr[]=wmt|Код Белафонте|3|T|FFFFFF| |100|20|0||0| `]]
120 на 120 пикселей с обычным текстовым водяным знаком, выровненным по верхнему краю, смещением с полями 20 % переменная шаблона для него? Для этого мы вызываем phpThumbOf как фрагмент, а затем передаем в него URL-адрес изображения и параметры:
Вы все равно можно связать фильтры в конце строки запроса параметров.
Примечание: Если вы хотите увидеть все остальные МНОГИЕ доступные опции, посетите страницу демонстраций phpThumb.
Примечание: У меня не работают тени с переходами.
Вы, наверное, думаете обо всех удивительных вещах, которые можно сделать с этим, чтобы вам не приходилось заходить в Photoshop для простых графических настроек.
Это также дает вам возможность позволить пользователям и редакторам контента добавлять графику на страницы и всегда знать, что они будут отформатированы в соответствии с вашей спецификацией дизайна.
Не стесняйтесь оставлять некоторые из ваших замечательных и умных способов использования phpThumb в комментариях.
Эво-версия этой демоверсии скоро появится.
Информация для directresize — SiteDash, возьмите под контроль свои сайты MODX
DirectResize Revo — это дополнение от vrtc, впервые выпущенное 26 октября 2010 г.
Описание пакета
DirectResize — это подключаемый модуль, который создает эскизы в реальном времени для
изображения контента с помощью Highslide JS. HighSlide — это JS, похожий на лайтбокс.
/greybox/slimbox и многие другие, но я предпочитаю Style гораздо больше.
Вместо того, чтобы всплывать и исчезать с веб-сайта, он дает пользователю
ощущение, что не отделяешь фото от страницы. ПРЕДВАРИТЕЛЬНОЕ ТРЕБОВАНИЕ: я беру
нет кредита для сценария HighSlide.
Единственное, что вам нужно сделать, это
вставьте изображение и измените размер изображения, и будет создана миниатюра
автоматически, это очень полезно, когда ваше изображение занимает место.
Разработка: yar-it.com
Эта версия плагина основана на идее и наработках Арно, автора предыдущих версий DirectResize.
Инструкция по использованию/установке
После установки не забудьте проверить системные настройки плагина!
Детали
- Разработчик(и)
- вртк
- Выпущено
- 27.10.2010
- Первое появление
- 26.10.2010
- Лицензия
- GPLv2
- Поддерживаемые базы данных
- MySQL
- Минимальные требования MODX
- 2
Релизы DirectResize Revo
| Поставщик | Подпись | Выпущено на |
|---|---|---|
MODX. com | 1.3.1-rc1 | 2013-01-25 (10 лет назад) 903:50 |
| MODX.com | 1.0.5-пл | 04.07.2011 (11 лет назад) |
| MODX.com | 1. |