{% if editmode %}
<div class="alert alert-secondary">
{{ 'Please use same aspect ratio images for best result.' }}
</div>
{% endif %}
{% set id = uniqid('heroGrid-') %}
<section id="{{ id }}" class="section grid-gallery no-gutters {{ (not editmode?'row':'') }}">
{% for i in pimcore_iterate_block(pimcore_block('heroGridBlock', {class:'row m-0'})) %}
<div class="grid-gallery-item grid-gallery-item-{{ id }}-{{ i }} {{ (not editmode?'col-md-6':'') }} zoom-outer">
{% if not editmode %}
<a href="{{ pimcore_link('heroGridLink' ~ i).href }}">
{% endif %}
<span class="tint {{ (not editmode?'zoom-inner':'') }}">
{{
pimcore_image('heroGridImage' ~ i, {
dropClass: 'grid-gallery-item-' ~ id ~ '-' ~ i,
reload: true,
hidetext: true,
thumbnail: 'heroGrid',
imgAttributes: {class: 'img-fluid'},
title: 'Drag background image here'
})
}}
</span>
<span class="grid-gallery-item-text">
<h2 class="text-uppercase">{{ pimcore_input('heroGridHeadline' ~ i,{placeholder: 'Headline'}) }}</h2>
<h5>{{ pimcore_input('heroGridSubheadline' ~ i,{placeholder: 'Sub Headline'}) }}</h5>
{% if editmode %}
<div class="mx-auto">{{ pimcore_link('heroGridLink' ~ i) }}</div>
{% endif %}
</span>
{% if not editmode %}
</a>
{% endif %}
</div>
{% endfor %}
</section>