Как вставить изображение в modx

Управление modx

Всем доброго дня! Сегодня мы рассмотрим основные моменты, как пользоваться системой Modx и её редактором TineMCE

FAQ. Часто задаваемые вопросы по управлению Modx.

Видео инструкция:

Текстовая инструкция:

Ответы:

1. Редактирование меню? к вопросам

Меню для сайта делают программисты. В нашем примере сделано выпадающее меню под номером
1 и боковое меню под номером 2

Редактирование меню в modx

1 меню содержит в себе все документы в виде дерева.

Для изменения верхнего меню и бокового нужно менять документы в разделе Верхнее меню(47)

Что можно изменить: Нажав на нужную страницу или раздел правой кнопкой мыши, выберите Редактировать

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

При нажатии правой клавиши мышки на любом из документов выскочит панель следующего вида:

Редактирование документа

Для этого нужно нажать на иконку «Новый ресурс» в левом верхнем углу,под словом «Главная» или правой кнопкой мышки вызвать «Панель редактирования» у одного из ресурсов слева и выбрать «Дочерний Ресурс»

Далее вы увидите форму следующего вида:

Добавление нового ресурса в MODx

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

*Например, при добавлении свежей Новости после нажатия «Публиковать» время публикации будет выставлено автоматически. Если нужно время исправить, его можно выставить в ручном режиме в разделе «Настройка страницы—Дата Публикации»

3. Modx TinyMCE :Вставка/редактирование текста,вставка/редактирование изображений и медиа объектов,вставка/редактирование таблиц,вставка/редактирование ссылок? к вопросам

Редактировать тексты можно в Содержимое ресурса, давайте рассмотрим, какие возможности есть у редактора:

редактирование текста и страниц в modx

редактирование текста и страниц в modx

вставка изображения в modx

вставка таблиц в modx

После загрузки видео, зайдите на свой видеоролик. Внизу вы уведите кнопочку «Встроить/Получить код видео/Embed Video». Нажав на неё, вы получите код, который сможете встроить себе на сайт, скопируйте его

Как получить код Видео

Для вставки видео на сайт, в поле «Содержимое ресурса» на верхней панели есть иконка

Вставка видео в TinyMCE Modx

Источник

Как вставить изображение на сайт MODX Revolution

Для оживления информации на сайте, для наглядности, например, какого-либо рода руководства, на сайте используются изображения, фотографии, графики и другая графическая информация.

Для того чтобы вставить картинку на сайт MODX Revolution, следует открыть необходимую страничку для редактирования.

Ставим курсор слева от абзаца, где должно быть изображение.

Кликаем на иконку рядом с полем «Адрес». Выпадет окно:

В левой части окна видим папки, образующие файловую систему сайта на MODX Revolutio. Если папок не видно, следует кликнуть по треугольнику слева от вкладки «Файлы», дерево файлов раскроется.

Мастера, занимающиеся созданием сайта, для вашего удобства создали папку в самом низу, в данном случае она носит название «z-info». В ней будут храниться ваши изображения, прайсы, необходимые для скачивания документы. Нажимает на эту папку:

Треугольник пропадает, что свидетельствует о том, что папка открыта. Поскольку она пустая, правое широкое поле тоже пустое.

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

Выбираем файл с компьютера и кликаем по нужному:

Причем, выбирать можно любой файл: изображение, текстовый документ, документ в pdf или любом другом формате. Загружать можно сразу несколько файлов.

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

После этого, снова возвращаемся к первоначальному окну.

Обязательно заполняем поле «описание», поскольку это достаточно весомый тег для поисковых систем, если вам важно поисковое продвижение сайта. Описание необходимо для тех пользователей, кто отключает возможность загрузки картинок в браузере.

Перейдя по вкладке «положение», мы, при необходимости, можем изменить размер изображения. Если размер менять не нужно, то и переходить по вкладке не обязательно.

После всех манипуляций, нажимает кнопку «Вставить» в левом нижнем углу окна. В результате, получаем, примерно, такой результат:

Чтобы изображение у нас заняло предназначенное для этого место, кликаем по вкладке «Стиль» и из выпадающего списка выбираем один из стилей для изображения. В данном случае, pravo – картинка переместиться вправо с обтеканием текстом, levo – займёт позицию слева, centr – расположится по центру. После этого сохраняем.

Точно таким же образом, как и изображение, мы закачиваем в папку на сайт прайс, текстовый документ или другой файл.

Допустим, нам требуется разместить документ для скачивания его пользователями. Мы выделяем область текста или картинку, которая будет служить ссылкой.

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

Ссылка закрепляется. Остается только сохранить документ, и ваша страница с изображениями и ссылками опубликована.

Источник

УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Уроки MODx Revolution

Урок 7. TV параметры MODx. Добавление изображений ресурсам

В этом уроке мы рассмотрим один из самых интересных моментов в MODx – переменные шаблона или, как их чаще всего называют, TV параметры (не путать с телевизорами, название пошло от сокращения «template variables»).

Вы уже заметили, насколько гибко можно управлять содержимым на странице и выводом самих шаблонов, так вот – это еще не все. Для каждого шаблона вы можете также добавить дополнительные поля, которые впоследствии можно выводить на странице с помощью специальных плейсхолдеров.

Использовать TV параметры будем при добавлении изображений новостей и выводе этих изображений на главной странице с кратким описанием новости.

Создаем TV параметр

1. Перейдите на вкладку Элементы и нажмите на ссылку Новый Дополнительное поле (TV).

2. На странице создания TV параметров заполните поля формы:

Название: img-news

Внимание: имя параметра не может содержать пробел.

Подпись: Изображение для страницы.

Описание: сопроводительный текст, который даст пользователю представление о том, где будет использоваться дополнительное поле. Описание будет отображаться на странице редактирования ресурса под заголовком TV параметра. В нашем случае: Изображение для ресурса. Для новости должно быть 60px на 60px.

3. Перейдите на вкладку Параметры ввода в поле Тип ввода (с помощью этого поля вы можете выбрать, какого типа будет дополнительное поле для вашего шаблона). Установите Изображение.

4. Перейдите на вкладку Доступно для шаблонов, здесь можно указать шаблоны, для которых необходимо создать TV-параметр. Мы помним, что для ресурсов с нашими новостями установлен шаблон 2 колонки, поэтому установите галочку рядом с ним, чтобы шаблон мог использовать созданный TV параметр.

5. После заполнения полей сохраните TV параметр нажатием кнопки Сохранить.

6. Ну вот и все, мы только что создали TV параметр и подключили его к шаблону 2 колонки. Отправляемся на страницу редактирования новости и смотрим, что же у нас изменилось.

Перейдите в ресурс первой новости. На вкладке Дополнительные поля (TV) появилось поле для загрузки изображения. Тут-то мы и видим заголовок и описание, которое вводили при создании TV параметра.

Добавляем изображения для ресурсов

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

На рисунке ниже показан внешний вид этого файлового менеджера.

8. Создайте папку news в каталоге assets и в нее поместите несколько изображений размером 60x60px, которые в дальнейшем будем выводить на главной странице. Щелкните правой кнопкой мыши по названию папки assets, т.к. внутри нее создаем новую папку.

9. Перейдите в папку news и нажмите кнопку Загрузить файлы.

10. Выберите все 5 изображений из папки news из файлов к уроку, которые Вы скачали в самом начале – это папка distr_MODx и нажмите Загрузить.

11. Файлы должны появиться в окне диспетчера файлов.

12. Добавьте для каждой новости по одному изображению. После добавления изображения не забывайте сохранять ресурс.

Вывод новостей с изображениями на главной странице

Теперь, когда изображения к новостям прикреплены, давайте попробуем вывести блоки с кратким описанием новостей и изображениями на главной странице.

Вот как выглядит блок с новостями на главной странице:

HTML код, отвечающий за вывод этого блока находится в чанке MAIN—CONTENT

Проанализировав html-разметку в чанке, мы видим, что блок новостей на главной странице оформлен в виде списка ul, и каждая новость представляет собой пункт списка li, при этом последняя новость отмечена CSS-классом last.

Для вывода новостей на главной странице будем использовать сниппет pdoResources, который входит в состав пакета pdoTools.

Создаем шаблоны pdoResources для вывода новостей

Код вывода одной новости имеет следующий вид:

plusbusiness/images/ demo/60×60.gif» alt=»» />Nullamlacus dui ipsum conseque loborttis

Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.

Здесь идет вывод изображения, заголовка новости, краткого описания и ссылки на полный текст новости. Берем этот код за основу нашего шаблона pdoResources и начинаем заменять статические данные на специальные теги.

Заголовок новости: [ [+pagetitle]]

Краткое описание новости: [ [+introtext]]

URL страницы с полным текстом новости: [ [

Обратите внимание, что для вывода изображения мы используем название созданного нами TV параметра.

12. В категории Новости создайте новый чанк news-main с кодом:

[ [+pagetitle]]

Этот чанк мы будем использовать в качестве шаблона pdoResources для всех новостей на главной странице.

13. Затем создайте чанк news-main-last, который будет использоваться в качестве шаблона для последней новости, и помещаем в него:

[ [+pagetitle]]

Шаблон для последней новости отличается от шаблона для остальных новостей только наличием у селектора li CSS-класса last.

14. После этого необходимо на главную страницу поместить вызов pdoResources, для этого отправляемся редактировать созданный ранее чанк MAIN-CONTENT и вместо списка ul поместите конструкцию вызова pdoResources, чтобы у Вас в чанке MAIN-CONTENT оказалось следующее содержимое (не забывайте про ID-ресурса):

[ [pdoResources? &parents=`5` &limit=`3` &tpl=`news-main` &tplLast=`news-main-last` &includeTVs=`img-news` &prepareTVs=`1`]]

В этой конструкции вызова сниппета мы используем следующие свойства:

&parents – указываем ID папки, с которой берутся новости, в нашем случае у вас может быть другое число, которое вы можете увидеть в дереве документов MODx.

&limit – число отображаемых документов. В нашем случае на главной странице предусмотрен вывод трех новостей.

&tpl – указываем название чанка, который будет использоваться в качестве шаблона вывода новости. В нашем случае это шаблон news-main.

&tplLast – указываем название чанка, который будет использоваться в качестве шаблона вывода последней новости на странице. В нашем случае это шаблон news-main-last.

&includeTVs – список ТВ параметров для выборки, через запятую.

&prepareTVs=`1` – список ТВ параметров, которые нужно подготовить перед выводом. «1», что означает подготовку всех ТВ, указанных в &includeTVs

Более полный список параметров для сниппета pdoResources можно посмотреть в документации по адресу https://docs.modx.pro/ komponentyi/pdotools/ snippetyi/pdoresources

Если вы все сделали правильно, то внешний вид новостного блока на главной странице примет следующий вид:

Обратите внимание, что когда Вы используете созданный TV параметр в шаблоне pdoResources, то вызов осуществляется с помощью конструкции вида: [ [+tv.name]], если же вы захотите вывести содержимое дополнительного поля непосредственно на странице ресурса, то конструкция вывода TV параметра будет иметь вид: [ [*name]]. Это касается и всех стандартных полей, таких как [ [*pagetitle]], [ [*longtitle]], [ [*introtext]] и других полей.

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

Рассмотрев возможные значения типов параметра, Вы, безусловно, поймете, какую функциональность несет в себе это расширение MODx. Помимо добавления изображений Вы можете прикреплять к ресурсам: текстовые поля, поля для ввода даты, поля для прикрепления файла, поле для URL, для e-mail, чекбоксы, радиокнопки, выпадающие списки, текстовые поля textarea и даже дополнительные поля с визуальным редактором.

Одним словом, инструмент очень мощный и Вы можете поэкспериментировать с различными TV параметрами MODx самостоятельно.

Вывод слайд-шоу на главной странице с помощью сниппета pdoResources

Настроим jQuery слайд-шоу на главной странице

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

Первым делом давайте посмотрим на html-разметку, которая отвечает за вывод нашего слайд-шоу. У нас этот код вынесен в отдельный чанк GALLERY.

This is a W3C standards compliant Open Source free CSS template from os-templates.com OS This template is distributed under a Creative Commons Attribution-Share Alike 3.0 Unported License, which allows you to use and modify the template for both personal and commercial use when you keep the provided credit links in the footer.

Cursus penati saccum ut curabitur nulla.

Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet. Nullain convallis ris elis vest liberos nis diculis feugiat in rutrum. Suspendreristibulumfaucibulum lobortor quis tortortor ris sapien sce enim et volutpat sus. Urnaretiumorci orci fauctor leo justo nulla cras ridiculum…

Cursus penati saccum ut curabitur nulla.

Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet. Nullain convallis ris elis vest liberos nis diculis feugiat in rutrum. Suspendreristibulumfaucibulum lobortor quis tortortor ris sapien sce enim et volutpat sus. Urnaretiumorci orci fauctor leo justo nulla cras ridiculum…

Если проанализировать этот html-код, Вы увидите, что каждый слайд, который состоит из изображения, текста описания и ссылки на подробное прочтение представлен в виде пункта li, маркированного списка ul.

Для вывода галереи мы воспользуемся уже знакомыми вам TV параметрами и сниппетом pdoResources. Изображения прикреплять к ресурсам будем с помощью TV параметра, а выводить галерею на главной странице с помощью сниппета pdoResources.

Давайте определимся с изображениями для нашего слайд-шоу. На данный момент у нас есть следующие страницы с услугами

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

15. Откройте созданный ранее TV параметр: Элементы – Дополнительные поля (TV) – img-news.

16. В поле Описание впишите текст следующего содержания:

Изображение для ресурса. Размер для новостей – 60px на 60px, для страниц с услугами – 380px на 250px.

После этого при редактировании любого ресурса с шаблоном 2 колонки дополнительное поле для вставки изображения будет выглядеть вот так:

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

17. Прикрепите изображения для страниц с услугами Создание сайтов, Продвижение сайтов, Разработка ПО, Поддержка в соответствии с названиями изображений (изображения расположены в папке images-slide в файлах папки distr_MODx), во время загрузки изображения создайте в файловом менеджере отдельную папку images-slide.

После того, как вы выберите и прикрепите необходимые изображения, создадим шаблон pdoResources для вывода слайд-шоу.

В чанке GALLERY есть повторяющийся блок, который отвечает за вывод одного слайда. На его основе будем реализовывать шаблон.

This is a W3C standards compliant Open Source free CSS template from OS Templates. This template is distributed under a Creative Commons Attribution-Share Alike 3.0 Unported License, which allows you to use and modify the template for both personal and commercial use when you keep the provided credit links in the footer.

18. Ниже приведен код, в котором статическая информация заменена на специальные теги MODx, чтобы из статической разметки получить шаблон для pdoResources:

Источник

Как пользоваться Системой управления Modx

Как заносить данные, добавлять новости, фотографии, редактировать страницы и т.д.

Как пользоваться cms?

Ниже мы рассмотрим, как пользоваться CMS MODx для сайта «Школа плавания «Lesgaft’s swim challenger’s»»

FAQ. Часто Задаваемые Вопросы по пользованию Системой Управления Контентом (CMS).

Ответы:

1. Как попасть в систему управление сайтом? к вопросам

Для того, чтобы попасть в систему управления, нужно дописать слово «manager» к адресу вашего сайта:

http://www.yoursite.ru/manager/

После прохождения по данному адресу вы попадете на страницу авторизации, где нужно будет ввести свой логин/пароль.

Вход в систему

После авторизации вы автоматически перейдете в систему управления.

Система Управления Контентом

2. С чего начать?к вопросам

Для начала обратим внимание на левую панель, которая содержит в себе дерево документов.

Дерево документов

Каждый документ содержит в себе информацию и может содержать дочерние ресурсы.

При нажатии правой клавиши мышки на любом из документов выскочит панель следующего вида:

Редактирование документа

3. Как добавить/изменить ресурс?к вопросам

Для этого нужно нажать на иконку «Новый ресурс» в левом верхнем углу,под словом «Главная» или правой кнопкой мышки вызвать «Панель редактирования» у одного из ресурсов слева и выбрать «Дочерний Ресурс»

Далее вы увидите форму следующего вида:

Добавление нового ресурса в MODx

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

*Например, при добавлении свежей Новости после нажатия «Публиковать» время публикации будет выставлено автоматически. Если нужно время исправить, его можно выставить в ручном режиме в разделе «Настройка страницы—Дата Публикации»

4. Как добавить/изменить верхнее меню?к вопросам

Изменение меню в MODx

5. Как добавить/изменить новость?к вопросам

добавить/изменить новость MODx

6. Как добавить материалы по новому преподавателю?к вопросам

добавить/изменить тренерский состав MODx

В формах «Описание» и «Аннотация» можно писать только HTML-код. Ниже мы приведем шаблоны, которые можно будет скопировать в эти поля и затем изменить их.

Преподаватель кафедры теории и методики плавания.
Мастер Спорта по плаванию.
Призер Чемпионатов России по плаванию, неоднократная чемпионка Санкт-Петербурга по плаванию.
Является инструктором EFR – Emergency First Response Inst

Проводит:

Занятия по обучению плаванию взрослых с водобоязнью при работе тренера в воде.
Занятия по обучению плаванию детей с 1 года до 6 лет при работе тренера в воде.
Занятия по обучению плаванию детей 10 – 14 лет при работе тренера на бортике.
Занятия по обучению плаванию мужчин 35-45 лет.
Тренировочные занятия для любителей плавания, индивидуально, в школьных группах, в группах.

7. Как изменить рекламный слоган и картинку на главной странице?к вопросам

Для этого нужно раскрыть вкладку «Баннер», там будет 4 документа. Это 4 новости на заглавной странице, которые можно просматривать как слайды.

8. Как изменить телефоны?к вопросам

Откройте вкладку «Телефоны», там будет два документа.Телефоны на главной странице и телефоны внизу сайта.

Изменить телефоны в MODx

Исправить телефоны нужно в поле «Содержимое ресурса», а также на странице «Контакты»

9.Как добавить видео?к вопросам

После загрузки видео, зайдите на свой видеоролик. Внизу вы уведите кнопочку «Встроить/Получить код видео/Embed Video». Нажав на неё, вы получите код, который сможете встроить себе на сайт, скопируйте его

Как получить код Видео

Для вставки видео на сайт, в поле «Содержимое ресурса» на верхней панели есть иконка

Вставка видео в TinyMCE Modx

10. Как пользоваться фотогалереей?к вопросам

Для создания новой галереи, нужно создать Дочерний документ в разделе «Фотогалерея».

Далее нужно нажать правую клавишу мышки на созданном «Альбоме» и выбрать «Просмотр». Вы попадете на свой сайт с правами администратора, и увидите кнопочку «Управление изображениями». После нажатие этой кнопки вы перейдете в «Менеджер Фотографий»

Менеджер фотографий в Modx

11.Советы и возможные проблемык вопросам

Совет 1:

Будьте внимательны! Перед сохранением документа, его лучше скопировать (СTRL+C), т.к. в случае отсутствия интернета, после того как вы нажмете «Сохранить» будет выведена ошибка, и вы потеряете документ.

Совет 2:

Если у вас не сохраняется документ после длительной работы на сайте, отключите «Firewall» у антивируса и «Брендмауэр» у Windows. Они иногда блокируют частое изменение документов.

Совет 3:

Если вы забудете как работать с Системой Уравления Modx, нажмите на иконку внизу вашего сайта.Вы попадете к нам на сайт в раздел посвященный вашем сайту.

Помощь по работе с CMS

Источник