RSS

Фотогалерея joomla

Как установить расширение ФОТОГАЛЕРЕЯ в joomla?
Теперь мы будем реализовывать пункт меню ПОРТФОЛИО, который представляет из себя, по-сути, фотогалерею.

Фотогалерея относится к расширениям joomla. Расширения в joomla в общем случае состоят из КОМПОНЕНТА, МОДУЛЯ и ПЛАГИНА. КОМПОНЕНТ отвечает за работу с расширением в администраторской части (панели управления), МОДУЛЬ выводит визуальную часть (информацию) модуля, а ПЛАГИН при возникновении определенного условия в системе выполняет определенную функцию, например, встречая какой-то конкретный набор символов, выводит нужную информацию.

В данном случае я решил использовать простой вариант фотогалереиJOOMLA: CSS GALLERY. Данное расширение состоит только из плагина.Вы можете посетить страницу данного приложения  и скачать там новейшую версию.

После того, как вы скачали плагин, надо его установить. Для этого переходим РАСШИРЕНИЯ – УСТАНОВИТЬ/УДАЛИТЬ.

Выбираем скачанный файл, жмем ЗАГРУЗИТЬ ФАЙЛ И УСТАНОВИТЬ.

Если видим надпись УСТАНОВИТЬ ПЛАГИН: УДАЧНО, значит все прошло гладко. Здесь же мы видим подсказку, что для вывода фотогалереи необходимо ввести строку {becssg}foldername{/becssg}.

Установленный плагин необходимо включить и настроить. Поэтому отправляемся РАСШИРЕНИЯ – МЕНЕДЖЕР ПЛАГИНОВ.

Здесь находим строку CSS GALERY и нажимаем на нее.

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

В пункте GALLERY WIDTH вы можете настроить ширину галереи в пикселях, в GALLERY HEIGHT – высоту. IMAGE QUALITY задает качество картинки в процентах от исходного, чем меньше качество, тем меньше «вес» картинок, и, соответственно, меньше времени они будут загружаться. ALIGN THE GALLERY задает выравнивание – по центру, либо по левому или правому краю. SORT ORDER отвечает за то, каким образом сортируются картинки в вашей галерее. Это можно сделать по алфавиту, по дате добавления или случайным образом. Если установить НЕТ для параметра FIXED STARTIMAGE, то после того, как пользователь уберет мышь с миниатюры, основная картинка останется той, которой была изначально. THUMBNAILS PER ROW и THUMBNAIL QUALITY задает соответственно количество миниатюр в ряду и качество этих миниатюр. Пункт SHOW CAPTIONS показывает заголовки картинок, USE LINKS разрешает ставить ссылки на картинки.

Итак, настроив плагин как надо, незабываем его включить и нажимаем СОХРАНИТЬ.

Теперь переходим САЙТ – МЕДИАМЕНЕДЖЕР.

Здесь заходим в папку STORIES.

И в папке STORIES создаем новую папку. Я назвал ее FOTO.

В эту папку нам необходимо загрузить картинки для нашей фотогалереи. Для этого нажимаем ВЫБЕРИТЕ ФАЙЛ, выбираем картинку и нажимаем ЗАГРУЗИТЬ. И так для каждой картинки. Конечно, загрузка по одной картинке не очень удобна, но для небольших галерей она вполне годится. Для более серьезных галерей необходимо использовать галереи с отдельным компонентом, который поддерживает пакетную загрузку картинок, например, Ignite Gallery.

Когда все картинки для галереи у нас готовы, отправляемся МАТЕРИАЛЫ – МЕНДЖЕР МАТЕРИАЛОВ,

и нажимаем кнопку СОЗДАТЬ.

В поле редактирования текста страницы мы можем ввести какой-то описательный материал, а затем вводим код, указанный в подсказке. Как мы помним (а если не помним, то отправляемся РАСШИРЕНИЯ – МЕНДЕДЖЕР ПЛАГИНОВ – CSS GALLERY), это {becssg}foldername{/becssg}, где на место foldername мы подставляем имя нашей папки.

Сохраняем и переходим ВСЕ МЕНЮ – МЕНДЖЕР МЕНЮ.

Нажимаем пиктограмму ПУНКТЫ МЕНЮ.

В открывшемся окне нажимаем СОЗДАТЬ. При выборе типа меню указываем СТАНДАРТНЫЙ ШАБЛОН МАТЕРИАЛА

Для пункта меню выбираем ЗАГОЛОВОК и ПСЕВДОНИМ.

Кроме того выбираем нужный материал, то есть тот, который содержит галерею.

Нажимаем СОХРАНИТЬ и отправляемся на сам сайт оценивать результат. Обновив страницу и нажав на появившийся пункт меню, мы можем видеть нашу фотогалерею.

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

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

Имейте в виду, что внешним видом сайта я занимаюсь, поставив перед собой цель продемонстрировать, как это делается, а не довести сайт до идеального внешнего вида. Хотя сайт, на мой взгляд, определенно станет лучше:)

Чтобы придать некоторую индивидуальность сайту, я хочу для начала сменить логотип. Так как вместо хоть какого-то логотипа мы имеем просто текст, то при помощи этого самого текста мы и будем искать место, где этот самый логотип вставляется в тело страницы. Открываем исходный HTML-код страницы.

На вашем браузере просмотр исходного кода может отличаться. Далее при помощи поиска находим кусок кода с текстом логотипа.

Видим, что он находится внутри тега DIV со значением параметра id = “logo”. Запоминаем название этого индентификатора и движемся внутрь нашего шаблона. Для этого я иду в папку сайта, там нахожу папку TEMPLATES, в которой находятся файлы шаблонов, и там открываю для редактирования файл INDEX.PHP (итого, весь путь на локальном хостинге X:\home\localhost\www\site\templates\siteground-j15-42\index.php). Далее, в открытом файле с помощью опять же поиска ищем текст LOGO.

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

Сохраняю ее с помощью пункта СОХРАНИТЬ ДЛЯ WEB И УСТРОЙСТВ прямо в папку с картинками на сайте, то есть в X:\home\localhost\www\site\images под названием LOGO.PNG. Теперь вернемся к коду. Как мы видим, в виде ссылке (то есть между тегами <a href=»/index.php»> и </a>) выводится строка с php-кодом. Смело ее удаляем.

И на ее место (то есть между все теми же тегами <a href=»/index.php»> и </a>), прописываем строчку вставки изображения <img src=»/images/logo.png» width=»300″ height=»220″ />.

Сохраняем файл. И отправляемся на сайт проверять.

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

У нас есть ссылка на сайт – производитель шаблона.

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

Аналогично тому, как мы искали в исходном коде страницы логотип, ищем слова DESIGNED BY. И видим, что в найденном кусочке никаких особых стилей и классов у тега DIV нет.

Значит, отправляемся либо в файл INDEX.PHP, либо в соседний ему файл TEMPLATE.PHP и повторяем поиск словосочетания DESIGNED BY. В файле TEMPLATE.PHP я нахожу нужный мне кусочек кода. И прописываю для тега DIV, в котором находится все это хозяйство, style=”visibility:hidden;”.

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

Итак, как и обычно отправляемся в исходный код, и ищем место, где выводится верхнее меню.

Здесь мы видим, что за вид верхнего меню отвечает три класса PILL_M, PILLMENU, MAINLEVEL. Открываем папку нашего шаблона, далее переходим в CSS, а в ней в свою очередь находим файл TEMPLATE.CSS (итого, полный путь у меня X:\home\localhost\www\site\templates\siteground-j15-42\css\template.css). Открываем TEMPLATE.CSS и, кроме него открываем сам файл INDEX.PHP, что на уровень выше, который мы уже правили, когда меняли логотип. Он тоже пригодится.

Начнем с выравнивания текста. Для этого в файле TEMPLATE.CSS находим через поиск нужные нам классы, и в них для атрибута text-align прописываем значение left. Сохраняем файл, обновляем страницу и … не видим никаких изменений:). Значит надо искать дальше. В файле INDEX.PHP находим место вывода меню, и видим, что пункты меню выводятся в таблице, у которой, собственно и задан в локальном стиле атрибут margin. Меняем это все дело на style=»margin-left:120px;»(цифра получается методом проб и ошибок), и, наконец, получаем выравнивание по левому краю.

Теперь увеличим шрифт. Заодно, надо добавить отступы между пунктами меню, а то они практически сливаются. Для этого для класса mainlink, прописанного для ссылок исправим так, чтобы значение «margin: 0 10px 0 0 ;», что добавит справа отступ к каждой ссылке, а также изменим размер шрифта с 11 до 12 пикселей, установив «font-size:12px;».

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

Теперь перейдем к редактированию главного меню. Здесь я также хочу увеличить шрифт, и увеличить отступ сверху от всего меню.

Я снова открываю исходный код страницы и ищу там словосочетание ГЛАВНОЕ МЕНЮ.

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

Скорее всего, DIV с идентификатором LEFTCOLUMN является контейнером для всего меню. Чтобы это проверить, откроем файл TEMPLATE.CSS в папочке TEMPLATE на нашем сайте, найдем с помощью поиска идентификатор LEFTCOLUMN и впишем к прочему строчку «border: 1 px solid black;». Это очертит его границы.

Да, действительно LEFTCOLUMN содержит все меню, следовательно, с ним и надо работать. Сразу увеличим отступ от хедера, чтобы выровнять меню с текстом справа. Для этого вместо margin:0; пропишем margin: 23px 0 0 0;, то есть добавим сверху дополнительное расстояние.

Далее находим класс leftcolumn h3, отвечающий за заголовок меню и увеличиваем в нем шрифт на один пиксель.

Ищем далее, и находим класс leftcolumn для маркированного списка класса menu «ul.menu». Здесь я также увеличил размер шрифта на один пиксель, а кроме того, увеличил отступ от левого края до текста ссылки.

Кроме того, я искал, где увеличить вертикальный отступ элементов меню друг от друга, и нашел его в классе leftcolumn ul.menu.

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

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

Как поменять копирайт на Joomla?

Последний вопрос, который мы решим, это смена копирайтов.

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

Сменить эту строчку на что-то более подходящее несложно. Здесь мы поступаем также, как в случае, когда скрывали ссылку в левой части меню. Откроем файл TEMPLATE.PHP, находящийся в папке шаблона X:\home\localhost\www\site\templates\siteground-j15-42\, и там, в самом низу находим строчки, ответственные за вывод копирайтов.

Проще всего эту строчку попросту стереть, и написать на ее место свой текст, но мы так делать не будем из благодарности и к сайту joomla, и к автору шаблона. Поэтому сделаем эту строчку просто невидимой, заключив ее в отдельный абзац и дописав style=»visibility:hidden;», а названию сайта, которое выводится средствами PHP, добавим свой текст по желанию (на рисунке подчеркнуто то, что я добавил сам).

Однако перейдя на сайт, видим, что лишний текст удалился не весь.

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

Однако обновив страницу, видим, что опять что-то не так. Надпись находится левее, чем нам надо.

Здесь я просто расширил размеры контейнера для текстовой строчки, сменив ее с 700 до 875 пикселей. Если вам трудно прикинуть, насколько менять размер, не забывайте, что строку можно обвести при помощи стилевого свойства «border: 1px solid black;»

Ну вот, пожалуй, и все. Мы поменяли копирайты.

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

joomla фото

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

 
Powered by SH CMS (www.shchms.ru)