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

Open in your IDE?
  1. {% if editmode %}
  2.     <div class="edit-box">
  3.         <h1>KONFIGURATIONEN FÜR DEN AREABRICK:</h1>
  4.         <div class="flex gap-20">
  5.             <div class="content flex column gap-20">
  6.                 <div class="content-box flex gap-20">
  7.                     <div class="item">
  8.                         <p class="edit-p">Abstand nach unten wählen:</p>
  9.                         {{ pimcore_select("MarginBottom", {
  10.                             "reload": true,
  11.                             "store": [
  12.                                 ["regular", "Normal"],
  13.                                 ["half", "1/2"],
  14.                                 ["small", "1/4"],
  15.                                 ["zero", "kein Abstand"],
  16.                             ],
  17.                             "defaultValue" : "regular"
  18.                         }) }}
  19.                     </div>
  20.                 </div>
  21.             </div>
  22.         </div>
  23.     </div>
  24. {% endif %}
  25. <section class="portal-teaser {{ pimcore_select('MarginBottom').getData() }}">
  26.     <div class="container">
  27.         <div class="headline-container">
  28.             {% if editmode %}
  29.                 <h2>{{ pimcore_textarea("headline",{
  30.                         "nl2br": true,
  31.                         "height": 100,
  32.                         "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  33.                     }) }}
  34.                 </h2>
  35.             {% elseif not editmode and not pimcore_textarea('headline').isEmpty() %}
  36.                 <h2 class="dark">{{ pimcore_textarea('headline').getData() | nl2br }}</h2>
  37.             {% endif %}
  38.         </div>
  39.         <div class="portal-teaser-container flex gap-20">
  41.             <div class="portal-teaser flex column space-between">
  42.                 <div class="img-container">
  43.                     {% if editmode %}
  44.                         {{ pimcore_image("leftImage", {
  45.                             "title": "Drag your image here",
  46.                             "width": 402,
  47.                             "height": 320,
  48.                             "thumbnail": "PortalTeaser"
  49.                         }) }}
  50.                     {% elseif not editmode and not pimcore_image("leftImage").isEmpty() %}
  51.                         {{ pimcore_image("leftImage").getThumbnail('PortalTeaser').getHtml() | raw }}
  52.                     {% endif %}
  53.                 </div>
  55.                 <div class="text-container">
  56.                     {% if editmode %}
  57.                         <h3 class="teaser-headline">{{ pimcore_textarea("headline_teaser_left",{
  58.                                 "nl2br": true,
  59.                                 "height": 100,
  60.                                 "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  61.                             }) }}
  62.                         </h3>
  63.                     {% elseif not editmode and not pimcore_textarea('headline_teaser_left').isEmpty() %}
  64.                         <h3 class="teaser-headline">{{ pimcore_textarea('headline_teaser_left').getData() | nl2br }}</h3>
  65.                     {% endif %}
  66.                     {% if editmode %}
  67.                         <p>{{ pimcore_textarea("text_teaser_left",{
  68.                                 "nl2br": true,
  69.                                 "height": 100,
  70.                                 "placeholder": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
  71.                             }) }}
  72.                         </p>
  73.                     {% elseif not editmode and not pimcore_textarea('text_teaser_left').isEmpty() %}
  74.                         <p>{{ pimcore_textarea('text_teaser_left').getData() | nl2br }}</p>
  75.                     {% endif %}
  76.                 </div>
  77.                 <div class="buttons-row flex center">
  78.                     {% if editmode %}
  79.                         {{ pimcore_link('left') }}
  80.                     {% elseif not editmode and not pimcore_link('left').isEmpty() %}
  81.                     <button class="secondary">
  82.                         <a class="flex" href="{{ pimcore_link('left').getHref() }}" target="{{ pimcore_link('left').getTarget() }}">
  83.                             <span>{{ pimcore_link('left').getText() }} <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  84.                                     <g transform="translate(0 0.354)">
  85.                                         <g transform="translate(0)">
  86.                                             <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1"/>
  87.                                             <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#fff" stroke-width="1"/>
  88.                                         </g>
  89.                                     </g>
  90.                                 </svg></span>
  91.                         </a>
  92.                     </button>
  93.                     {% endif %}
  94.                 </div>
  95.             </div>
  96.             <div class="portal-teaser flex column space-between">
  97.                 <div class="img-container">
  98.                     {% if editmode %}
  99.                     {{ pimcore_image("centerImage", {
  100.                         "title": "Drag your image here",
  101.                         "width": 402,
  102.                         "height": 320,
  103.                         "thumbnail": "PortalTeaser"
  104.                     }) }}
  105.                     {% elseif not editmode and not pimcore_image("centerImage").isEmpty() %}
  106.                     {{ pimcore_image("centerImage").getThumbnail('PortalTeaser').getHtml() | raw }}
  107.                     {% endif %}
  108.                 </div>
  109.                 <div class="text-container">
  110.                     {% if editmode %}
  111.                         <h3 class="teaser-headline">{{ pimcore_textarea("headline_teaser_center",{
  112.                                 "nl2br": true,
  113.                                 "height": 100,
  114.                                 "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  115.                             }) }}
  116.                         </h3>
  117.                     {% elseif not editmode and not pimcore_textarea('headline_teaser_center').isEmpty() %}
  118.                         <h3 class="teaser-headline">{{ pimcore_textarea('headline_teaser_center').getData() | nl2br }}</h3>
  119.                     {% endif %}
  120.                     {% if editmode %}
  121.                         <p>{{ pimcore_textarea("text_teaser_center",{
  122.                                 "nl2br": true,
  123.                                 "height": 100,
  124.                                 "placeholder": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
  125.                             }) }}
  126.                         </p>
  127.                     {% elseif not editmode and not pimcore_textarea('text_teaser_center').isEmpty() %}
  128.                         <p>{{ pimcore_textarea('text_teaser_center').getData() | nl2br }}</p>
  129.                     {% endif %}
  130.                 </div>
  131.                 <div class="buttons-row flex center">
  132.                     {% if editmode %}
  133.                         {{ pimcore_link('center') }}
  134.                     {% elseif not editmode and not pimcore_link('center').isEmpty() %}
  135.                         <button class="secondary">
  136.                             <a class="flex" href="{{ pimcore_link('center').getHref() }}" target="{{ pimcore_link('center').getTarget() }}">
  137.                             <span>{{ pimcore_link('center').getText() }} <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  138.                                     <g transform="translate(0 0.354)">
  139.                                         <g transform="translate(0)">
  140.                                             <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1"/>
  141.                                             <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#fff" stroke-width="1"/>
  142.                                         </g>
  143.                                     </g>
  144.                                 </svg></span>
  145.                             </a>
  146.                         </button>
  147.                     {% endif %}
  148.                 </div>
  149.             </div>
  150.             <div class="portal-teaser flex column space-between">
  151.                 <div class="img-container">
  152.                     {% if editmode %}
  153.                         {{ pimcore_image("rightImage", {
  154.                             "title": "Drag your image here",
  155.                             "width": 402,
  156.                             "height": 320,
  157.                             "thumbnail": "PortalTeaser"
  158.                         }) }}
  159.                     {% elseif not editmode and not pimcore_image("rightImage").isEmpty() %}
  160.                         {{ pimcore_image("rightImage").getThumbnail('PortalTeaser').getHtml() | raw }}
  161.                     {% endif %}
  162.                 </div>
  163.                 <div class="text-container">
  164.                     {% if editmode %}
  165.                         <h3 class="teaser-headline">{{ pimcore_textarea("headline_teaser_right",{
  166.                                 "nl2br": true,
  167.                                 "height": 100,
  168.                                 "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  169.                             }) }}
  170.                         </h3>
  171.                     {% elseif not editmode and not pimcore_textarea('headline_teaser_right').isEmpty() %}
  172.                         <h3 class="teaser-headline">{{ pimcore_textarea('headline_teaser_right').getData() | nl2br }}</h3>
  173.                     {% endif %}
  174.                     {% if editmode %}
  175.                         <p>{{ pimcore_textarea("text_teaser_right",{
  176.                                 "nl2br": true,
  177.                                 "height": 100,
  178.                                 "placeholder": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
  179.                             }) }}
  180.                         </p>
  181.                     {% elseif not editmode and not pimcore_textarea('text_teaser_right').isEmpty() %}
  182.                         <p>{{ pimcore_textarea('text_teaser_right').getData() | nl2br }}</p>
  183.                     {% endif %}
  184.                 </div>
  185.                 <div class="buttons-row flex center">
  186.                     {% if editmode %}
  187.                         {{ pimcore_link('right') }}
  188.                     {% elseif not editmode and not pimcore_link('right').isEmpty() %}
  189.                         <button class="secondary">
  190.                             <a class="flex" href="{{ pimcore_link('right').getHref() }}" target="{{ pimcore_link('right').getTarget() }}">
  191.                             <span>{{ pimcore_link('right').getText() }} <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  192.                                     <g transform="translate(0 0.354)">
  193.                                         <g transform="translate(0)">
  194.                                             <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1"/>
  195.                                             <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#fff" stroke-width="1"/>
  196.                                         </g>
  197.                                     </g>
  198.                                 </svg></span>
  199.                             </a>
  200.                         </button>
  201.                     {% endif %}
  202.                 </div>
  203.             </div>
  205.         </div>
  206.     </div>
  207. </section>