Thumbnail - вывод уменьшенного изображения

Thumbnail - вывод уменьшенного изображения

Инструкция thumbnail предназначена для генерации уменьшеных изображений. Может использоваться совместно с инструкциями foreach или formdata. В этом случае имена картинок берутся из поля images текущей формы. По-умолчанию картинка возвращается через стиль background, но если указать в атрибуте size третье значение src, тогда путь к изображению будет прописан в атрибут src

Значения атрибутов:

data-role - указывает имя инструкции thumbnail
form - имя формы
item - имя записи
size - через ; указывается размер генерируемого изображения,
        третий параметр может быть указан src, 
        тогда изображение возвращается в атрибут src
src - путь к оригиналу генерируемого изображения
noimg - путь к изображению, которое отображается, если не найдено изображение в src
offset - отступ в % от края оригинального изображения
json - используется для передачи списка имён изображений
vars - используется для передачи переменных в формате json

Пример

В данном примере выводятся все изображения текущей записи формы

<ul class="bxslider" data-role="foreach" from="images" vars='{"item_id":"{{id}}"}'>
            <li>
                <a href="#">
                    <img data-role="thumbnail" 
                    size="160px;100px;src" 
                    src="/uploads/obj/55c208d4/{{img}}" title="{{title}}">
                </a>
            </li>
        </ul>

Пример

В этом примере выведется превью первой картинки 160x100 формы page записи slideshow

<img data-role="thumbnail" size="160px;100px;src" form="page" item="slideshow">

Интеграция с Bootstrap v.3

Чистый & понятный код

Парсер DOM в PHP