bundles/AppBundle/Resources/views/Areas/image-and-items/view.html.twig line 1

Open in your IDE?
  1. {% set headlineInput = pimcore_input('headline') %}
  2. {% set align = pimcore_select('align').getValue() %}
  4. {% set largeImage = pimcore_image('image1') %}
  5. {% set largeHeadline = pimcore_wysiwyg('headline1') %}
  6. {% set largeMeta = pimcore_input('meta1') %}
  7. {% set largeColor = pimcore_select('textColor1').getValue() %}
  8. {% set largeColorHeadline = pimcore_select('headlineColor1').getValue() %}
  9. {% set largeLink = pimcore_link('link1') %}
  10. {% set largeRatio = pimcore_checkbox('keepAspectRatio1').isChecked() %}
  11. {% set largeFont = pimcore_checkbox('customFont1').isChecked() %}
  13. {% set smallImage = pimcore_image('image0') %}
  14. {% set smallHeadline = pimcore_wysiwyg('headline0') %}
  15. {% set smallMeta = pimcore_input('meta0') %}
  16. {% set smallColor = pimcore_select('textColor0').getValue() %}
  17. {% set smallColorHeadline = pimcore_select('headlineColor0').getValue() %}
  18. {% set smallLink = pimcore_link('link0') %}
  19. {% set smallRatio = pimcore_checkbox('keepAspectRatio0').isChecked() %}
  20. {% set smallFont = pimcore_checkbox('customFont0').isChecked() %}
  22. <div class="{{ pimcore_input('classes').data }}">
  23.     <div class="module-container image-and-items-module-container">
  24.         <section class="module-section image-and-items-module">
  25.             <div class="container">
  26.                 {% if editmode %}
  27.                     <h4 class="h1">{{ headlineInput | raw }}</h4>
  28.                 {% else %}
  29.                     {% if headlineInput.getValue() %}
  30.                         <div class="headline px-5 lg:px-0"><h4 class="h1">{{ headlineInput.getValue() }}</h4></div>
  31.                     {% endif %}
  32.                 {% endif %}
  33.                 <div class="grid grid-cols-12 gap-5 mt-0 mb-10 md:mt-20 md:mb-20">
  34.                     <div class="col-span-12 md:col-span-7 {% if align == 'right' %}md:order-1{% else %}md:order-2{% endif %} pt-10 md:pt-24">
  35.                         {% if largeImage and largeImage.getSrc() %}
  36.                             <div class="relative {% if not largeRatio %}aspect-w-4 aspect-h-3{% endif%} fade-in">
  37.                                 <img src="{{ largeImage.getThumbnail('stageThumbnailMobile').getPath() }}" class="{% if not largeRatio %}object-cover object-center h-full{% endif%} w-full" title="">
  38.                             </div>
  39.                         {% endif %}
  40.                         {% if not editmode and largeHeadline.getValue() %}
  41.                             <div class="md:hidden shadow-card {{ largeColor }} transform {% if align == 'right' %}md:-translate-x-1/4{% else %}md:translate-x-1/4{% endif %}">
  42.                                 <div class="p-5 flex md:min-h-300 relative">
  43.                                     <div class="self-end w-5/6">
  44.                                         <div class="font-mont-heavy text-sm mb-3">{{ largeMeta.getValue() | raw }}</div>
  45.                                         <div class="text-balance {% if not largeFont %}font-mont-heavy text-3xl md:text-4xl{% endif %} {{ largeColorHeadline }}">
  46.                                             {{ largeHeadline.getValue() | raw }}
  47.                                         </div>
  48.                                         {% if largeLink.getHref() %}
  49.                                             <div class="mt-3">
  50.                                                 <a class="link {{ largeColor }}" href="{{ largeLink.getHref() }}" target="{{ largeLink.getTarget() }}">{{ largeLink.getText() }}</a>
  51.                                             </div>
  52.                                         {% endif %}
  53.                                     </div>
  54.                                 </div>
  55.                             </div>
  56.                         {% endif %}
  57.                     </div>
  58.                     <div class="col-span-12 md:col-span-5 z-10 {% if align == 'right' %}md:order-2{% else %}md:order-1{% endif %}">
  59.                         {% set isHidden = not editmode and (smallHeadline.getValue() == "" and (smallImage and not smallImage.getSrc()) and smallMeta.getValue() == "") %}
  60.                         <div class="relative group mb-10 fade-in delay-200 {% if isHidden %}hidden{% endif%} {{ smallColor }} {% if smallColor == 'dark' %}bg-gray-200 {% elseif smallColor == 'light' %}bg-gray-800{% endif %}">
  61.                             {% if smallImage and smallImage.getSrc() %}
  62.                                 <div class="absolute w-full h-full overflow-hidden">
  63.                                     <img src="{{ smallImage.getThumbnail('stageThumbnailMobile').getPath() }}" class="object-cover object-center w-full h-full transition-all group-hover:scale-110 group-hover:rotate-2 duration-1000 ease-out" title="">
  64.                                 </div>
  65.                             {% endif %}
  66.                             <div class="p-5 flex min-h-300 relative">
  67.                                 <div class="self-end">
  68.                                     <div class="font-mont-heavy text-sm mb-3">{{ smallMeta | raw }}</div>
  69.                                     <div class="text-balance {% if not smallFont %}font-mont-heavy text-3xl md:text-4xl{% endif%} {{ smallColorHeadline }}">
  70.                                         {{ smallHeadline | raw }}
  71.                                     </div>
  72.                                     {% if editmode %}
  73.                                         <div class="mt-3">{{ smallLink | raw }}</div>
  74.                                     {% elseif smallLink.getHref() %}
  75.                                         <div class="mt-3">
  76.                                             <a class="link {{ smallColor }}" href="{{ smallLink.getHref() }}" target="{{ smallLink.getTarget() }}">{{ smallLink.getText() }}</a>
  77.                                         </div>
  78.                                     {% endif %}
  79.                                 </div>
  80.                             </div>
  81.                         </div>
  82.                         {% if editmode or largeHeadline.getValue() %}
  83.                             <div class="relative fade-in delay-400 hidden md:block">
  84.                                 <div class="shadow-card bg-white {{ largeColor }} transform {% if align == 'right' %}md:-translate-x-1/4{% else %}md:translate-x-1/4{% endif %}">
  85.                                     <div class="p-5 flex relative">
  86.                                         <div class="self-end w-5/6">
  87.                                             <div class="font-mont-heavy text-sm mb-3">{{ largeMeta | raw }}</div>
  88.                                             <div class="text-balance {% if not largeFont %}font-mont-heavy text-3xl md:text-4xl{% endif%} {{ largeColorHeadline }}">{{ largeHeadline | raw }}</div>
  89.                                             {% if editmode %}
  90.                                                 <div class="mt-3">{{ largeLink | raw }}</div>
  91.                                             {% elseif largeLink.getHref() %}
  92.                                                 <div class="mt-3">
  93.                                                     <a class="link {{ largeColor }}" href="{{ largeLink.getHref() }}" target="{{ largeLink.getTarget() }}">{{ largeLink.getText() }}</a>
  94.                                                 </div>
  95.                                             {% endif %}
  96.                                         </div>
  97.                                     </div>
  98.                                 </div>
  99.                             </div>
  100.                         {% endif %}
  101.                     </div>
  102.                 </div>
  103.             </div>
  104.         </section>
  105.     </div>
  106. </div>