Несколько слов о компании
Несколько слов о компании на главной странице. Можно написать о всех достижениях. Так же в этом блоке вы можете дать ссылку на страницу с полной информацией о вашей фирме.
В общем, в этом блоке будет важная информация кратко описывающая чем занимается ваша фирма.
Поиск по сайту
[!AjaxSearch? &ajaxSearch=`0` &landingPage=`41`&showResults=`0`!]
Также для поиска информации на сайте Вы можете воспользоваться картой сайта.
Контактная информация
Вы можете связаться с нами любым удобным для Вас способом.
Наши менеджеры обязательно свяжутся с вами в ближайшее время.
- Сайт: ivanov.com
- ICQ: 7695058
- Skype: ali_ximik
- Email: aliximik@mail.ru
Copyleft © 2013 - Вы можете свободно использовать материалы нашего сайта
Template by OS Templates
При создании сайта вам останется только изменить информацию в этом чанке, заполнив его своими данными.
18.4. подведение итогов
На этом мы заканчиваем наш урок, посвященный реализации поиска на страницах сайта, который получился довольно объемный. На одном из следующих уроках мы создадим карту сайта.
18.5. контрольные задания
Какой сниппет используется для поисковой системы на сайте?
В каких 2-х режимах может работать сниппет AjaxSearch и в чем их отличие?
Как сделать, чтобы результаты поиска отображались на другой странице сайта?
Как сделать, чтобы результаты поиска отображались на той-же самой странице сайта?
ЗаданиЕ 19
Вывод изображения в результатах поиска
цели занятия
освоение приемов реализации вывода изображений в поиске на сайте;
Форма организации занятия
Фронтальная.
Студент должен знать
технологию реализации вывода изображений в поиске на сайте.
Студент должен уметь
выполнять лабораторно-практическое задание №18,
реализовывать вывод изображений в поиске на сайте.
Обеспеченность
компьютер с доступом в Интернет,
настоящий курс лабораторно-практических работ.
Практическое задание
Зачастую нам нужно для некоторых ресурсов вывести прикрепленные изображения в результатах поиска на сайте, реализованного с помощью сниппета AjaxSearch.
19.1. Вывод содержимого TV параметров в результатах поиска
Для вывода прикрепленного изображения в результатах поиска создаем TV параметр, который мы будем выводить в результатах с именем, например, imgsearch и типом ввода image, рис. 19.1.
Название TV параметра может быть любым, главное затем его правильно указать при вызове сниппета AjaxSearch и в шаблоне вывода результата.
Обратите внимание: TV параметры, которые должны выводиться в результатах поиска, не должны в названии содержать символ "-", в противном случае при попытке произвести поиск система будет выдавать сообщение об ошибке.
На странице с результатами поиска выводим следующую конструкцию:
[!AjaxSearch? &ajaxSearch=`0` &pagingType=`0` &showInputForm=`0` &grabMax=`7` &withTvs=`imgsearch`!]
Рис. 19.1
Параметр &withTvs указывает, какие TV параметры вы хотите видеть в выводе результатов поиска. Если этих параметров несколько, они должны отделяться друг от друга запятой.
Прикрепите для какой-нибудь страницы из дерева ресурсов изображение с помощью TV параметра imgsearch, рис. 19.2:
Рис. 19.2
Затем нам необходимо отредактировать шаблон вывода результатов, чтобы добавить в нем вызов дополнительного TV параметра.
Для этого будем редактировать файл result.tpl.html, в котором хранится шаблон вывода результата в AjaxSerch. По умолчанию этот файл находится в папке assets/snippets/ajaxSearch/templates/.
Сейчас содержимое этого файла следующее:
[+as.pagetitle+]
[+as.extractShow:is=`1`:then=`
[+as.extract+]
`+]
[+as.breadcrumbsShow:is=`1`:then=`
[+as.breadcrumbs+]
`+]
[+as.descriptionShow:is=`1`:then=`
[+as.description+]
`+]
После строчки
[+as.pagetitle+]
которая отвечает за вывод ссылки на результат поиска добавляем следующую конструкцию:
[+as.imgsearchShow:is=`1`:then=`
`+]
Эта конструкция проверяет, содержит ли TV параметр imgsearch какую-либо информацию, и если этот параметр не пустой, то происходит вывод тега img с содержимым TV параметра в качестве значения scr.
В этом случае выравнивание изображения производится по правому краю, а его ширина ограничивается 60 пикселями. Вы можете выставить любое подходящее вам значение ширины и позиционирования изображения на странице.
Для того, чтобы выводимое изображение было ссылкой на страницу, изменим только что добавленную конструкцию в файле result.tpl.html на следующую:
[+as.imgsearchShow:is=`1`:then=`
`+]
В итоге файл с шаблоном вывода результата поиска будет содержать в себе следующий код:
[+as.pagetitle+]
[+as.imgsearchShow:is=`1`:then=`
`+]
[+as.extractShow:is=`1`:then=`
[+as.extract+]
`+]
[+as.breadcrumbsShow:is=`1`:then=`
[+as.breadcrumbs+]
`+]
[+as.descriptionShow:is=`1`:then=`
[+as.description+]
`+]
Внешний вид результата с прикрепленным изображением будет приблизительно таким, как показано на Рис. 19.3:
Рис. 19.3
Вы можете изменить стиль отображения с помощью CSS. Например, чтобы добавить отступы и границу изображения в CSS файле можно прописать стиль для тега img:
.ajaxSearch_result img{padding:5px; border:1px solid #eee; margin-top:10px;}
После этого добавится обводка изображения, и изменятся отступы. Итоговый вид будет таким, как показано на Рис. 19.4:
Рис. 19.4
Подобным образом будут выводиться и любые другие TV параметры с любым типом ввода. Например, если вы хотите вывести в результатах поиска дополнительную текстовую строчку, которая хранится в TV параметре с типом ввода text и именем name, то на странице с результатами поиска при вызове сниппета необходимо использовать параметр &withTvs=`name`, а в файле с шаблоном результата дополнительный TV параметр вызывается с помощью конструкции:
[+as.nameShow:is=`1`:then=`
[+as.name+]
`+]
19.2. контрольные задания
Как настроить вывод изображения в результатах поиска на сайте?
ЗаданиЕ 20
Карта сайта для посетителей и поисковых машин
цели занятия
освоение приемов реализации вывода карты сайта;
Форма организации занятия
Фронтальная.
Студент должен знать
технологию создания карты сайта.
Студент должен уметь
выполнять лабораторно-практическое задание №19,
создавать карту сайта,
загружать карту сайта на поисковые системы.
Обеспеченность
компьютер с доступом в Интернет,
настоящий курс лабораторно-практических работ.
Практическое задание
На одном из прошлых уроков мы с вами реализовали поиск по сайту на базе встроенного сниппета AjaxSearch. Сегодня мы разберем еще один элемент, который должен быть у каждого сайта и который значительно облегчит навигацию по нему. Сегодня мы поговорим о карте сайта.
Карта сайта — своеобразное содержание сайта, аналогичное содержанию книги. Обычно карта сайта состоит из ссылок на все страницы либо разделы, содержащиеся на сайте. Карта сайта наглядно показывает, из каких страниц состоит сайт, и она помогает пользователю быстро найти интересующую его информацию. Карту можно отнести к элементу навигации: со страницы, на которой она расположена, посетитель сможет в один клик добраться до любого раздела или материала, который ему нужен..
20.1. Создание карты сайта для посетителей
В MODx есть немало путей реализации карты сайта. На сегодняшнем уроке я вам покажу самый распространенный способ — с использованием сниппета Wayfinder.
Если вы помните, с помощью этого сниппета мы вызывали наши главное и вспомогательное меню на сайте.
Для того чтобы на какой-нибудь странице вывести дерево, состоящее из всех ссылок, достаточно вызвать сниппет с помощью следующей конструкции:
[!Wayfinder? &startId=`0`!]
В этом случае сниппет пробежит по всему дереву документов в MODx и выведет в виде списка ссылки на все ресурсы. При этом дочерние документы контейнеров будут отображаться в виде вложенных списков UL.
Если вы хотите, чтобы в итоговом дереве ссылок отображались также и документы, не отмеченные для показа в меню, необходимо добавить параметр &ignoreHidden=`1` при вызове сниппета.
Итак, создаем страницу с заголовком Карта сайта, убираем галочку Показывать в меню, рис. 20.1:
Рис. 20.1
Помещаем в область Содержимое ресурса только что созданной страницы конструкцию вызова сниппета Wayfinder:
[!Wayfinder? &startId=`0` &ignoreHidden=`1` !]
Но также следует иметь в виду, что иногда есть необходимость исключить некоторые документы из дерева ссылок. Например, логично было бы не выводить ссылку на страницу с результатами поиска, или на саму карту сайта. Чтобы исключить из вывода служебные страницы, воспользуемся параметром &excludeDocs. В этом параметре в вызове сниппета необходимо через запятую указать ID докуметов, которые вы не хотите видеть в карте сайта.
В моем случае страница с Картой сайта имеет идентификатор ID=42, а страница с результатами поиска ID=41, давайте исключим эти ресурсы из вывода карты сайта.
[!Wayfinder? &startId=`0` &ignoreHidden=`1` &excludeDocs=`41,42` !]
Также можно указать, по какому параметру производить сортировку выводимого списка ссылок, и допустимый уровень вложенности. Для этого воспользуемся параметрами: &level и &sortBy.
[!Wayfinder? &startId=`0` &ignoreHidden=`1` &excludeDocs=`41,42` &level=`5` &sortBy=`id` !]
Уровень вложенности и поле, по которому нужно отсортировать ваш список, можете указать любыми.
Последний штрих, который можно сделать в создании карты сайта, это обернуть конструкцию вызова сниппета в контейнер с CSS классом, например, sitemap, чтобы из CSS файла иметь возможность изменить внешний вид выводимого списка.
Итоговая конструкция в поле с содержимым страницы Карта сайта.
[!Wayfinder? &startId=`0` &ignoreHidden=`1` &excludeDocs=`41,42` &level=`5` &sortBy=`id` !]
В CSS можете прописать внешний вид нашей карты, как вам вздумается. Например, в CSS файл assets/templates/site/styles/layout.css можно вставить следующую конструкцию:
1 .sitemap ul{ padding:10px; list-style-type:none; margin:10px 20px;}
2 .sitemap ul ul,.sitemap ul ul, .sitemap ul ul ul, .sitemap ul ul ul ul { padding:10px; list-style-type:none; margin:10px 20px; border-left: 3px solid #ccc;}
3 .sitemap ul li { padding:2px;}
4 .sitemap a{color:#666;}
5 .sitemap a:hover{color:#B2C629;}
Внешний вид карты сайта после произведенных изменений показан на рис. 20.2.
Давайте поставим на нее ссылку в футере в блоке поиска по сайту под формой поиска. Для этого отправляемся редактировать чанк FOOTER.
Чтобы поставить ссылку можно воспользоваться специальным тегом MODx [~id~], который выводит URL страницы с указанным ID. В моем случае ID ресурса с картой сайта равен 42, поэтому вывод ссылки на эту страницу примет следующий вид:
Карта сайта
У вас ID может отличаться.
Мы позаботились о наших посетителях, предоставив им возможность в один клик с карты сайта перебраться на любой документ на сайте. Но это еще не все. Сейчас давайте создадим такую же карту, но не для посетителей, а для поисковых машин. Это, так называемая, XML карта sitemap.xml, адрес к которой можно указать в панели управления поисковиков, и которая будет оперативно сообщать поисковым роботам о новых недавно появившихся страницах на сайте. Подробнее о XML карте вы можете почитать в википедии.
Рис. 20.2
20.2. Создание XML карты сайта для поисковиков
С помощью файла Sitemap веб-мастера могут сообщать поисковым системам о веб-страницах, которые доступны для сканирования. Файл Sitemap представляет собой XML-файл, в котором перечислены URL-адреса веб-сайта в сочетании с метаданными, связанными с каждым URL-адресом (дата его последнего изменения; частота изменений; его приоритетность на уровне сайта), чтобы поисковые системы могли более грамотно сканировать этот сайт.
Сканеры обычно находят страницы по ссылкам, указанным на сканируемом сайте и на других сайтах. Эта информация, дополненная данными из файлов Sitemap, позволяет сканерам, поддерживающим протокол Sitemap, найти все URL в файле Sitemap и собрать информацию об этих URL с помощью связанных метаданных. Использование протокола Sitemap не является гарантией того, что веб-страницы будут проиндексированы поисковыми системами, это всего лишь дополнительная подсказка для сканеров, которые смогут выполнить более тщательное сканирование Вашего сайта.
Sitemap получил широкое признание. Его поддерживают Яндекс, Google, Yahoo! и Bing. Можно создать XML карту с помощью сервиса xml-sitemaps.com и подключить её в панели вебмастеров Google и Яндекс. Этим способом вы можете также воспользоваться. Но в нем есть один существенный недостаток. Каждый раз при изменении структуры страниц вашего сайта, т.е. при добавлении или удалении материалов, созданная с помощью этого сервиса карта становится неактуальной, и вам каждый раз придется ее создавать снова и снова после внесения каких бы то ни было изменений в структуру сайта.
Чтобы избавиться от этого недостатка и чтобы XML карта генерировалась автоматически, давайте в MODx воспользуемся сниппетом Sitemap. Он не входит в дистрибутив, поэтому его сначала придется создать.
Отправляемся на страницу: Элементы→Управление элементами→ Сниппеты→Новый сниппет и заполняем поля, как показано на рис. 20.3.
Рис. 20.3
Название сниппета: sitemap.
Описание: XML карта сайта.
Код сниппета (php): в эту область между тэгами
hp и ?> копируем содержимое файла sitemap-1.0.11.txt. Этот файл также находится на файловом сервере.
После этого нам необходимо произвести еще несколько подготовительных действий: создаем два TV параметра, необходимых для формирования XML файла, с типом ввода выпадающий список DropDown List Menu с именами sitemap_changefreq и sitemap_priority.
1. sitemap_changefreq — указывает на частоту изменения информации на сайте. При создании этого TV параметра заполните поля так, как показано на рис. 20.4.
Возможные значения: always||hourly||daily||weekly||monthly||yearly||never
Значение по умолчанию: можете вписать любое из возможных значений. Поставьте, к примеру, weekly.
Рис. 20.4
2. sitemap_priority — указывает на приоритет страницы. При создании этого TV параметра заполните поля так, как показано на рис. 20.5.:
Рис. 20.5
Возможные значения: 0.1||0.2||0.3||0.4||0.5||0.6||0.7||0.8||0.9||1
Значение по умолчанию: любое из возможных значений, к примеру, 0.7.
Как вы догадались, возможные значения для TV параметра с типом ввода DropDown List Menu отделяются друг от друга двумя вертикальными чертами: «||».
Не забудьте созданные TV параметры назначить для всех созданных шаблонов, как показано на рис. 20.6:
Рис. 20.6
После этого при редактировании или создании ресурсов MODx будут отображаться дополнительные поля в виде выпадающих списков, как показано на рис. 20.7:
Рис. 20.7
Далее создаем страницу с именем, например, XML карта сайта, и псевдонимом sitemap.xml. В качестве шаблона обязательно из выпадающего списка выберите шаблон (blank).
В область содержимого помещаем конструкцию вызова сниппета:
[[sitemap]], как показано на рис. 20.8.:
Рис. 20.8
На вкладке Настройка страницы из выпадающего списка Тип содержимого обязательно выберите text/xml. Также необходимо отключить HTML-редактор, для этого снимите галочку Использовать HTML-редактор, рис. 20.9.
Внимание: убедитесь, что у вас включены дружественные URL на сайте.
Рис. 20.9
Чтобы посмотреть на результат работы сниппета введите в адресной строке браузера:
http://ваш_сайт/sitemap.xml
В различных браузерах отображение этой карты может быть разным, в Гугл Хром, например, карта будет в виде обычного текста, в Опере и Фаерфоксе, карта имеет вид разметки XML файла, но информация, которую эта карта передает, для всех браузеров будет идентична, рис. 20.10.:
Рис. 20.10
После создания XML карты сайта, вы можете её также исключить из вывода обычной карты сайта. Для этого на странице с вызовом сниппета Wayfinder в параметр &excludeDocs добавьте Id ресурса, который использован в качестве XML карты.
20.2. подключение карты sitemap.xml в панели вебмастеров Яндекс и Google
Прежде чем передать файл Sitemap, чтобы сообщить о страницах вашего сайта, которые иначе могут быть пропущены при сканировании, нужно добавить ваш сайт в поисковики.
20.2.1 Добавление сайта в поисковики
На данный момент ваш сайт — абсолютно обособленный объект на просторах интернета. На него еще не ссылается не одна ссылка, ни один поисковик еще не знает о существовании вашего сайта. Ну что же, самое время им о вас рассказать, в противном случае поисковые машины могут очень долго индексировать ваше творение.
Так как большая часть трафика на большинство сайтов приходит именно из поисковых систем, то нужно немножечко уделить времени и аккуратно добавить свой сайт во все знакомые вам поисковые системы. Рассмотрим это подробнее.
1. Добавляем сайт в Yandex
Сначала сообщаем Яндексу о новом сайте, для этого перейдем по ссылке: http://webmaster.yandex.ru/addurl.xml. В появившемся поле вводим URL главной страницы и жмем копку добавить.
Затем добавляем свой сайт в сервис веб-мастеров Яндекса. Для добавления своего сайта в этот сервис, следуем по ссылке: http://webmaster.yandex.ru. В открывшемся окне жмем кнопку добавить сайт, и вводим логин и пароль от аккаунта Yandex, если такового у вас еще нет, то просто проходим процедуру регистрации. На странице добавления сайта вводится URL вашего сайта. Далее вы должны подтвердить права на добавляемый сайт. Это делается двумя способами: либо добавлением в корень сайта файла с указанным названием, либо добавлением метатега в разметку страницы. Это автоматически дает понять поисковику, что у вас есть доступ либо к административной панели сайта, либо к FTP. (Кстати, эта проверка является стандартной при добавлении сайта для большинства сервисов различных поисковых систем и необходима для того, чтобы не допустить попадания различной статистической информации о вашем сайте третьим лицам, например конкурентам.) После подтверждения прав, ваш сайт будет добавлен. И, вероятно, в течение 2-ух недель ваш сайт должен быть проиндексирован.
2. Добавляем сайт в Google
Переходим по ссылке: http://www.google.com/addurl/?continue=/addurl. Чтобы войти в панель, нужна регистрация на Гугле, если ее нет – зарегистрируйтесь. Затем вводим URL добавляемого сайта, капчу, жмем кнопку отправить запрос и все.
Затем добавляем сайт в сервис для веб-мастеров Google, пройдя по ссылке: https://www.google.com/webmasters/tools/home?hl=ru подобно тому, как в предыдущем пункте добавляли в сервис Яндекса. Жмете кнопку добавить сайт, далее действуете по инструциии для подтверждения прав собственности на сайт (как и в случае с Яндексом вам будет предложено загрузить в корень сайта HTML файл). После добавления сайта, вы сможете пользоваться из панели инструментов различными очень полезными сервисами, которыми вы в полной мере сможете использовать после индексации вашего сайта поисковой системой Google.
20.2.2 передача файла Sitemap поисковикам
После того, как ваш сайт добавлен, вы можете передать файл Sitemap, чтобы сообщить о страницах вашего сайта, которые иначе могут быть пропущены при сканировании.
В пенели Google для вебмастеров выберите ваш сайт, затем в левом меню выберите: Сканирование→Файлы Sitemap. Жмете кнопку Добавление/проверка файла Sitemap и в появившемся поле вписываете URL вашего файла. Если карта лежит в корневой директории, то нужно просто вписать sitemap.xml. На рис.20.11 показано, как выглядит страница после добавления файлов Sitemap в Google панели.
Рис. 20.11
В Яндекс.Вебмастере файл добавляется в меню: Проверить файл Sitemap. На рис. 20.12 показано, как выглядит страница добавления карты сайта в Яндекс.
Выберите источник данных для проверки: По ссылке, укажите URL файла sitemap, жмите: Проверить. Если ошибок нет, вернитесь к списку сайтов, пройдя по ссылке: Мои сайты. Выберите свой сайт, откройте меню: Настройки индексирования, Файлы Sitemap, рис. 20.13.
Рис. 20.12
Рис. 20.13
В течение 2-х недель файл будет обработан.
Ну, вот и все, мы без труда подключили XML файлы с картой нашего сайта и тем самым помогли поисковикам с индексацией нашего сайта, что увеличивает шанс того, что они не пропустят что-нибудь при сканировании.
20.3. контрольные задания
Какой сниппет используется для создания карты сайта?
Для чего нужен файл Sitemap.xml?
Как поисковые системы проверяют, что вы владелец сайта?
ЗаданиЕ 21
Реализация галереи изображений
цели занятия
освоение приемов реализации галереи изображений;
Форма организации занятия
Фронтальная.
Студент должен знать
технологию реализации галереи изображений.
Студент должен уметь
выполнять лабораторно-практическое задание №20,
устанавливать и настраивать галерею изображений на сайте MODx.
Обеспеченность
компьютер с доступом в Интернет,
настоящий курс лабораторно-практических работ.
Практическое задание
На сегодняшнем уроке мы с вами научимся создавать галерею изображений на сайте с системой управления MODx.
На самом деле для реализации галереи в MODx предусмотрено несколько готовых решений в виде дополнительных модулей и плагинов: EvoGallery, maxigallery, Easy 2 Gallery, MiniGallery и другие. Все они предназначены для решения различных задач, но EvoGallery выделяется своей простотой и универсальностью.
На сегодняшнем уроке мы изучим как установить и настроить EvoGallery.
21.1. Установка EvoGallery
Для начала нужно скачать дистрибутив пакета EvoGallery, для этого перейдите по ссылке:
http://modxcms.com/extras/package/676
В открывшемся окне нажмите на кнопку Download, рис. 21.1.
Чтобы установить EvoGallery, надо загрузить архив с EvoGallery на ваш сайт, распаковать пакет и выполнить следующие действия:
Создайте папку с именем galleries в каталоге assets вашего сайта MODx.
Рис. 21.1
Скопируйте папку EvoGallery/assets/modules/evogallery в папку assets/modules вашего сайта.
-
Скопируйте папку EvoGallery/assets/snippets/evogallery в папку assets/snippets вашего сайта.
Скопируйте файл: EvoGallery/assets/plugins/managermanager/functions/gallerylink.inc.php в папку assets/plugins/managermanager/functions вашего сайта.
Скопируйте папку EvoGallery/install в корневой каталог вашего сайта.
Запустите инсталлятор http://имя_сайта/install/index.php и следуйте простым инструкциям на экране, чтобы завершить установку, рис. 21.2, 21.3, 21.4.
Рис. 21.2
Рис. 21.3
Рис. 21.4
После того как вы закончили установку, убедитесь, что директория install удалена с вашего сайта. Если это не так, удалите ее вручную.
Модуль EvoGallery позволяет управлять всеми фотографиями, которые связаны с различными страницами вашего сайта. Перейдите в раздел модулей вашего сайта и нажмите на закладку EvoGallery, вам будет представлен список всех страниц сайта, рис.21.5:
Р ис. 21.5
Создайте новую страницу Галерея, с двумя дочерними страницами, как показано на рис. 21.6, опубликуйте их и добавьте в главное меню.
Рис. 21.6
21.2. загрузка изображений и настройка галереи
Перейдите на вкладку Модули → EvoGallery, откройте страницу Галерея, а затем Альбом 1. Для загрузки фотографий просто щелкнете по кнопке Select Files и выберите фотографии, которые вы хотите загрузить. Несколько файлов для загрузки лежат в папке MODx\Галерея, но вы можете использовать любые фотографии. Файлы, которые вы выбираете, будут добавлены в очередь для загрузки, рис. 21.7.
После нажатия кнопки Загрузить файлы, начнется загрузка изображений на выбранную страницу сайта, рис. 21.8. Вместе с каждой фотографией будет создана ее миниатюра. И фотографии и миниатюры будут обработаны (изменены их размеры) на основе конфигурации модуля EvoGallery.
В некоторых версиях Оперы может не работать загрузка файлов картинок, в этом случае попробуйте другой браузер.
  
Рис. 21.7
Рис. 21.8
А теперь загрузите фотографии во второй альбом.
Как только фотографии загружены, вы можете управлять дополнительными свойствами изображений просто, выделяя их и нажимая на значок редактирования. Раскроется всплывающее окно, которое позволит вам обновлять заголовок, описание и ключевые слова для изображения, а также даст возможности загрузить и заменить существующее изображение новым, рис. 21.9.
Если вы хотите удалить изображение, просто выберите миниатюру изображения и щелкните по красному X. Вы можете также переупорядочить изображения просто перетаскивания их в порядке, который вы хотите создать, а затем щелкните по кнопке Сохранить порядок.
Рис. 21.9
Теперь познакомимся с настройками конфигурации модуля EvoGallery, для этого перейдите на вкладку Модули → Управление модулями и выберите модуль EvoGallery. В окне редактирования модуля перейдите на вкладку Конфигурация, рис. 21.10. Ниже приведена таблица с описанием параметров:
Наименование параметра
|
Описание
|
Значение по умолчанию
|
Root Document ID
|
Номер корневого документа для перечисления галерей
|
0
|
PHPThumb config for images in JSON
|
Параметры PHPThumb для изображений
|
{'w': 940, 'h': 940, 'q': 95}
|
PHPThumb config for thumbs in JSON
|
Параметры PHPThumb для миниатюр
|
{'w': 175, 'h': 175, 'q': 75}
|
Save path
|
Расположение папки для изображений
|
assets/galleries
|
Keep original images
|
Если установлено в Да, то сохранятся исходные изображения после загрузки
|
Да
|
Random filenames
|
Если установлено в Да, это сгенерируются случайные имена файлов к загруженным картинкам
|
Нет
|
Рис. 21.10
Обратите внимание на следующее:
Изменения конфигурации влияют только на изображения, загруженные ПОСЛЕ изменения настроек. В противном случае вы можете пересоздать все изображения из меню действия.
Н екоторые примеры конфигурации:
Максимальная ширина 940, максимальная высота 940, качество 95
{'w': 940, 'h': 940, 'q': 95}
Максимальная ширина 1280, максимальная высота 1024, качество 95, наложение водяного знака из файла '/assets/images/watermark.png' в верхней левой позиции
{'w': 1280, 'h': 1024, 'q': 95, 'fltr': ['wmi|/assets/images/watermark.png|TL']}
М аксимальная ширина 1280, максимальная высота 1024, качество 95, масштабирование обрезкой, фильтр яркости со значением 200, наложение водяного знака из файла '/assets/images/watermark.png' в нижней правой позиции
{'w': 1280, 'h': 1024, 'q': 95, 'zc': 1, 'fltr': ['brit|200', 'wmi|/assets/images/watermark.png|BR']}
Настало время посмотреть, как работает галерея, для этого вставьте в содержимое ресурса Альбом 1 вызов галереи без параметров:
[[EvoGallery]]
При просмотре галереи мы увидим миниатюры фотографий, размещенные в столбик, рис. 21.11:
Рис. 21.11
Если нажать мышью на миниатюру, то мы увидим большое изображение, которое загружается в пустую страницу без навигационных элементов. Просматривать фотографии таким образом не удобно, поэтому давайте установим всплывающую jQuery галерею – Fancybox.
21.3. установка jQuery галереи Fancybox
Для начала скачайте пакет http://fancyapps.com/fancybox/ с официального сайта или с файлового сервера.
Затем нужно загрузить скрипты и все необходимые картинки на ваш сайт, в папку assets/js/:
jquery-1.9.0.min.js
jquery.mousewheel-3.0.6.pack.js
jquery.fancybox.js
jquery.fancybox.css
jquery.fancybox.pack.js
fancybox_sprite.png
fancybox_overlay.png
fancybox_loading.gif
blank.gif
Создадим новый шаблон для отображения галереи на основе шаблона Во всю ширину. В новом шаблоне нужно в тэг
|
