<!-- ### Begin: Element menu_thumbnail_list ### -->
<div id="c277" class="frame frame-default frame-type-menu_thumbnail_list frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<header class="frame-header">
<h2 class="element-header">
Thumbnails
</h2>
</header>
<div class="thumbnail-menu thumbnail-menu-align-left thumbnail-menu-columns-3">
<div class="thumbnail-menu-item">
<a href="#" target="_blank" title="Page 1" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 1
</h3>
<p class="thumbnail-menu-caption-subtitle">
From above
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 2" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 2
</h3>
<p class="thumbnail-menu-caption-subtitle">
Cheers For The Years
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 3" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 3
</h3>
<p class="thumbnail-menu-caption-subtitle">
Photo by Geran de Klerk
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 4" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 4
</h3>
<p class="thumbnail-menu-caption-subtitle">
Bird eye’s view!
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 5" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 5
</h3>
<p class="thumbnail-menu-caption-subtitle">
Photo by Nikita Maru
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 6" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 6
</h3>
<p class="thumbnail-menu-caption-subtitle">
Big Sur Road Trip
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element menu_thumbnail_list ### -->
{% extends '@wrapper-frame' %}
{% import '@macro-format' as format %}
{% set CType = 'menu_thumbnail_list' %}
{% set maxItems = maxItems|default(0) %}
{% block main %}
{% include '@atom-header' %}
{% if menu %}
{# TODO: <f:variable name="imageConfig">{settings.responsiveimages.contentelements.menu_thumbnail_list.{data.pi_flexform.columns}}</f:variable>
<bk2k:data.imageVariants as="variants" variants="{variants}" multiplier="{imageConfig.multiplier}" gutters="{imageConfig.gutters}" corrections="{imageConfig.corrections}" /> #}
{# TODO: <f:render partial="Menu/SkipNavigation" arguments="{_all}" /> #}
<div class="thumbnail-menu thumbnail-menu-align-{{
data.pi_flexform.align
}} thumbnail-menu-columns-{{ data.pi_flexform.columns }}">
{% for page in menu %}
{% if maxItems == 0 or loop.index0 < maxItems %}
{% if page.files[0] %}
<div class="thumbnail-menu-item">
{% set target = page.target
? 'target="' ~ page.target ~ '"'
: ''
%}
<a href="{{ page.link }}"
{{ target }}
title="{{ page.title }}"
class="thumbnail-menu-link"
data-toggle="tooltip">
<div class="thumbnail-menu-image">
{% include '@atom-image' with {
file: page.files[0]
} %}
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
{{
format.crop(
page.title,
settings.menucard.title.crop
)
}}
</h3>
{% if page.data.subtitle %}
<p class="thumbnail-menu-caption-subtitle">
{{
format.crop(
page.data.subtitle,
settings.menucard.subtitle.crop
)
}}
</p>
{% endif %}
</div>
</div>
</a>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endblock %}
{
"bodytext": null,
"categories": null,
"CType": null,
"customId": null,
"date": null,
"frame_class": null,
"header": "Thumbnails",
"header_color": null,
"header_layout": 2,
"header_link": null,
"header_position": null,
"header_style": null,
"layout": null,
"space_after_class": null,
"space_before_class": null,
"space_inner_after_class": null,
"space_inner_before_class": null,
"subheader": null,
"target": null,
"maxItems": null,
"data": {
"readmore_label": "Read more",
"pi_flexform": {
"align": "left",
"columns": 3
}
},
"settings": {
"menucard": {
"title": {
"crop": 0
},
"subtitle": {
"crop": 0
},
"abstract": {
"crop": 0
},
"icon": {
"width": 32,
"height": 32
}
}
},
"menu": [
{
"title": "Page 1",
"link": "#",
"target": "_blank",
"files": [
{
"holder": {
"width": 640,
"height": 360
}
}
],
"icon": [
{
"title": null,
"alternative": null,
"extension": null
}
],
"data": {
"subtitle": "From above",
"abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
}
},
{
"title": "Page 2",
"link": "#",
"target": null,
"files": [
{
"holder": {
"width": 640,
"height": 360
}
}
],
"icon": {
"title": null,
"alternative": null,
"extension": null
},
"data": {
"subtitle": "Cheers For The Years",
"abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
}
},
{
"title": "Page 3",
"link": "#",
"target": null,
"files": [
{
"holder": {
"width": 640,
"height": 360
}
}
],
"icon": {
"title": null,
"alternative": null,
"extension": null
},
"data": {
"subtitle": "Photo by Geran de Klerk",
"abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
}
},
{
"title": "Page 4",
"link": "#",
"target": null,
"files": [
{
"holder": {
"width": 640,
"height": 360
}
}
],
"icon": {
"title": null,
"alternative": null,
"extension": null
},
"data": {
"subtitle": "Bird eye’s view!",
"abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
}
},
{
"title": "Page 5",
"link": "#",
"target": null,
"files": [
{
"holder": {
"width": 640,
"height": 360
}
}
],
"icon": {
"title": null,
"alternative": null,
"extension": null
},
"data": {
"subtitle": "Photo by Nikita Maru",
"abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
}
},
{
"title": "Page 6",
"link": "#",
"target": null,
"files": [
{
"holder": {
"width": 640,
"height": 360
}
}
],
"icon": {
"title": null,
"alternative": null,
"extension": null
},
"data": {
"subtitle": "Big Sur Road Trip",
"abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
}
}
]
}
No notes defined.