templates/areas/content-brick/layouts/text-image.html.twig line 1

Open in your IDE?
  2. {% set hasImage = editmode || (overrideImage ?? null) || not pimcore_image('image').isEmpty() %}
  4. {% set showReadmoreMobile = pimcore_checkbox("showReadmoreMobile").getData() %}
  5. {% set showReadmore = pimcore_checkbox("showReadmore").getData() %}
  7. {% set hideMediaOnMobile = pimcore_checkbox("hideMediaOnMobile").getData() %}
  9. {% set showRentalFormButton = pimcore_checkbox('showRentalFormButton').getData() %}
  10. {% set showRentalFormButtonColor = pimcore_select('showRentalFormButtonColor').getData() %}
  12. {% set showCustomButtonComment = pimcore_checkbox('showCustomButtonComment').getData() %}
  13. {% set customButtonComment = pimcore_input('customButtonComment').getData() %}
  15. <div class="container grid justify-center grid-cols-1 gap-6 mx-auto text-base md:text-lg md:grid-cols-2">
  16.     <div class="
  17.         md:flex md:items-center
  18.         {% if hasImage %}
  19.             {{ pimcore_select('inverted').data ? 'md:order-2 lg:pl-16'  : 'md:order-1 lg:pr-16' }}
  20.         {% else %}
  21.             col-span-1 md:col-span-2
  22.         {% endif %}
  23.         {{ hideMediaOnMobile ? 'pt-4 md:pt-0' : '' }}
  24.     "
  25.         x-data="{ contentOpen: false }"
  26.     >       
  27.         <div>
  28.             {% include 'areas/content-brick/partials/_headline.html.twig' %}
  30.             {% include 'areas/content-brick/partials/_title.html.twig' %}
  32.             <div 
  33.                 class="relative overflow-hidden"
  34.                 {% if showReadMore is defined and showReadMore %}
  35.                     :class="{'max-h-36 {{ showReadmoreMobile ? 'md:max-h-fit' : ''}}': !contentOpen }"
  36.                 {% endif %}
  37.             >
  38.                 {% include 'areas/content-brick/partials/_wysiwyg.html.twig' %}
  40.                 {% if showReadmore %}
  41.                     <div 
  42.                         class=" flex flex-col justify-end bottom-0 w-full  min-h-[100px]
  43.                         {{ showReadmoreMobile ? 'md:hidden' : ''}}"
  44.                         :class="!contentOpen ? 'absolute bg-gradient-to-t from-white via-white' : ''"     
  45.                     >
  46.                         <button 
  47.                             class="button button__secondary group"
  48.                             @click="contentOpen = !contentOpen"
  49.                         >
  50.                             <span x-show="!contentOpen">{{ 'Lees meer' | trans }}</span>
  51.                             <span x-show="contentOpen">{{ 'Lees minder' | trans }}</span>
  52.                             <span class="flex items-center justify-center w-6 h-6 ml-3 bg-white rounded-full shadow-md text-blue group-hover:bg-blue group-hover:text-white">
  53.                                 <svg
  54.                                     x-show="!contentOpen"
  55.                                     class="w-3.5 shrink-0"
  56.                                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="nonzero" d="M6.68 0h.024a.929.929 0 0 1 .916.915l.07 4.994 4.994.07a.93.93 0 0 1 .916.916.878.878 0 0 1-.866.89h-.024l-4.995-.07.07 4.995a.878.878 0 0 1-.89.89.93.93 0 0 1-.915-.916L5.91 7.69.914 7.62A.93.93 0 0 1 0 6.704a.878.878 0 0 1 .89-.89l4.994.07L5.814.89A.878.878 0 0 1 6.68 0Z"/>
  57.                                 </svg>
  58.                                 <svg
  59.                                     x-show="contentOpen"
  60.                                     class="w-3.5 shrink-0"
  61.                                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 3"><path fill="currentColor" fill-rule="nonzero" d="M12.684.979a.929.929 0 0 1 .916.916.878.878 0 0 1-.866.89h-.024L.915 2.62A.929.929 0 0 1 0 1.704a.878.878 0 0 1 .89-.89l11.794.165Z"/>
  62.                                 </svg>  
  63.                             </span>
  64.                         </button>
  65.                     </div>
  66.                 {% endif %}
  67.             </div>
  69.             {% if editmode %}
  70.                 <div class="mt-8">
  71.                     <label class="block">
  72.                         {{ pimcore_checkbox('showReadmore', { reload: true }) }}
  73.                         <span>Toon 'Lees meer' button voor bovenstaande tekst.</span>
  74.                     </label>
  75.                     <label class="block">
  76.                         {{ pimcore_checkbox('showReadmoreMobile', { reload: true }) }}
  77.                         <span>Toon 'Lees meer' button alleen op mobiele devices.</span>
  78.                     </label>
  79.                 </div>
  80.             {% endif %}
  82.             {% include 'areas/content-brick/partials/_usps.html.twig' %}
  84.             {% include 'areas/content-brick/partials/_form-builder.html.twig' with {
  85.                 'fieldName' : 'formbuilder-select_text-image' }
  86.             %}
  88.             {% include 'areas/content-brick/partials/_buttons.html.twig' with {
  89.                 product: product ?? null,
  90.                 productCategory: productCategory ?? null,
  91.                 showRentalFormButton: showRentalFormButton ?? null,
  92.                 showRentalFormButtonColor: showRentalFormButtonColor ?? null,
  93.                 greenButton: true,
  94.                 showCustomButtonComment: showCustomButtonComment ?? null,
  95.                 buttonComment: customButtonComment !== '' ? customButtonComment : 'Binnen één dag vrijblijvend een offerte'|trans
  96.             } %}
  97.         </div>
  98.     </div>
  100.     {% if hasImage %}
  101.         <div class="md:flex md:items-center 
  102.             {{ pimcore_select('inverted').data ? 'md:order-1' : 'md:order-2' }}
  103.             {{ hideMediaOnMobile ? 'hidden md:block' : '' }}
  104.         ">
  105.             {% if overrideImage is defined and overrideImage and pimcore_image('image').isEmpty() %}
  106.                 {% include('areas/content-brick/partials/override-image.html.twig') %}
  107.             {% else %}
  108.                 {{ pimcore_image('image', {
  109.                     class: 'block overflow-hidden rounded-md',
  110.                     thumbnail: 'content',
  111.                     pictureAttributes: {class: 'block overflow-hidden rounded-md'}
  112.                 }) | raw }}
  113.             {% endif %}
  114.         </div>
  115.     {% endif %}
  116. </div>