{% from '@openform_front_templates/_includes/_icons.html.twig' import arrowright %}{% set img = block.imagePath %}{% if block.Translation[app.request.locale].title or block.Translation[app.request.locale].text or img %} {% set mobile = openform_front_util.isMobileDevice() %} {# image position #} {# IMAGE_POSITION_LEFT = 'left'; IMAGE_POSITION_RIGHT = 'right'; IMAGE_POSITION_CENTER = 'center'; #} {# {% if block.imagePosition == constant('\\App\\Package\\Openform\\Base\\Entity\\AbstractArticleBlock::IMAGE_POSITION_LEFT') %} #} <section class="block-item block-image {% if mobile %}block-text--mobile block-image--mobile{% endif %} {% if not mobile %}block-image--position-{{ block.imagePosition }}{% endif %}"> {% if block.Translation[app.request.locale].title and block.titleOnImage == false %} <div class="block-image__title block__h3 {% if block.Translation[app.request.locale].link %}hover{% endif %}"> {% if block.Translation[app.request.locale].link %} <a href="{{block.Translation[app.request.locale].link}}">{% endif %} {{ block.Translation[app.request.locale].title|raw }} {% if block.Translation[app.request.locale].link %} </a>{% endif %} </div> {% endif %} <div class="block-image__container"{% if block.titleOnImage and mobile %}style="flex-direction: column-reverse;"{% endif %}> <div class="block-image__text {% if block.Translation[app.request.locale].link %}hover{% endif %}" {% if not mobile %}style="{{ (block.imagePosition == "left" or block.imagePosition =="right") and block.textBlockWidth ? 'width: ' ~ block.textBlockWidth ~ '%;' : block.textBlockWidth ? 'max-width: ' ~ block.textBlockWidth ~ '%;' }} {{block.textBlockPaddingLeft is same as(0) ? 'padding-left: 0px;' : block.textBlockPaddingLeft ? 'padding-left: ' ~ block.textBlockPaddingLeft ~ 'px;' }} {{block.textBlockPaddingRight is same as(0) ? 'padding-right: 0px;' : block.textBlockPaddingRight ? 'padding-right: ' ~ block.textBlockPaddingRight ~ 'px;' }} {{block.textBlockPaddingTop is same as(0) ? 'padding-top: 0px;' : block.textBlockPaddingTop ? 'padding-top: ' ~ block.textBlockPaddingTop ~ 'px;'}} {{block.textBlockPaddingBottom is same as(0) ? 'padding-bottom: 0px;' : block.textBlockPaddingBottom ? 'padding-bottom: ' ~ block.textBlockPaddingBottom ~ 'px;' }}"{% endif %}> {% if block.Translation[app.request.locale].link %} <a href="{{block.Translation[app.request.locale].link}}">{% endif %} {% if block.Translation[app.request.locale].text %} <div class="block__text" {% if block.titleOnImage and mobile %}style="margin-top: 27px;"{% endif %}> {{ block.Translation[app.request.locale].text|raw }} </div> {% endif %} {% if (block.Translation[app.request.locale].link and block.Translation[app.request.locale].buttonLabel and not mobile) or (block.titleOnImage and block.Translation[app.request.locale].link and block.Translation[app.request.locale].buttonLabel and mobile) %} <div class="block-text__btns"> <div class="block-text__btns__btn"> <span>{{ block.Translation[app.request.locale].buttonLabel }}</span> {{arrowright()}} </div> </div> {% endif %} {% if block.Translation[app.request.locale].link %}</a>{% endif %} </div> <div class="block-image__image" {% if not mobile %}style="{{ (block.imagePosition == "left" or block.imagePosition =="right") and block.textBlockWidth ? 'width: calc(100% - ' ~ block.textBlockWidth ~ '%);' }}"{% endif %}> {% if block.Translation[app.request.locale].link %} <a href="{{block.Translation[app.request.locale].link}}" style="height: fit-content; display: flex; flex-direction: column;">{% endif %} {% if block.Translation[app.request.locale].title and block.titleOnImage %} <div class="block-image__image__title block__h4" style="background: {{block.colorTitleBackground|default('#F5DB7B') }};"> {{ block.Translation[app.request.locale].title|raw }} </div> {% endif %} {% if img %} <img class="block-image__image__img" loading="lazy" src="{{asset(img)}}" alt="{{ block.Translation[app.request.locale].fileAlt }}"> {% endif %} {% if block.Translation[app.request.locale].link %}</a>{% endif %} {% set alt = block.Translation[app.request.locale].fileaudioAlt %} {% set fileTitle = block.Translation[app.request.locale].fileaudioTitle %} {% if block.filePath and openform_front_util.isMp3File(block.filePath) %} <div class="block-image__image__audio"> <div class="block-audio__player"> <audio controls class="js-audio-player block-audio__inner"> <source src="{{ block.filePath }}" aria-label="{{alt}}" title="{{fileTitle}}"> Your browser does not support the audio element. </audio> </div> </div> {% endif %} {% if block.Translation[app.request.locale].link and block.Translation[app.request.locale].buttonLabel and mobile and not block.titleOnImage %} <div class="block-text__btns"> <div class="block-text__btns__btn"> <span>{{ block.Translation[app.request.locale].buttonLabel }}</span> {{arrowright()}} </div> </div> {% endif %} </div> </div> </section>{% endif %}