Вход для клиентов и партнеров
в начало сайта
Партнерская программаОнлайн демоСкачатьКарта сайта
 

Регламент
Документация
Часто задаваемые вопросы (FAQ)
Решения типовых вопросов
Форум поддержки
Библиотека разработчика

Посмотрите демо-ролики и убедитесь в том, что "Twilight CMS" очень удобна в управлении, понятна и проста.

Бесплатно скачайте "Twilight.Basic", установите на своем компьютере и изучите систему более детально.

Если вам нужно установить "Twilight CMS" на существующий сайт или разработать новый - обращайтесь в отдел интеграции.

 

Ваше имя
Ваш Email
Вопрос
Twilight.basic
  • Узнайте больше
  • Сравните версии
  • Twilight.selection
  • Узнайте больше
  • Сравните версии
  • Twilight.evolution
  • Узнайте больше
  • Сравните версии
  •  
    Главная // Библиотека разработчика // Справочники // Книга рецептов (Cookbook) // Стандартные решения типовых задач //

    Галерея изображений с подразделами


    Типовой вопрос

    "Попытался сделать фотогалерею. В главном меню ссылка на страницу "Галерея", на которой своё собственное меню "gallery", которое в свою очередь указывает на страницы, выводящие превьюшки через сервис "news". Смотрится неплохо, но путь получился тупиковый, ибо оперативно добавлять такие страницы через админзону не получится - надо добавлять справочники вручную.

    А как можно организовать галерею, разбитую на подразделы?"

    Типовой подход

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

    Вариантов решения, как всегда, несколько.

    Если рубрикатор неограниченной вложенности, то делается каталог галерей, к элементам которого цепляются галереи, а папки являются категориями (см. http://www.twl.ru/tsdn/typical_tasks/image_gallery_linked_to_catalog).

    Если рубрикатор, имеет фиксированное количество уровней, то можно использовать вложенные списки (см. http://www.twl.ru/tsdn/typical_tasks/linked_tables). Таким образом, на первом уровне получается справочник, элементами которого являются записи, одним из полей которых является еще один справочник. В принципе можно и еще вложение сделать, и еще, главное что глубина фиксирована и новые уровни туда без участия разработчика редактор сайта не добавит сам никак (в большинстве случаев это и не нужно). Относительно неудобно будет строить навигацию, хотя при двух уровнях это совершенно не проблема.

    Можно сделать ещё проще. Первый уровень - это справочник с категориями:

    Сущность в Data/entities.xml:

    <entity id="gallery" name="Галерея">
        <field id="date" type="date" sortas="datetime[hh:mm:ss DD.MM.YYYY]" name="Дата/время (для сортировки галерей)"/>
        <field id="title" type="string" name="Название"/>
        <field id="description" type="html" name="Комментарий"/>
        <field id="folder" type="folderalias" name="Идентификатор папки с фотографиями"/>
    </entity>

    Подключение в Content/menu.xml (обычно подключается в "служебных страницах"):

    <link id="2100" title="Галереи">
        <url/>
        <admin-url editable="false">$ListEditor[table: galleries; entity: gallery]$</admin-url>
    </link>

    Галереи будут храниться в galleries.dat. Как видно из кода, в галерее есть поле type="folderalias". Это такая штука, когда указывается псевдоним папки в библиотеке файлов (предварительно нужно его задать через меню "изменить псевдоним"). Далее при выводе берется макрос News и в качестве источника данных ему говорится: "взять в библиотеке файлов папку с таким-то псевдонимом". И тогда отрисовывается справочник, элементами которого являются файлы в этой папке. Если там лежат картинки, то они просто отрисовываются по очереди в заданном разработчиком дизайне. Таким образом, при создании галереи достаточно создать папку в библиотеке файлов, дать ей псевдоним, закинуть туда сразу все фотографии (можно при загрузке файлов перетаскивать их из эксплорера или выбрать сразу несколько файлов в диалоге "Open file"), затем создать галерею и связать её с этой папкой указав её alias в поле folder.

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

    $News[source: galleries; design: galleries; sort: date, desc, auto; condition: 6F1746021DAD45AA9631F2152327F916=]$
    $News[source: galleries; design: gallery; filter: id=6F1746021DAD45AA9631F2152327F916; condition: 6F1746021DAD45AA9631F2152327F916!=]$

    Первый макрос выводит список галерей, второй - конкретную галерею, если в URL задан параметр iid, содержащий идентификатор галереи.

    Дизайны для вывода на сайте:

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

    <newsdesign id="galleries">
    <header><![CDATA[]]></header>
    <delimiter><![CDATA[]]></delimiter>
    <item>
        <![CDATA[<div class="itemhead">
        <LI>$Attribute:date$ <a href="/gallery/?iid=$Attribute:id$">$Attribute:title$</a></LI>
        </div>]]>
    </item>
    </newsdesign>

    Вывод конкретной галереи:

    <newsdesign id="gallery">
    <header><![CDATA[$JQPrettyPhoto[class: "a.img_view"]$]]></header>
    <delimiter/>
    <item><![CDATA[
        <div class="itemhead">
            <h3><a href="/gallery">$Attribute:title$</a></h3>
            <small class="metadata">
            <span class="chronodata">Опубликовано $DateTime[datetime: $Attribute:date$; format_in: "DD.MM.YYYY"; format_out: "DD MONTH_GENITIVE YYYY"]$
            </span>
            </small>
        </div>
        <div class="itemtext">
            <p>$Attribute:description$</p>
            $News[source: files\://$Attribute:folder$; design: thumbnails; condition: $Attribute:folder$!=; items_per_page: 100]$
        </div>]]>
    </item>
    <footer><![CDATA[<P>« <A HREF="/gallery">вернуться к списку</A> ]]></footer>
    </newsdesign>

    Внимание: в данном примере предполагается что список галерей и вывод конкретной галереи производятся на странице с псевдонимом gallery. Если вы используете другой псевдоним, то вы должны скорректировать все ссылки в приведенном примере дизайна соответственно. Если вы применяете другой параметр, не iid для передачи идентификатора галереи в URL, то вы должны убедиться что имя параметра и в ссылках в дизайне, и в параметрах макросов News одинаковое.

    Макрос JQPrettyPhoto позволит всем картинкам, которые обернуты в ссылки с классом img_view, не открываться в новом окне, а показываться на этой же странице во всплывающем псевдоокне. Далее, как видно в дизайне конкретной галереи, идет вывод уменьшенных изображений с помощью макроса News, в качестве источника данных которому передан псевдоним папки в библиотеке файлов со специальным префиксом files://. Символ двоеточия на всякий случай квотирован (предварен обратным слэшем).

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

    <newsdesign id="thumbnails">
    <header><![CDATA[
        <TABLE class=gallery>
        <TR>
        ]]>
    </header>
    <delimiter><![CDATA[]]></delimiter>
    <item>
        <![CDATA[<TD><A HREF="$RealmURL$/Uploads/$Attribute:filename$" title='$Attribute:desc$' target=_blank class="img_view">$Thumbnail[source: "$RealmURL$/Uploads/$Attribute:filename$"; width: 140; height: 105; mode: boundcrop; params: "class=\"bordered\" hspace=\"0\" border=\"0\" alt='$Attribute:desc$'"]$</A></TD>
        $Text[source: "</TR><TR>"; condition: $Mod[left: $Attribute:drillnumber$; right: 4]$=0]$]]>
    </item>
    <footer><![CDATA[</TR></TABLE>
        $Text[source: "<P><FONT size=+1>Страницы: $PageNavigator$</FONT>"; condition: $PageNavigator$!=]$ ]]>
    </footer>
    <empty><![CDATA[Пока в галерее нет изображений.]]></empty>
    </newsdesign>

    Тут ничего нет экстраординарного, обычный вывод уменьшенных изображений с помощью макроса Thumbnail, формирование ссылки с классом img_view (см. выше) и вывод всей галереи в 4 колонки, разбиение на которые делается с помощью макроса Mod. А также постраничный навигатор, который появится если число картинок в галерее будет больше 100 (см. выше дизайн gallery, ключ items_per_page в макросе News в дизайне gallery).

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


    « к списку

    версия для печати

     
    © 2003-18 Страта Технологии (создание сайтов, разработка cms), Twilight CMS in english.
    Наш адрес: Москва, пр. Маршала Жукова д.51
    Тел.: (495) 222-6436, E-mail: , карта сайта, условия использования информации о CMS
    Звоните через Skype:  

    Реклама: