templates/areas/teaser/view.html.twig line 1

Open in your IDE?
  1. {% set headlineTag = pimcore_select('headlineTag', {
  2.     'store': [
  3.         ['none', 'none'],
  4.         ['h1', 'H1'],
  5.         ['h2', 'H2'],
  6.         ['h3', 'H3'],
  7.         ['h4', 'H4'],
  8.         ['h5', 'H5'],
  9.         ['h6', 'H6'],
  10.     ],
  11.     'defaultValue': '',
  12.     'reload': true
  13. }) %}
  15. {% if headlineTag.isEmpty() %}
  16.     {% do headlineTag.setDataFromResource('h2') %}
  17. {% endif %}
  19. {% set headline1 = headlineTag.data != 'none' ? headlineTag.data|raw : 'span'|raw %}
  20. {% set headline2 = headlineTag.data != 'none' ? '</' ~ headlineTag.data|raw ~ '>' : '</span>'|raw %}
  22. {% set twoCards = pimcore_checkbox('twoCards') %}
  23. {% if twoCards.isChecked() %}
  24.     {% set setTwoCards = '--two-cards' %}
  25. {% else %}
  26.     {% set setTwoCards = '' %}
  27. {% endif %}
  29. {% set backgroundGrey = pimcore_checkbox('background') %}
  30. {% if backgroundGrey.isChecked() %}
  31.     {% set setBackground = '--background-grey' %}
  32. {% else %}
  33.     {% set setBackground = '' %}
  34. {% endif %}
  36. {% if editmode %}
  37.     <div class="edit-box editmode">
  38.         <h1>KONFIGURATIONEN FÜR DEN AREABRICK:</h1>
  39.         <div class="flex gap-20">
  40.             <div class="content flex column gap-20">
  41.                 <div class="content-box flex gap-20">
  42.                     <div class="item">
  43.                         <p class="edit-p">Abstand nach unten wählen:</p>
  44.                         {{ pimcore_select("MarginBottom", {
  45.                             "reload": true,
  46.                             "store": [
  47.                                 ["regular", "Normal"],
  48.                                 ["half", "1/2"],
  49.                                 ["small", "1/4"],
  50.                                 ["zero", "kein Abstand"],
  51.                             ],
  52.                             "defaultValue" : "regular"
  53.                         }) }}
  54.                     </div>
  57.                     <div class="item">
  58.                         <p class="edit-p">Titel-Typ definieren:</p>
  59.                         {{ headlineTag|raw }}
  60.                     </div>
  62.                     <div class="item">
  63.                         <p class="edit-p">Two Cards</p>
  64.                         {{ twoCards|raw }}
  65.                     </div>
  67.                     <div class="item">
  68.                         <p class="edit-p">Grey Background</p>
  69.                         {{ backgroundGrey|raw }}
  70.                     </div>
  71.                 </div>
  72.             </div>
  73.         </div>
  74.     </div>
  75. {% endif %}
  78. <section class="portal-teaser {{ pimcore_select('MarginBottom').getData() }}">
  79.     <div class="container">
  80.         <div class="headline-container">
  81.             {% if editmode %}
  82.                 <div class="portal-teaser__title">
  83.                     {{ pimcore_textarea("headline",{
  84.                         "nl2br": true,
  85.                         "height": 100,
  86.                         "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  87.                     }) }}                </div>
  88.             {% elseif not pimcore_textarea('headline').isEmpty() %}
  89.                 <{{headline1|raw}} class="portal-teaser__title">
  90.                     {{ pimcore_textarea('headline').getData() | nl2br }}
  91.                 {{ headline2|raw }}
  92.             {% endif %}
  94.         </div>
  95.         <div class="portal-teaser-container flex gap-20">
  97.             <div class="portal-teaser-slider flex column {{ setBackground }}">
  98.                 <div class="img-container">
  99.                     {% set galleryObjectLeft = pimcore_relation('teaserSliderLeft', {
  100.                         'types': ['object'],
  101.                         'classes': ['TeaserSlider'],
  102.                         'reload': false,
  103.                         'required': true
  104.                     }) %}
  105.                     {% set galleryLeft = galleryObjectLeft.getElement() %}
  107.                     {% if galleryLeft is defined and galleryLeft is not null %}
  108.                         <div class="teaser-slider">
  109.                             <div class="teaser-slider-inner">
  110.                                 {% for image in galleryLeft.getImages() %}
  111.                                     <div class="teaser-slider-image {% if loop.first %}--active{% endif %}">
  112.                                         {{ image.thumbnail('PortalTeaser').html({
  113.                                             'disableWidthHeightAttributes': true,
  114.                                             'imgAttributes': {
  115.                                                 'width': 927,
  116.                                                 'height': 320,
  117.                                                 'loading': 'lazy'
  118.                                             }
  119.                                         })|raw }}
  120.                                     </div>
  121.                                 {% endfor %}
  122.                             </div>
  123.                             {% if galleryLeft.getImages()|length > 1 %}
  124.                                 <button class="slider-prev">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  125.                                 <button class="slider-next">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  126.                             
  127.                                 <div class="slider-pagination">
  128.                                     {% for slider in galleryLeft.getImages() %}
  129.                                         <div class="slider-pagination-item {% if loop.first %}--active{% endif %}"></div>
  130.                                     {% endfor %}
  131.                                 </div>
  132.                             {% endif %}
  133.                         </div>
  134.                     {% endif %}
  136.                     {% if editmode %}
  137.                         {{ galleryObjectLeft|raw }}
  138.                     {% endif %}
  139.                 </div>
  141.                 <div class="text-container">
  142.                     {% set headlineTagX = pimcore_select('headlineTagX', {
  143.                         'store': [
  144.                             ['none', 'none'],
  145.                             ['h1', 'H1'],
  146.                             ['h2', 'H2'],
  147.                             ['h3', 'H3'],
  148.                             ['h4', 'H4'],
  149.                             ['h5', 'H5'],
  150.                             ['h6', 'H6'],
  151.                         ],
  152.                         'defaultValue': '',
  153.                         'reload': true
  154.                     }) %}
  155.                     {% if headlineTagX.isEmpty() %}
  156.                         {% do headlineTagX.setDataFromResource('h2') %}
  157.                     {% endif %}
  158.                     {% set headline1X = headlineTagX.data != 'none' ? headlineTagX.data|raw : 'span'|raw %}
  159.                     {% set headline2X = headlineTagX.data != 'none' ? '</' ~ headlineTagX.data|raw ~ '>' : '</span>'|raw %}
  161.                     {% if editmode %}
  162.                         <div class="item">
  163.                             <p class="edit-p">Titel-Typ definieren:</p>
  164.                             {{ headlineTagX|raw }}
  165.                         </div>
  167.                         <h3 class="teaser-headline">
  168.                             {{ pimcore_textarea("headline_teaser_left",{
  169.                                 "nl2br": true,
  170.                                 "height": 100,
  171.                                 "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  172.                             }) }}
  173.                         </h3>
  174.                     {% elseif not editmode and not pimcore_textarea('headline_teaser_left').isEmpty() %}
  175.                         <{{ headline1X|raw }} class="teaser-headline">
  176.                             {{ pimcore_textarea('headline_teaser_left').getData() | nl2br }}
  177.                         {{ headline2X|raw }}
  178.                     {% endif %}
  179.                     {% if editmode %}
  180.                         <p>{{ pimcore_textarea("text_teaser_left",{
  181.                                 "nl2br": true,
  182.                                 "height": 100,
  183.                                 "placeholder": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
  184.                             }) }}
  185.                         </p>
  186.                     {% elseif not editmode and not pimcore_textarea('text_teaser_left').isEmpty() %}
  187.                         <p>{{ pimcore_textarea('text_teaser_left').getData() | nl2br }}</p>
  188.                     {% endif %}
  189.                 </div>
  190.                 <div class="buttons-row flex center">
  191.                     {% if editmode %}
  192.                         {{ pimcore_link('left') }}
  193.                     {% elseif not editmode and not pimcore_link('left').isEmpty() %}
  194.                         <div class="btn secondary">
  195.                             {% if pimcore_link('left').getTarget() %}
  196.                                 {% set target = pimcore_link('left').getTarget() %}
  197.                             {% else %}
  198.                                 {% set target = '_self' %}
  199.                             {% endif %}
  200.                             <a class="flex" href="{{ pimcore_link('left').getHref() }}" target="{{ target }}">
  201.                                 <span>{{ pimcore_link('left').getText() }} <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  202.                                         <g transform="translate(0 0.354)">
  203.                                             <g transform="translate(0)">
  204.                                                 <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1"/>
  205.                                                 <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#fff" stroke-width="1"/>
  206.                                             </g>
  207.                                         </g>
  208.                                     </svg>
  209.                                 </span>
  210.                             </a>
  211.                             <div class="button-shape">
  212.                                 {{include('svg/button-shape.html.twig')}}
  213.                             </div>
  214.                         </div>
  215.                     {% endif %}
  216.                 </div>
  217.             </div>
  219.             <div class="portal-teaser-slider flex column {{ setBackground }}">
  221.                 <div class="img-container">
  222.                     {% set galleryObjectMiddle = pimcore_relation('teaserSliderMiddle', {
  223.                         'types': ['object'],
  224.                         'classes': ['TeaserSlider'],
  225.                         'reload': false,
  226.                         'required': true
  227.                     }) %}
  228.                     {% set galleryMiddle = galleryObjectMiddle.getElement() %}
  229.                     
  230.                     {% if galleryMiddle is defined and galleryMiddle is not null %}
  231.                         <div class="teaser-slider">
  232.                             <div class="teaser-slider-inner">
  233.                                 {% for image in galleryMiddle.getImages() %}
  234.                                     <div class="teaser-slider-image {% if loop.first %}--active{% endif %}">
  235.                                         {{ image.thumbnail('PortalTeaser').html({
  236.                                             'disableWidthHeightAttributes': true,
  237.                                             'imgAttributes': {
  238.                                                 'width': 927,
  239.                                                 'height': 320,
  240.                                                 'loading': 'lazy'
  241.                                             }
  242.                                         })|raw }}
  243.                                     </div>
  244.                                 {% endfor %}
  245.                             </div>
  246.                             {% if galleryMiddle.getImages()|length > 1 %}
  247.                                 <button class="slider-prev">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  248.                                 <button class="slider-next">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  249.                             
  250.                                 <div class="slider-pagination">
  251.                                     {% for slider in galleryMiddle.getImages() %}
  252.                                         <div class="slider-pagination-item {% if loop.first %}--active{% endif %}"></div>
  253.                                     {% endfor %}
  254.                                 </div>
  255.                             {% endif %}
  256.                         </div>
  257.                     {% endif %}
  258.                     {% if editmode %}
  259.                         {{ galleryObjectMiddle|raw }}
  260.                     {% endif %}
  261.                 </div>
  263.                 <div class="text-container">
  264.                     {% set headlineTagY = pimcore_select('headlineTagY', {
  265.                         'store': [
  266.                             ['none', 'none'],
  267.                             ['h1', 'H1'],
  268.                             ['h2', 'H2'],
  269.                             ['h3', 'H3'],
  270.                             ['h4', 'H4'],
  271.                             ['h5', 'H5'],
  272.                             ['h6', 'H6'],
  273.                         ],
  274.                         'defaultValue': '',
  275.                         'reload': true
  276.                     }) %}
  277.                     {% if headlineTagY.isEmpty() %}
  278.                         {% do headlineTagY.setDataFromResource('h2') %}
  279.                     {% endif %}
  280.                     {% set headline1Y = headlineTagY.data != 'none' ? headlineTagY.data|raw : 'span'|raw %}
  281.                     {% set headline2Y = headlineTagY.data != 'none' ? '</' ~ headlineTagY.data|raw ~ '>' : '</span>'|raw %}
  283.                     {% if editmode %}
  284.                         <div class="item">
  285.                             <p class="edit-p">Titel-Typ definieren:</p>
  286.                             {{ headlineTagY|raw }}
  287.                         </div>                        
  288.                         
  289.                         <h3 class="teaser-headline">{{ pimcore_textarea("headline_teaser_center",{
  290.                                 "nl2br": true,
  291.                                 "height": 100,
  292.                                 "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  293.                             }) }}
  294.                         </h3>
  295.                     {% elseif not editmode and not pimcore_textarea('headline_teaser_center').isEmpty() %}
  296.                         <{{ headline1Y|raw }} class="teaser-headline">
  297.                             {{ pimcore_textarea('headline_teaser_center').getData() | nl2br }}
  298.                         {{ headline2Y|raw}}
  299.                     {% endif %}
  300.                     {% if editmode %}
  301.                         <p>{{ pimcore_textarea("text_teaser_center",{
  302.                                 "nl2br": true,
  303.                                 "height": 100,
  304.                                 "placeholder": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
  305.                             }) }}
  306.                         </p>
  307.                     {% elseif not editmode and not pimcore_textarea('text_teaser_center').isEmpty() %}
  308.                         <p>{{ pimcore_textarea('text_teaser_center').getData() | nl2br }}</p>
  309.                     {% endif %}
  310.                 </div>
  311.                 <div class="buttons-row flex center">
  312.                     {% if editmode %}
  313.                         {{ pimcore_link('center') }}
  314.                     {% elseif not editmode and not pimcore_link('center').isEmpty() %}
  315.                         <div class="btn secondary">
  316.                             {% if pimcore_link('left').getTarget() %}
  317.                                 {% set target = pimcore_link('left').getTarget() %}
  318.                             {% else %}
  319.                                 {% set target = '_self' %}
  320.                             {% endif %}
  321.                             <a class="flex" href="{{ pimcore_link('left').getHref() }}" target="{{ target }}">
  322.                                 <span>{{ pimcore_link('center').getText() }} <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  323.                                         <g transform="translate(0 0.354)">
  324.                                             <g transform="translate(0)">
  325.                                                 <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1"/>
  326.                                                 <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#fff" stroke-width="1"/>
  327.                                             </g>
  328.                                         </g>
  329.                                     </svg>
  330.                                 </span>
  331.                             </a>
  332.                             <div class="button-shape">
  333.                                 {{include('svg/button-shape.html.twig')}}
  334.                             </div>
  335.                         </div>
  336.                     {% endif %}
  337.                 </div>
  338.             </div>
  340.             <div class="portal-teaser-slider flex column {{ setBackground }} {{ setTwoCards }}">
  342.                 <div class="img-container">
  343.                     {% set galleryObjectRight = pimcore_relation('teaserSliderRight', {
  344.                         'types': ['object'],
  345.                         'classes': ['TeaserSlider'],
  346.                         'reload': false,
  347.                         'required': true
  348.                     }) %}
  349.                     {% set galleryRight = galleryObjectRight.getElement() %}
  351.                     {% if galleryRight is defined and galleryRight is not null %}
  352.                         <div class="teaser-slider">
  353.                             <div class="teaser-slider-inner">
  354.                                 {% for image in galleryRight.getImages() %}
  355.                                     <div class="teaser-slider-image {% if loop.first %}--active{% endif %}">
  356.                                         {{ image.thumbnail('PortalTeaser').html({
  357.                                             'disableWidthHeightAttributes': true,
  358.                                             'imgAttributes': {
  359.                                                 'width': 927,
  360.                                                 'height': 320,
  361.                                                 'loading': 'lazy'
  362.                                             }
  363.                                         })|raw }}
  364.                                     </div>
  365.                                 {% endfor %}
  366.                             </div>
  367.                             {% if galleryRight.getImages()|length > 1 %}
  368.                                 <button class="slider-prev">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  369.                                 <button class="slider-next">{{ include('svg/icon-chevron-left.html.twig') }}</button>
  370.                             
  371.                                 <div class="slider-pagination">
  372.                                     {% for slider in galleryRight.getImages() %}
  373.                                         <div class="slider-pagination-item {% if loop.first %}--active{% endif %}"></div>
  374.                                     {% endfor %}
  375.                                 </div>
  376.                             {% endif %}
  377.                         </div>
  378.                     {% endif %}
  379.                     {% if editmode %}
  380.                         {{ galleryObjectRight|raw }}
  381.                     {% endif %}
  382.                 </div>
  385.                 <div class="text-container">
  386.                     {% set headlineTagZ = pimcore_select('headlineTagZ', {
  387.                         'store': [
  388.                             ['none', 'none'],
  389.                             ['h1', 'H1'],
  390.                             ['h2', 'H2'],
  391.                             ['h3', 'H3'],
  392.                             ['h4', 'H4'],
  393.                             ['h5', 'H5'],
  394.                             ['h6', 'H6'],
  395.                         ],
  396.                         'defaultValue': '',
  397.                         'reload': true
  398.                     }) %}
  399.                     {% if headlineTagZ.isEmpty() %}
  400.                         {% do headlineTagZ.setDataFromResource('h2') %}
  401.                     {% endif %}
  402.                     {% set headline1Z = headlineTagZ.data != 'none' ? headlineTagZ.data|raw : 'span'|raw %}
  403.                     {% set headline2Z = headlineTagZ.data != 'none' ? '</' ~ headlineTagZ.data|raw ~ '>' : '</span>'|raw %}
  405.                     {% if editmode %}
  406.                         <div class="item">
  407.                             <p class="edit-p">Titel-Typ definieren:</p>
  408.                             {{ headlineTagZ|raw }}
  409.                         </div>                            <h3 class="teaser-headline">{{ pimcore_textarea("headline_teaser_right",{
  410.                                 "nl2br": true,
  411.                                 "height": 100,
  412.                                 "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  413.                             }) }}
  414.                         </h3>
  415.                     {% elseif not editmode and not pimcore_textarea('headline_teaser_right').isEmpty() %}
  416.                         <{{ headline1Z|raw }} class="teaser-headline">
  417.                             {{ pimcore_textarea('headline_teaser_right').getData() | nl2br }}
  418.                         {{ headline2Z|raw }}
  419.                     {% endif %}
  420.                     {% if editmode %}
  421.                         <p>{{ pimcore_textarea("text_teaser_right",{
  422.                                 "nl2br": true,
  423.                                 "height": 100,
  424.                                 "placeholder": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
  425.                             }) }}
  426.                         </p>
  427.                     {% elseif not editmode and not pimcore_textarea('text_teaser_right').isEmpty() %}
  428.                         <p>{{ pimcore_textarea('text_teaser_right').getData() | nl2br }}</p>
  429.                     {% endif %}
  430.                 </div>
  431.                 <div class="buttons-row flex center">
  432.                     {% if editmode %}
  433.                         {{ pimcore_link('right') }}
  434.                     {% elseif not editmode and not pimcore_link('right').isEmpty() %}
  435.                         <div class="btn secondary">
  436.                             {% if pimcore_link('left').getTarget() %}
  437.                                 {% set target = pimcore_link('left').getTarget() %}
  438.                             {% else %}
  439.                                 {% set target = '_self' %}
  440.                             {% endif %}
  441.                             <a class="flex" href="{{ pimcore_link('left').getHref() }}" target="{{ target }}">
  442.                                 <span>{{ pimcore_link('right').getText() }} <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  443.                                         <g transform="translate(0 0.354)">
  444.                                             <g transform="translate(0)">
  445.                                                 <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1"/>
  446.                                                 <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#fff" stroke-width="1"/>
  447.                                             </g>
  448.                                         </g>
  449.                                     </svg>
  450.                                 </span>
  451.                             </a>
  452.                             <div class="button-shape">
  453.                                 {{include('svg/button-shape.html.twig')}}
  454.                             </div>
  455.                         </div>
  456.                     {% endif %}
  457.                 </div>
  458.             </div>
  460.         </div>
  461.     </div>
  462. </section>