src/Package/Openform/Front/Templates/_blocks_sections/_text_image.html.twig line 1

Open in your IDE?
  1. {% from '@openform_front_templates/_includes/_icons.html.twig' import arrowright %}
  2. {% set img = block.imagePath %}
  3. {% if block.Translation[app.request.locale].title or block.Translation[app.request.locale].text or img %}
  4.     {% set mobile = openform_front_util.isMobileDevice() %}
  5.     {# image position #}
  6.     {# 
  7.      IMAGE_POSITION_LEFT = 'left';
  8.      IMAGE_POSITION_RIGHT = 'right';
  9.      IMAGE_POSITION_CENTER = 'center'; 
  10.     #}
  12.     {# {% if block.imagePosition == constant('\\App\\Package\\Openform\\Base\\Entity\\AbstractArticleBlock::IMAGE_POSITION_LEFT') %} #}
  14.         <section class="block-item block-image {% if mobile %}block-text--mobile block-image--mobile{% endif %} {% if not mobile %}block-image--position-{{ block.imagePosition }}{% endif %}">
  15.             {% if block.Translation[app.request.locale].title and block.titleOnImage == false %}
  16.                 <div class="block-image__title block__h3 {% if block.Translation[app.request.locale].link %}hover{% endif %}">
  17.                 {% if block.Translation[app.request.locale].link %} <a href="{{block.Translation[app.request.locale].link}}">{% endif %}
  18.                     {{ block.Translation[app.request.locale].title|raw }}
  19.                 {% if block.Translation[app.request.locale].link %} </a>{% endif %}
  20.                 </div>
  21.             {% endif %}
  22.             
  23.             
  24.             <div class="block-image__container"{% if block.titleOnImage and mobile %}style="flex-direction: column-reverse;"{% endif %}>
  25.                 <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 %}>
  26.                 {% if block.Translation[app.request.locale].link %} <a href="{{block.Translation[app.request.locale].link}}">{% endif %}
  27.                     {% if block.Translation[app.request.locale].text %}
  28.                         <div class="block__text" {% if block.titleOnImage and mobile %}style="margin-top: 27px;"{% endif %}>
  29.                             {{ block.Translation[app.request.locale].text|raw }}
  30.                         </div>
  31.                     {% endif %}
  32.                     {% 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) %}
  33.                         <div class="block-text__btns">
  34.                             <div class="block-text__btns__btn">
  35.                                 <span>{{ block.Translation[app.request.locale].buttonLabel }}</span>
  36.                                 {{arrowright()}}
  37.                             </div>
  38.                         </div>
  39.                     {% endif %}
  40.                 {% if block.Translation[app.request.locale].link %}</a>{% endif %}
  41.                 </div>
  42.                 <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 %}>
  43.                     {% 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 %}
  44.                     
  45.                     {% if block.Translation[app.request.locale].title and block.titleOnImage %}
  46.                         <div class="block-image__image__title block__h4" style="background: {{block.colorTitleBackground|default('#F5DB7B') }};">
  47.                             {{ block.Translation[app.request.locale].title|raw }}
  48.                         </div>
  49.                     {% endif %}
  50.                     {% if img %}
  51.                         <img class="block-image__image__img" loading="lazy" src="{{asset(img)}}" alt="{{ block.Translation[app.request.locale].fileAlt }}">
  52.                     {% endif %}
  53.                     {% if block.Translation[app.request.locale].link %}</a>{% endif %}
  54.                     {% set alt = block.Translation[app.request.locale].fileaudioAlt %}
  55.                     {% set fileTitle = block.Translation[app.request.locale].fileaudioTitle %}
  56.                     {% if block.filePath and openform_front_util.isMp3File(block.filePath) %}
  57.                     <div class="block-image__image__audio">
  58.                         <div class="block-audio__player">
  59.                             <audio controls class="js-audio-player block-audio__inner">
  60.                                 <source src="{{ block.filePath }}" aria-label="{{alt}}" title="{{fileTitle}}">
  61.                                 Your browser does not support the audio element.
  62.                             </audio>
  63.                         </div>
  64.                     </div>
  65.                     {% endif %}
  66.                     {% if block.Translation[app.request.locale].link and block.Translation[app.request.locale].buttonLabel and mobile and not block.titleOnImage  %}
  67.                         <div class="block-text__btns">
  68.                             <div class="block-text__btns__btn">
  69.                                 <span>{{ block.Translation[app.request.locale].buttonLabel }}</span>
  70.                                 {{arrowright()}}
  71.                             </div>
  72.                         </div>
  73.                     {% endif %}
  74.                 </div>
  75.             </div>
  76.     </section>
  77. {% endif %}