Мир изумительно хорош, пока работаешь, чтобы ЖИТЬ!
А не живешь, чтобы РАБОТАТЬ!


Шаблоны вывода фото и изображений


В разделе "Папки для фото и изображений" документации рассматривался вариант вывода изображений из папки "Туфли". При этом галерея сформировалась автоматически и поместилась на страницу. Если вы еще не смотрели этот пример, то посетите эту страницу документации. Предположим мы хотим, чтобы вывод происходил не в виде галереи, а в виде таблицы. Чтобы получить такое нам сначала необходимо создать подшаблон (см. шаблон сайта и подшаблоны):

 

В подшаблоне видно, что сначала на страницу будет выведен контент (содержимое) страницы, набранный в редакторе. Ниже располагается таблица, строки которой буду сформированы системой. По правилу, если в настройках для страницы указана папка с изображениями, то они будут помещены в переменную контент, а если контент не пустой, то в субконтент. Указываем подшаблон в настройках страницы, а также автовывод изображений из папки с изображениями "Туфли с шаблоном":

 

. Чтобы каждое изображение выводилось в виде строки таблицы зададим шаблон для вывода фото из папки. Для шаблона вывода изображений можно использовать следующие переменные:

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

 

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

Давате подытожим. Был сделан подшаблон вывода страницы такой, чтобы вывод изображений происходил в таблицу. Затем сделан шаблон вывода изображений в виде строк таблицы. Для описаний изображений была задана структура в виде наименования, цены оптовой и цены розничной. Результат работы системы при таких настройках вы можете видеть ниже. Вы по-прежнему можете навести курсор мыши на нужное изображение и щелкнув просмотреть его в "полный рост". И еще, если набрать адрес страницы, где выведены изображения с полями описания,  прибавив к адресу параметр "ed" (например, demo.osnovnoe.info/10-foto_templates.html?ed ) , то система позволяет править каждое поле описания прямо на странице, не обращаясь в админку. Это очень удобно если надо поправить, скажем, цены.

Если изображения в шаблоне показываются в значительно меньшем размере, чем в исходном изображении, то можно заставить систему автоматически создавать изображение-миниатюру подходящего меньшего размера и выводить ее в шаблон. Для этого в шаблоне в теге IMG следует прописать onload="getThumb(this)" src="pusto~12.gif" data-src="{FOTO}". В этом случае система сама определит с каким фактическим размером должно быть показано изображение на странице, создаст миниатюру этого изображения на сервере и передаст в шаблон адрес миниатюры. Это экономит трафик, увеличивает скорость загрузки страницы. А если надо при щелчке на изображении посмотреть его в натуральную величину, то следует элемент IMG поместить в элемент А, в котором прописано следующее: class="highslide" href="{FOTO}" onclick="return hs.expand(this)".

Все вышеописанное проиллюстрировано примером ниже.
Внимание! В настоящее время шаблон для изображений может содержать в начале секцию стилей, которая будет выделена из шаблона и вставлена один раз перед выводом изображений по указанному шаблону. Также если изображения должны выводиться в таблицу, как в этом примере, то шаблон для изображений удобно сразу представить таблицей (укажите ей ID="КОНТЕЙНЕР") со строками и столбцами - это также позволит просмотреть как будут выглядеть изображения в таблице еще на этапе проектирования (недавно добавлена кнопка "предпросмотр"). При выводе изображений по такому шаблону строки будут размножены, т.е для каждого изображения будет своя строка.

1туфли образец 5352 руб.553 руб.
туфли образец 5
2туфли образец 2220 руб.300 руб.
туфли образец 2
3туфли образец 6310 руб.390 руб.
туфли образец 6
4туфли образец 1300 руб.400 руб.
туфли образец 1
5туфли образец 7270 руб.320 руб.
туфли образец 7
6туфли образец 3350 руб.500 руб.
туфли образец 3
7туфли образец 4387 руб.430 руб.
туфли образец 4


Интересен вариант вывода основного изображения с его вариантами, которые хранятся в отдельной папке, имя которой совпадает с именем файла, но не имеет расширения. Например, для файла myfoto.gif папка должна иметь имя myfoto. Слева приведен пример вывода, а внизу текст шаблона.
Обратите внимание, что подвал шаблона, где расположены дополнительные фотографии, был получен как копия блока с типом "flex". Т.е. после вставки его на страницу были сделаны настройки, а потом код был скопирован в шаблон. Однако вместо имени файла изображения в шаблоне применены переменные:
{IMG_FOLDER }/*{IDFOTO }

{IMG_FOLDER } - вставляет имя папки из которой идет вставка основных изображений (читается из настроек страницы) и {IDFOTO }- это имя самого изображения. Поскольку перед именем файла изображения стоит звездочка, то система ищет папку, имя которой равно имени файла без расширения, и выводит изображения из нее.


WEB-платформа для владеющих PHP
» новации,ускоряющие разработку <IMG>-вых сайтов!