Галерея

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

1. Открыть модуль "Галерея" - можно, если вы пользуетесь данным модулем впервые, выбрав пункт главного меню пользователя Модули, а в нем подпункт Все модули:

Далее следует выбрать из открывшегося списка модулей модуль "Галерея":

И перевести в положение Активно графические переключатели напротив данного модуля.

Осуществив эти действия, вы сможете в будущем открывать модуль по более короткому пути - в пункте меню пользователя Модули появится подпункт "Галерея":

После чего перед вами откроется окно Категории следующего вида:

Примечание:

Данное окно, если вы прежде не работали с модулем "Галерея", окажется полностью пустым. Поскольку по умолчанию ImageCMS Shop данный модуль не имеет какого-либо наполнения.

2. Элементы модуля "Галерея" - модуль Галерея использует только собственный контент, то бишь целенаправленно внесенный в него администратором, и не подтягивает контент из вне - к примеру, из страниц товаров. Тот же принцип действует и в обратном порядке. Поэтому элементы данного модуля можно условно распределить на два вида:

2.1. Элементы, содержащие и структурирующие контент:

  • Альбом - элемент (папка), содержащий каталог изображений определенного обобщающего характера. Например: "диваны", "телефоны", "награды". Папка обязательно должна иметь привязку к категории;
  • Категория - элемент, обобщающий присвоенные ему папки. Например: категория - "Оружие", присвоенные папки - "Оружие огнестрельное", "Холодное оружие ".

2.2. Функциональные элементы модуля, доступные через окно "Категории":

  1. Блок функциональных кнопок, предоставляющих возможность администратору создавать и удалять категории и альбомы, а также осуществлять общую настройку отображения галереи.
  2. Столбец выбора - позволяет осуществлять выбор категорий, подлежащих удалению.
  3. Столбец "ID" - содержит уникальное идентификационное обозначение категории, используемое системой.
  4. Столбец "Название" - содержит обобщающее имя категории альбомов. Осуществление клика по содержимому данного столбца открывает форму редактирования категории.
  5. Столбец "Альбомы" - содержит ссылку, открывающую форму редактирования альбомов и данные о количестве альбомов, которым присвоена категория.
  6. Столбец "Описание" - содержит короткое тестовое описание, заданное администратором при создании категории модуля.
  7. Столбец "Создано" - содержит данные о времени создания категории.




3. Наполнение модуля "Галерея" контентом - следует начинать с шага создания категории при помощи кнопки "Создать категорию", которая находится в блоке функциональных кнопок. Так как для создания альбома (основного элемента, содержащего контент модуля) необходимым условием является наличие категории.

3.1. Создать категорию модуля - можно при помощи окна "Категории", осуществив клик по соответствующей кнопке Создать категорию. После чего откроется форма создания категории модуля.

В данной форме необходимо осуществить следующие действия:

  1. В поле "Название" - указать название категории. Данное действие является обязательным.
  2. В поле "Описание" - следует указать краткое описание содержимого в категории контента.
  3. В поле "Позиция" - следует указать позицию создаваемой категории в общем списке категорий.
  4. Сохранить внесенные изменения при помощи кнопки "Создать" в правом верхнем углу формы "Создать категорию":




3.2. Создать альбом - можно при помощи окна "Категории", осуществив клик по соответствующей кнопке Создать альбом. После чего откроется форма создания альбома.

В данной форме необходимо осуществить следующие действия:

  1. В поле "Категории" - осуществить выбор категории, к которой будет привязан создаваемый альбом. Данное действие является обязательным.
  2. В поле "Название" - указать название альбома. Данное действие является обязательным.
  3. В поле "Описание" - следует указать краткое описание содержимого альбома.
  4. В поле "Файл шаблона" - следует указать шаблон отображения альбома. По умолчанию используется файл album.tpl.
  5. Сохранить внесенные изменения при помощи кнопки "Создать" в правом верхнем углу формы "Создать альбом":



После осуществления указанных действий необходимо осуществить клик по ссылке "Назад" для выхода к окну просмотра созданных в модуле альбомов Альбомы:



3.2.1. Окно "Альбомы" довольно просто и функционально - оно предоставляет администратору возможность:

  1. Добавлять и просматривать содержимое альбомов.
  2. Редактировать альбомы.
  3. Удалять альбомы.
  4. Осуществлять переход обратно к форме создания альбома.


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

Далее в оперативном окне создаваемого альбома следует осуществить клик по кнопке "Добавить изображения" и указать путь к расположению необходимых файлов:

После загрузки контента в альбом необходимо сохранить осуществленные изменения при помощи кнопки "Сохранить":

Выйти из оперативного окна альбома можно при помощи ссылки "Назад".

Примечание:

Данный модуль поддерживает все популярные форматы изображений. Рекомендуемый объем изображения не более 400 - 600 Кб, размер не более 960x540 - 800x600.

3.3. Настройка изображений, содержимых в альбомах модуля Галерея, - осуществляется в оперативном окне альбома при помощи кнопки "Редактировать", которая появляется при наведении курсора на изображение, подлежащее редактированию (настройке):

Окно редактирования отдельного изображения предоставляет администратору следующие возможности:

  • Просмотреть основную информацию относительно конкретного изображения (размер изображения в пикселях, "вес" в байтах, имя, дату загрузки и количество просмотров этого изображения аудиторией интернет-магазина).
  • Скрывать изображение - изымать конкретное изображение из ротации при выводе в виде виджета и/или не отображать данное изображение при выводе галереи через меню.
  • Присваивать конкретному изображению определенный порядковый номер в общем числе отображаемых в галерее и/или альбоме изображений (в зависимости от способов вывода - через виджет или через меню).
  • Задать краткое описание изображения.
Примечание:

Данное описание будет отображаться только в случае вывода галереи через пункт меню. Так как в ImageCMS Shop не предусмотрена возможность отображения описания изображений в галерее при их выводе через виджет. Рекомендуемый объем описания - не более 400 знаков.

  • Изменить имя изображения при помощи поля "Новое имя".
Примечание:

В имени файла не допускаются кириллические символы.



3.4. Настройка модуля "Галерея" - осуществить общие настройки отображения модуля "Галерея" можно при помощи кнопки "Настройки", которая находится в блоке функциональных клавиш в окне списка категорий модуля:

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

  • часть окна "Категории и альбомы" - предоставляет возможность осуществить настройку порядка сортировки изображений как в альбомах, так и в категориях данного модуля:

  • часть окна "Изображения" - предоставляет возможность осуществить общую настройку изображений, принадлежащих модулю, путем установления общих параметров для всех загружаемых в модуль изображений. В этой части окна настроек вы можете задать такие параметры, как:
  1. максимальный размер загружаемого файла в мегабайтах;
  2. максимальную высоту и ширину изображения в пикселях;
  3. качество отображения изображений в процентах;
  4. а также при помощи ячеек выбора задать значение функциям отображения "Сохранить соотношение" и "Срезать границы":



  • часть окна "Предварительный просмотр изображений" - предоставляет возможность осуществить настройку изображений, выведенных через пункт меню и имеющих вид визуального оформления "Изображение + кнопки навигации":


В этой части окна настроек вы можете задать такие параметры, как:

  1. высоту и ширину отображаемого изображения в пикселях;
  2. при помощи ячеек выбора задать значение функциям отображения "Сохранить соотношение" и "Срезать границы":

Примечание:

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


Однако если вы желаете, чтобы ваша галерея отображалась так же, как и в ранних версиях ImageCMS Shop, тогда вам необходимо осуществить следующие действия: открыть файл album.tpl, который находится \application\modules\gallery\assets.

Найти в данном файле участок кода:

<ul class="items items-photo-galery">

               {foreach $album.images as $image}

                   <li>

                       <a href="{site_url($album_url . $image.full_name)}" class="photo-block" rel="group">

                           <img src="{site_url($thumb_url . $image.full_name)}" alt="{strip_tags($image.description)}" />

                       </a>

                       {if trim($image.description) != ''}

                           <div class="description">{$image.description}</div>

                       {/if}

                   </li>

               {/foreach}

           </ul>

(обычно это отрывок с 26 строчки кода файла по 37) и заменить его на следующее:

<table cellpadding="1" cellspacing="1" border="0">

   <tr>

       <td colspan="2">

           <a href="{media_url($album_url . $prev_img.full_name)}" title="{strip_tags($prev_img.description)}" >

               <img src="{media_url($prev_img.url)}"/>

           </a>

       </td>

   </tr>

   <tr>

       <td>

           <span>{lang('Image', 'gallery')} {$current_pos} {lang('from', 'gallery')} {count($album.images)}</span>

       </td>

       <td align="right">

           <span><a href="{site_url('gallery/thumbnails/' . $album.id)}">{lang('All images', 'gallery')}</a></span>

       </td>

   </tr>

</table>

{/*}позволяет вывести ссылки для предыдущего и последующего изображения{ */}

{if $prev}

<a href="{site_url($album_link . 'image/'. $prev.id)}"#image>{lang('Previous', 'gallery')}</a>

{/if}

{if $next}

<a href="{site_url($album_link . 'image/'. $next.id)}"#image>{lang('Next', 'gallery')}</a>

{/if}


После чего необходимо сохранить осуществленные в файле изменения.

  • часть окна "Иконки изображения" - предоставляет возможность осуществить настройку изображений галереи, выведенных как виджет.

В этой части окна настроек вы можете задать такие параметры, как:

  1. высоту и ширину отображаемого изображения в пикселях;
  2. при помощи ячеек выбора задать значение функциям отображения "Сохранить соотношение" и "Срезать границы":

  • часть окна "Водяной знак" - предоставляет возможность нанести на изображения галереи водяные знаки в виде надписи или картинки.

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

  1. определить местоположение водяного знака на изображениях;
  2. выбрать тип водяного знака - текст или изображение;
  3. далее в зависимости от предыдущего выбора типа водяного знака указать текст или файл картинки, наносимый на изображения в галерее;
  4. также в зависимости от выбора типа водяного знака произвести более детальную настройку нанесения будущего знака, указав цвет, шрифт (путь к шрифту), прозрачность и смещение:



Далее нанесенный таким образом водяной знак (в нашем примере - это надпись "Test", сделанная шрифтом Deutsch Gothic) будет отображаться при осуществлении пользователями перехода непосредственно к самому изображению:



4. Редактирование элементов модуля "Галерея" - как уже говорилось выше, к элементам данного модуля можно отнести категории, альбомы и непосредственно сами изображения.


4.1. Редактировать категории - можно при помощи окна "Категории", осуществив клик по содержимому столбца "Название":

После чего откроется окно "Редактирование категории", аналогичное окну создания категории (смотрите пункт 3.1).


4.2. Редактировать альбом - можно при помощи окна "Категории", осуществив клик по содержимому столбца "Альбомы":


В открывшемся списке альбомов, принадлежащих категории, следует осуществить выбор альбома, подлежащего редактированию, и осуществить клик по кнопке Редактировать альбом:

Открывшаяся форма редактирования полностью аналогична форме создания альбома (смотрите пункт 3.2).


4.3. Редактировать отдельное изображение - можно через окно просмотра содержимого альбома (подробнее в пункте 3.3).

5. Отображение модуля "Галерея" - данный модуль может быть представлен двумя взаимосовместимыми способами:

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

Например, если виджет добавлен в файл product.tpl, то в таком случае он будет отображаться на всех страницах товаров без исключения:

  • вывод модуля через пункт меню - осуществляется по средствам добавления соответствующего пункта в верхнем (А) и нижнем (В) меню. В таком случае покупателю необходимо осуществить целенаправленный переход по ссылке, чтобы просмотреть содержимое галереи:



5.1. Вывод через виджет - для того, чтобы вывести галерею через виджет, следует осуществить следующее:

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

В данном случае тип (А) создаваемого виджета обязательно должен быть "Модуль", а суть (В) создаваемого виджета, также определяемая при создании, обязательно должна быть выбрана "Последние изображения". Название виджета (для простоты - рекомендуется назвать виджет gallery) следует указывать латинскими символами (допускаются заглавные и цифры). Смотрите скриншот примера ниже:


  • при помощи функционала "Редактор шаблонов", доступного через пункт меню администратора "Система", открыть папку, содержащую .tpl файлы шаблона.

Нужные файлы находятся по адресу:
ваш сайт\templates\имя_шаблона\shop

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

{widget('имя_созданного_виджета')}

Примечание:

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

Образец участка кода:

<div style="margin-left: _px/%; margin-bottom: _px/%; margin-top: _px/%; margin-right: _px/%;">
{widget('имя_созданного_виджета')}
</div>

Где _px/% - значение отступа в процентах или пикселях.

5.2. Вывод галереи через пункт меню - для того, чтобы вывести галерею через пункт меню, следует осуществить следующее:

  • при помощи модуля "Меню", доступного через пункт меню администратора "Модули", открыть список созданных в вашем интернет-магазине меню:

 

  • далее следует осуществить клик по содержимому столбца "Название" соответствующего меню, через которое вы желаете вывести галерею:



  • в открывшемся функциональном окне следует осуществить следующее:

1. Осуществить клик по кнопке "Создать ссылку", которая находится в верхнем правом углу:



2. В открывшейся форме "Создание пункта меню" осуществить переход на вкладку "Модуль:



3. Со списка модулей, расположенных по левому краю вкладки, следует выбрать пункт "Галерея" (А) и осуществить при необходимости настройку отображения создаваемого пункта меню "Галерея" (В):





6. Удалить элементы модуля "Галерея" - можно при помощи списка категорий.

6.1. Удалить категорию - можно при помощи кнопки "Удалить", которая находится вверху списка категорий, предварительно осуществив выбор подлежащих удалению категорий в столбце выбора (В).

Примечание:

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


6.2. Удалить альбом - можно, осуществив клик по содержимому столбца "Альбомы" (А) напротив категории, содержащей альбом, подлежащий удалению. Далее в открывшемся списке альбомов следует воспользоваться кнопкой с изображением корзины "Удалить" (В) напротив альбома, подлежащего удалению:


6.3. Удалить модуль "Галерея", отображаемый через виджет - можно, при помощи функционала "Редактор шаблонов", удалив из соответствующего файла .tpl строку кода, отвечающую за отображение галереи (смотрите пункт 5.1).

6.4. Удалить модуль "Галерея" отображения на статической старанице - можно при помощи модуля "Меню", доступного через пункт меню администратора "Модули".

Для этого следует выбрать пункт "Галерея" (А) из списка пунктов соответствующего меню и воспользоваться клавишей "Удалить"(В), которая находится в правом верхнем углу списка:

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

О том, как осуществляется удаление пунктов меню,- смотрите здесь.