templates/areas/content-header/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">Header Type wählen:</p>
  9.                         {{ pimcore_select("HeaderType", {
  10.                             "reload": true,
  11.                             "store": [
  12.                                 ["content", "Content"],
  13.                                 ["projects", "Projekte"],
  14.                                 ["news", "News"],
  15.                                 ["contact", "Kontakt"],
  16.                                 ["search", "Suche"],
  17.                                 ["impressions","Impressionen"]
  18.                             ],
  19.                             "defaultValue" : "content"
  20.                         }) }}
  21.                     </div>
  22.                     {% if pimcore_select("HeaderType").getData() == "content" or pimcore_select("HeaderType").getData() == "projects" or pimcore_select("HeaderType").getData() == "impressions" or pimcore_select("HeaderType").getData() == "news" %}
  23.                         <div class="item">
  24.                             <p class="edit-p">Texttyp wählen:</p>
  25.                             {{ pimcore_select("TextType", {
  26.                                 "reload": true,
  27.                                 "store": [
  28.                                     ["lead", "Lead Text"],
  29.                                     ["basic", "Fliess Text"]
  30.                                 ],
  31.                                 "defaultValue" : "lead"
  32.                             }) }}
  33.                         </div>
  35.                         <div class="item">
  36.                             <p class="edit-p">Text breite:</p>
  37.                             {{ pimcore_select("TextWidth", {
  38.                                 "reload": true,
  39.                                 "store": [
  40.                                     ["full-width", "Voll"],
  41.                                     [" ", "Standard"]
  42.                                 ],
  43.                                 "defaultValue" : " "
  44.                             }) }}
  45.                         </div>
  46.                     {% endif %}
  49.                     {% if pimcore_select("HeaderType").getData() == "content" or pimcore_select("HeaderType").getData() == "contact" %}
  50.                         <div class="item">
  51.                             <p class="edit-p">Hintergrundfarbe:</p>
  52.                             {{ pimcore_select("BackgroundColor", {
  53.                                 "reload": true,
  54.                                 "store": [
  55.                                     ["standard", "Standard"],
  56.                                     ["bg-orange", "Orange"],
  57.                                     ["bg-coffee", "Coffee"]
  58.                                 ],
  59.                                 "defaultValue" : "standard"
  60.                             }) }}
  61.                         </div>
  62.                     {% endif %}
  63.                     {% if pimcore_select("HeaderType").getData() == "content" %}
  64.                         <div class="item">
  65.                             <p class="edit-p">Buttons einfügen:</p>
  66.                             {{ pimcore_select("ButtonsRow", {
  67.                                 "reload": true,
  68.                                 "store": [
  69.                                     ["true", "Mit Buttons"],
  70.                                     ["false", "Ohne Buttons"]
  71.                                 ],
  72.                                 "defaultValue" : "false"
  73.                             }) }}
  74.                         </div>
  75.                     {% endif %}
  76.                     {% if pimcore_select("HeaderType").getData() == "news" %}
  77.                         <div class="item">
  78.                             <p class="edit-p">Hintergrundfarbe:</p>
  79.                             {{ pimcore_select("BackgroundColorNews", {
  80.                                 "reload": true,
  81.                                 "store": [
  82.                                     ["standard", "Standard"],
  83.                                     ["orange", "Orange"],
  84.                                     ["beige", "Beige"]
  85.                                 ],
  86.                                 "defaultValue" : "standard"
  87.                             }) }}
  88.                         </div>
  89.                     {% endif %}
  90.                 </div>
  91.                 {% if pimcore_select("HeaderType").getData() == "contact" or pimcore_select("HeaderType").getData() == "content" or pimcore_select("HeaderType").getData() == "projects" or pimcore_select("HeaderType").getData() == "news" or pimcore_select("HeaderType").getData() == "impressions" %}
  92.                     <div class="content-box">
  94.                         <div class="item">
  95.                             <p class="edit-p">H1 HEADLINE TEXT:</p>
  96.                             <h1 class="light">{{ pimcore_textarea("product_description",{
  97.                                     "nl2br": true,
  98.                                     "height": 50,
  99.                                     "placeholder": "Hier kommt ein Claim von Hodel und Partner über Werte"
  100.                                 }) }}
  101.                             </h1>
  102.                         </div>
  104.                         <div class="item">
  105.                             <p class="edit-p">Header Text:</p>
  106.                             {{ pimcore_wysiwyg('Content', {
  107.                                 height: 200,
  108.                                 customConfig: '/assets/js/editmode/config.js'
  109.                             }) }}
  110.                         </div>
  112.                     </div>
  113.                 {% if pimcore_select("ButtonsRow").getData() == "true" %}
  114.                     <div class="content-box">
  115.                         <div class="item">
  116.                             <p class="edit-p">Buttons:</p>
  117.                             <div class="flex" style="justify-content: space-evenly;">
  118.                                 <div>{{ pimcore_link('Link_1') }}</div>
  119.                                 <div>{{ pimcore_link('Link_2') }}</div>
  120.                             </div>
  121.                         </div>
  122.                     </div>
  123.                 {% endif %}
  124.                 {% endif %}
  125.                 {% if pimcore_select("HeaderType").getData() == "news" %}
  126.                     <div class="content-box">
  128.                         <div class="item">
  129.                             <p class="edit-p">Vertikale NEWS headline:</p>
  130.                             <h1 class="light">{{ pimcore_textarea("h1_news",{
  131.                                     "nl2br": true,
  132.                                     "height": 50,
  133.                                     "placeholder": "Das ist die vertikale NEWS headline"
  134.                                 }) }}
  135.                             </h1>
  136.                         </div>
  138.                     </div>
  139.                 {% endif %}
  141.                 {% if pimcore_select("HeaderType").getData() == "contact" %}
  142.                     <div class="content-box">
  143.                         <div class="item">
  144.                             <p class="edit-p">Text:</p>
  145.                             {{ pimcore_wysiwyg('ContentContact', {
  146.                                 height: 100,
  147.                                 customConfig: '/assets/js/editmode/config.js'
  148.                             }) }}
  149.                         </div>
  150.                     </div>
  151.                 {% endif %}
  152.             </div>
  154.             <div class="content flex column gap-20">
  156.                 {% if pimcore_select("HeaderType").getData() == "content" %}
  157.                     <div class="content-box">
  158.                         <div class="item">
  159.                             <p class="edit-p">Hintergrundbild ablegen:</p>
  160.                             {{ pimcore_relation("contentHeader",{
  161.                                 "types": ["asset"],
  162.                                 "subtypes": {
  163.                                     "asset": ["image"]
  164.                                 }
  165.                             }) }}
  166.                         </div>
  168.                     </div>
  169.                 {% endif %}
  171.                 {% if pimcore_select("HeaderType").getData() == "projects" or pimcore_select("HeaderType").getData() == "impressions" or pimcore_select("HeaderType").getData() == "news" %}
  172.                     <div class="content-box">
  173.                         <div class="item">
  174.                             <p class="edit-p">Kategorien ablegen:</p>
  175.                             {{ pimcore_relations("Categories", {
  176.                                 "title": "Kategorie Objekte ablegen",
  177.                                 "types": ["object"],
  178.                                 "subtypes": {
  179.                                     "object": ["object"]
  180.                                 },
  181.                                 "classes": ["Category"]
  182.                             }) }}
  183.                         </div>
  185.                     </div>
  186.                     <div class="content-box">
  188.                         <div class="item">
  189.                             <p class="edit-p">Schattenwurf Bild ablegen:</p>
  190.                             {{ pimcore_relation("ShadowImage",{
  191.                                 "types": ["asset"],
  192.                                 "subtypes": {
  193.                                     "asset": ["image"]
  194.                                 }
  195.                             }) }}
  196.                         </div>
  199.                     </div>
  200.                 {% endif %}
  202.                 {#{% if pimcore_select("HeaderType").getData() == "content" or pimcore_select("HeaderType").getData() == "news" %}
  203.                     <div class="content-box">
  205.                         <div class="item">
  206.                             <p class="edit-p">Schattenwurf Bild ablegen:</p>
  207.                             {{ pimcore_relation("ShadowImage",{
  208.                                 "types": ["asset"],
  209.                                 "subtypes": {
  210.                                     "asset": ["image"]
  211.                                 }
  212.                             }) }}
  213.                         </div>
  216.                     </div>
  217.                 {% endif %}#}
  219.                 {% if pimcore_select("HeaderType").getData() == "contact" %}
  220.                     <div class="content-box">
  221.                         <div class="item">
  222.                             <p class="edit-p">Hintergrundbild Schattenwurf ablegen:</p>
  223.                             {{ pimcore_relation("Image",{
  224.                                 "reload": false,
  225.                                 "types": ["asset"],
  226.                                 "subtypes": {
  227.                                     "asset": ["image"]
  228.                                 }
  229.                             }) }}
  230.                         </div>
  231.                     </div>
  232.                 {% endif %}
  233.             </div>
  234.         </div>
  235.     </div>
  236. {% endif %}
  241. {% if pimcore_select("HeaderType").getData() == "content" %}
  242.     {% if not editmode %}
  243.     <section class="content-header {% if pimcore_relation("contentHeader").isEmpty() %} {{ pimcore_select("BackgroundColor").getData() }} {% endif %}">
  245.         {% if pimcore_relation("ShadowImage").getElement() is instanceof('\\Pimcore\\Model\\Asset') %}
  246.             {{ pimcore_relation("ShadowImage").getElement().getThumbnail('FullHD').getHtml({
  247.                 imgAttributes: {
  248.                     "class": "shadow-image"
  249.                 }
  250.             }) | raw }}
  251.         {% endif %}
  254.         {% if pimcore_relation("contentHeader").getElement() is instanceof('\\Pimcore\\Model\\Asset') %}
  255.             {{ pimcore_relation("contentHeader").getElement().getThumbnail('FullHD').getHtml() | raw }}
  256.         {% endif %}
  257.         <div class="container">
  258.             <h1 class="light">{{ pimcore_textarea("product_description").getData() | nl2br }}</h1>
  260.             <div class="{{ pimcore_select("TextType").getData() }} {{ pimcore_select("TextWidth").getData() }} {% if pimcore_wysiwyg('Content').getData() | length > 2300 %}extra-margin{% endif %}">
  261.                 {% if not pimcore_wysiwyg('Content').isEmpty() %}
  262.                     {{ pimcore_wysiwyg('Content').getData() | raw }}
  263.                 {% endif %}
  264.                 {% if pimcore_select("ButtonsRow").getData() == "true" %}
  265.                     <div class="buttons-row flex negativ">
  266.                         {% if pimcore_link('Link_1').getText() %}
  267.                             <button class="primary">
  268.                                 <a href="{{ pimcore_link('Link_1').getHref() }}" target="{{ pimcore_link('Link_1').getTarget() }}">{{ pimcore_link('Link_1').getText() }}</a>
  269.                                 <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  270.                                     <g transform="translate(0 0.354)">
  271.                                         <g transform="translate(0)">
  272.                                             <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#b76e2b" stroke-linejoin="round" stroke-width="1"/>
  273.                                             <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#b76e2b" stroke-width="1"/>
  274.                                         </g>
  275.                                     </g>
  276.                                 </svg>
  277.                             </button>
  278.                         {% endif %}
  279.                         {% if pimcore_link('Link_2').getText() %}
  280.                             <button class="primary">
  281.                                 <a href="{{ pimcore_link('Link_2').getHref() }}" target="{{ pimcore_link('Link_2').getTarget() }}">{{ pimcore_link('Link_2').getText() }}</a>
  282.                                 <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  283.                                     <g transform="translate(0 0.354)">
  284.                                         <g transform="translate(0)">
  285.                                             <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#b76e2b" stroke-linejoin="round" stroke-width="1"/>
  286.                                             <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#b76e2b" stroke-width="1"/>
  287.                                         </g>
  288.                                     </g>
  289.                                 </svg>
  290.                             </button>
  291.                         {% endif %}
  292.                     </div>
  293.                 {% endif %}
  294.             </div>
  296.         </div>
  297.         <div class="scroll-down"></div>
  298.     </section>
  299.         {% endif %}
  300. {% endif %}
  302. {% if pimcore_select("HeaderType").getData() == "contact" %}
  303.     {% if not editmode %}
  304.     <section class="content-header contact-header {{ pimcore_select("BackgroundColor").getData() }}">
  305.         {% if pimcore_relation("Image").getElement() is instanceof('\\Pimcore\\Model\\Asset') %}
  306.             {{ pimcore_relation("Image").getElement().getThumbnail('FullHD').getHtml({
  307.                 imgAttributes: {
  308.                     "class": "shadow-image"
  309.                 }
  310.             }) | raw }}
  311.         {% endif %}
  312.         <div class="container">
  314.             <h1 class="light">{{ pimcore_textarea("product_description").getData() | nl2br }}</h1>
  316.             <div class="text-map flex">
  317.                 <div class="basic contact-desc">
  318.                     {% if not pimcore_wysiwyg('Content').isEmpty() %}
  319.                         {{ pimcore_wysiwyg('Content').getData() | raw }}
  320.                     {% endif %}
  321.                     {% if not pimcore_wysiwyg('ContentContact').isEmpty() %}
  322.                         <div class="description-text">
  323.                             {{ pimcore_wysiwyg('ContentContact').getData() | raw }}
  324.                         </div>
  325.                     {% endif %}
  326.                 </div>
  327.                 <div class="map-container">
  328.                     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d27833.836702765533!2d8.207209355951457!3d47.047480945939135!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478ffb4b2728199d%3A0xf2a3c1217e9934d5!2sHodel%20%26%20Partner%20AG!5e0!3m2!1sde!2sch!4v1666074445821!5m2!1sde!2sch"
  329.                         width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
  330.                         referrerpolicy="no-referrer-when-downgrade"></iframe>
  331.                 </div>
  333.                 {#
  334.                 <div class="map-container" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d27833.836702765533!2d8.207209355951457!3d47.047480945939135!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478ffb4b2728199d%3A0xf2a3c1217e9934d5!2sHodel%20%26%20Partner%20AG!5e0!3m2!1sde!2sch!4v1666074445821!5m2!1sde!2sch"
  335.                      data-referrerpolicy="no-referrer-when-downgrade"
  336.                      data-allowfullscreen="true">
  337.                 </div>
  338.                 #}
  339.                 {% if not pimcore_wysiwyg('ContentContact').isEmpty() %}
  341.                     <div class="description-text-mobile">
  342.                         <div class="basic">
  343.                             {{ pimcore_wysiwyg('ContentContact').getData() | raw }}
  344.                         </div>
  345.                     </div>
  347.                 {% endif %}
  349.             </div>
  352.         </div>
  353.         {#  <div class="scroll-down"></div>#}
  354.     </section>
  355.         {% endif %}
  356. {% endif %}
  358. {% if pimcore_select("HeaderType").getData() == "projects" or pimcore_select("HeaderType").getData() == "impressions" %}
  359.     <section class="content-header projects-header beige {% if pimcore_relation("contentHeader").isEmpty() %} {{ pimcore_select("BackgroundColor").getData() }} {% endif %}">
  361.         {% if pimcore_relation("ShadowImage").getElement() is instanceof('\\Pimcore\\Model\\Asset') %}
  362.             <div class="shadow-image-container project-detail" id="shadow-image-container">
  363.                 {{ pimcore_relation("ShadowImage").getElement().thumbnail('ProjectDetailShadow').html({
  364.                     'imgAttributes': {
  365.                         'class':'detail-shadow'
  366.                     }
  367.                 }) | raw }}
  368.             </div>
  369.         {% endif %}
  371.         {% if not editmode %}
  372.             <div class="shadow-image-container" id="shadow-image-container">
  374.             </div>
  375.         {% endif %}
  378.         <div class="container">
  379.             <div class="content-container">
  380.                 <h1 class="light colored">{{ pimcore_textarea("product_description").getData() | nl2br }}</h1>
  382.                 <div class="colored {{ pimcore_select("TextType").getData() }}">
  383.                     {% if not editmode and not pimcore_wysiwyg('Content').isEmpty() %}
  384.                         {{ pimcore_wysiwyg('Content').getData() | raw }}
  385.                     {% endif %}
  386.                 </div>
  387.             </div>
  388.             <div class="filter-container">
  389.                 <div id="project-filter" class="toolbar {% if pimcore_relations("Categories") | length >= 3 %}big{% endif %}">
  391.                     <div class="flex space-between all-items">
  393.                         <button class="filter projects-filter active all-btn category-btn" id="all-projects" data-filter="project-teaser" data-category="project-teaser" data-rel="project-teaser">
  394.                             {{ 'Öffne Filter' | trans }}
  395.                         </button>
  397.                         <span class="open-filter" id="open-filter-projects"></span>
  398.                     </div>
  400.                     {% for category in pimcore_relations("Categories") %}
  401.                         {% set categoryName = category.name | lower | replace({" ": "","/":"","-":"","&":"",",":"",".":"","(":"",")":"","+":"","ö":"oe","ä":"ae","ü":"ue"}) %}
  402.                         <button class="filter projects-filter category-btn {% if loop.first %} active {% endif %}" {% if loop.first %} id="active-category" {% endif %} data-category="{{ categoryName }}" data-rel="{{ categoryName }}" data-filter="{{ categoryName }}">{{ category.name }}</button>
  403.                     {% endfor %}
  405.                 </div>
  406.             </div>
  407.         </div>
  409.         <div class="container projects-wrapper">
  410.             {#
  411.             <div class="projects-container flex" id="projectsList" style="flex-direction: column;">
  413.                 {%  set oddTeaser = [] %}
  414.                 {%  set evenTeaser = [] %}
  416.                 {% for projekt in projektList %}
  418.                     {% if loop.index is odd %}
  419.                         {% set oddTeaser = oddTeaser|merge([projekt]) %}
  420.                     {% else %}
  421.                         {% set evenTeaser = evenTeaser|merge([projekt]) %}
  422.                     {% endif %}
  424.                 {% endfor %}
  426.                 <div class="flex" style="flex-direction: row;">
  427.                     <div class="odd">
  428.                         {% for projekt in oddTeaser %}
  429.                             {% set detailLink = path('projekt', {
  430.                                 id: projekt.id,
  431.                                 title: toUri(projekt.maintitle),
  432.                                 path: 'projekt'
  433.                             }) %}
  434.                             <div class="project-teaser {% for category in projekt.category %}{{ category.name | lower | replace({" ": "","/":"","-":"","&":"",",":"",".":"","(":"",")":"","+":"","ö":"oe","ä":"ae","ü":"ue"}) }} {% endfor %}">
  435.                                 <a href="{{ detailLink }}" target="_self">
  436.                                 {{ projekt.image.thumbnail('ProjectListTeaser').html | raw }}
  437.                                 </a>
  438.                                 <div class="elements-container flex">
  439.                                     <div class="labels">
  440.                                         <a href="{{ detailLink }}" target="_self"><p class="category">{% for category in projekt.category %}{{ category.name }} {% endfor %}</p></a>
  441.                                         <a href="{{ detailLink }}" target="_self"><p class="headline">{{ projekt.maintitle }}</p></a>
  442.                                     </div>
  443.                                     <div class="buttons-row no-margin buttons-row-teaser">
  444.                                         <button class="primary">
  445.                                             <a href="{{ detailLink }}" target="_self">{{ 'Mehr_' | trans }}</a>
  446.                                         </button>
  447.                                     </div>
  448.                                 </div>
  449.                             </div>
  450.                         {% endfor %}
  451.                     </div>
  452.                     <div class="even">
  453.                         {% for projekt in evenTeaser %}
  454.                             {% set detailLink = path('projekt', {
  455.                                 id: projekt.id,
  456.                                 title: toUri(projekt.maintitle),
  457.                                 path: 'projekt'
  458.                             }) %}
  459.                             <div class="project-teaser {% for category in projekt.category %}{{ category.name | lower | replace({" ": "","/":"","-":"","&":"",",":"",".":"","(":"",")":"","+":"","ö":"oe","ä":"ae","ü":"ue"}) }} {% endfor %}">
  460.                                 <a href="{{ detailLink }}" target="_self">
  461.                                 {{ projekt.image.thumbnail('ProjectListTeaser').html | raw }}
  462.                                 </a>
  463.                                 <div class="elements-container flex">
  464.                                     <div class="labels">
  465.                                         <a href="{{ detailLink }}" target="_self">
  466.                                         <p class="category">{% for category in projekt.category %}{{ category.name }} {% endfor %}</p>
  467.                                         </a>
  468.                                         <a href="{{ detailLink }}" target="_self">
  469.                                         <p class="headline">{{ projekt.maintitle }}</p>
  470.                                         </a>
  471.                                     </div>
  472.                                     <div class="buttons-row no-margin buttons-row-teaser">
  473.                                         <button class="primary">
  474.                                             <a href="{{ detailLink }}" target="_self">Mehr</a>
  475.                                         </button>
  476.                                     </div>
  477.                                 </div>
  478.                             </div>
  479.                         {% endfor %}
  480.                     </div>
  481.                 </div>
  483.             </div>
  484.             #}
  485.             <div class="projects-container flex" id="projectsList">
  488.                 {% set oddTeaser = [] %}
  489.                 {% set evenTeaser = [] %}
  491.                 {% for projekt in projektList %}
  493.                     {% if loop.index is odd %}
  494.                         {% set oddTeaser = oddTeaser|merge([projekt]) %}
  495.                     {% else %}
  496.                         {% set evenTeaser = evenTeaser|merge([projekt]) %}
  497.                     {% endif %}
  499.                 {% endfor %}
  501.                 {# <div class="flex">
  502.                     <div class="odd">
  503.                         {% for projekt in projektList %}
  504.                             {% set detailLink = path('projekt', {
  505.                                 id: projekt.id,
  506.                                 title: toUri(projekt.maintitle),
  507.                                 path: 'projekt'
  508.                             }) %}
  509.                             <div
  510.                     class="project-teaser {% for category in projekt.category %}{{ category.name | lower | replace({" ": "","/":"","-":"","&":"",",":"",".":"","(":"",")":"","+":"","ö":"oe","ä":"ae","ü":"ue"}) }} {% endfor %}">
  511.                                 <a href="{{ detailLink }}" target="_self">
  512.                                     {{ projekt.image.thumbnail('ProjectListTeaser').html | raw }}
  513.                                 </a>
  514.                                 <div class="elements-container flex">
  515.                                     <div class="labels">
  516.                                         <a href="{{ detailLink }}" target="_self"><p
  517.                                                 class="category">{% for category in projekt.category %}{{ category.name }} {% endfor %}</p>
  518.                                         </a>
  519.                                         <a href="{{ detailLink }}" target="_self"><p
  520.                                                 class="headline">{{ projekt.maintitle }}</p></a>
  521.                                     </div>
  522.                                     <div class="buttons-row no-margin buttons-row-teaser">
  523.                                         <button class="primary">
  524.                                             <a href="{{ detailLink }}" target="_self">{{ 'Mehr_' | trans }}</a>
  525.                                         </button>
  526.                                     </div>
  527.                                 </div>
  528.                             </div>
  529.                         {% endfor %}
  530.                         </div> #}
  532.                 {#
  533.                 <div class="even">
  534.                     {% for projekt in evenTeaser %}
  535.                         {% set detailLink = path('projekt', {
  536.                             id: projekt.id,
  537.                             title: toUri(projekt.maintitle),
  538.                             path: 'projekt'
  539.                         }) %}
  540.                         <div
  541.                             class="project-teaser {% for category in projekt.category %}{{ category.name | lower | replace({" ": "","/":"","-":"","&":"",",":"",".":"","(":"",")":"","+":"","ö":"oe","ä":"ae","ü":"ue"}) }} {% endfor %}">
  542.                             <a href="{{ detailLink }}" target="_self">
  543.                                 {{ projekt.image.thumbnail('ProjectListTeaser').html | raw }}
  544.                             </a>
  545.                             <div class="elements-container flex">
  546.                                 <div class="labels">
  547.                                     <a href="{{ detailLink }}" target="_self">
  548.                                         <p class="category">{% for category in projekt.category %}{{ category.name }} {% endfor %}</p>
  549.                                     </a>
  550.                                     <a href="{{ detailLink }}" target="_self">
  551.                                         <p class="headline">{{ projekt.maintitle }}</p>
  552.                                     </a>
  553.                                 </div>
  554.                                 <div class="buttons-row no-margin buttons-row-teaser">
  555.                                     <button class="primary">
  556.                                         <a href="{{ detailLink }}" target="_self">Mehr</a>
  557.                                     </button>
  558.                                 </div>
  559.                             </div>
  560.                         </div>
  561.                     {% endfor %}
  562.                 </div>
  564.             </div>
  565.                 #}
  568.             </div>
  569.             {#
  570.             {% if pimcore_select("HeaderType").getData() == "projects" %}
  571.             <div class="buttons-row flex">
  572.                 <button class="primary load-more-button" id="ajaxBtn">
  573.                     <a>{{ 'MEHR_PROJEKTE_LADEN' | trans }}
  574.                         <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  575.                             <g transform="translate(0 0.354)">
  576.                                 <g transform="translate(0)">
  577.                                     <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#b76e2b" stroke-linejoin="round" stroke-width="1"/>
  578.                                     <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#b76e2b" stroke-width="1"/>
  579.                                 </g>
  580.                             </g>
  581.                         </svg>
  582.                     </a>
  583.                 </button>
  584.             </div>
  585.             {% endif %}
  586.             #}
  587.             {#
  588.             {% set nextPageAjax = path('projekt-list', {page: 2, filter: app.request.get('filter')}) %}
  590.             <div class="projects-container load-more buttons-row " id="projectsButtonContainer">
  592.                 <a href="{{ nextPageAjax }}" id="moreProjectsLink" title="load more" class="button primary" data-url="{{ nextPageAjax }}">{{ 'mehr_laden_projectsAjaxLink' | trans }}</a>
  594.             </div>
  595.             #}
  597.         </div>
  599.     </section>
  601.     {% if pimcore_select("HeaderType").getData() == "projects" %}
  602.         <script src="{{ asset('assets/js/projects-api.js') }}"></script>
  603.     {% endif %}
  605.     {% if pimcore_select("HeaderType").getData() == "impressions" %}
  606.         <script src="{{ asset('assets/js/impressions-api.js') }}"></script>
  607.     {% endif %}
  609. {% endif %}
  611. {% if pimcore_select("HeaderType").getData() == "news" and not editmode %}
  613.     <section class="content-header news-header flex column {{ pimcore_select("BackgroundColorNews").getData() }}">
  614.         <h1 class="vertical" id="headline-text-h1">{{  pimcore_textarea("h1_news").getData() }}</h1>
  616.         {% if pimcore_relation("ShadowImage").getElement() is instanceof('\\Pimcore\\Model\\Asset') %}
  617.             <div class="shadow-image-container project-detail" id="shadow-image-container">
  618.                 {{ pimcore_relation("ShadowImage").getElement().thumbnail('ProjectDetailShadow').html({
  619.                     'imgAttributes': {
  620.                         'class':'detail-shadow'
  621.                     }
  622.                 }) | raw }}
  623.             </div>
  624.         {% endif %}
  626.         <div class="container news-header-container">
  627.             <h1 class="light colored dark">{{ pimcore_textarea("product_description").getData() | nl2br }}</h1>
  628.             <div class="colored {{ pimcore_select("TextType").getData() }}">
  629.                 {% if not editmode and not pimcore_wysiwyg('Content').isEmpty() %}
  630.                     {{ pimcore_wysiwyg('Content').getData() | raw }}
  631.                 {% endif %}
  632.             </div>
  633.         </div>
  636.         <div class="news-items flex container no-margin news-overview mb-100" id="newsList">
  637.             {% for newsItem in newsList %}
  638.                 {# news detail link #}
  639.                 {% set detailLink = path('newslist', {
  640.                     id: newsItem.id,
  641.                     headline: toUri(newsItem.headline),
  642.                     path: 'news-url-path'|trans
  643.                 }) %}
  644.                 {# news detail link #}
  645.                 <div class="teaser news-overview-teaser news-teaser revealed">
  646.                     {% for fieldItem in newsItem.content %}
  647.                         {% if fieldItem.type == "Gallery" %}
  648.                             {#  {% for image in fieldItem.GalleryImg.items %} #}
  649.                             {% if fieldItem.GalleryImg.items | length > 0 and fieldItem.GalleryImg.items[0] %}
  650.                                 <a href="{{ detailLink }}">{{ fieldItem.GalleryImg.items[0].thumbnail('NewsTeaser').html | raw }}</a>
  651.                             {% endif %}
  652.                             {# {% endfor %} #}
  653.                         {% endif %}
  654.                     {% endfor %}
  655.                     <div class="content con-teaser ">
  656.                         <div class="date flex gap-10">
  657.                             <svg width="13" height="14.333" viewBox="0 0 13 14.333">
  658.                                 <g id="Icon_feather-calendar" data-name="Icon feather-calendar"
  659.                                    transform="translate(0.5 0.5)">
  660.                                     <path id="Pfad_4321" data-name="Pfad 4321"
  661.                                           d="M5.833,6h9.333A1.33,1.33,0,0,1,16.5,7.328V16.62a1.33,1.33,0,0,1-1.333,1.328H5.833A1.33,1.33,0,0,1,4.5,16.62V7.328A1.33,1.33,0,0,1,5.833,6Z"
  662.                                           transform="translate(-4.5 -4.615)" fill="none"
  663.                                           stroke="#6b675d"
  664.                                           stroke-linecap="round" stroke-linejoin="round"
  665.                                           stroke-width="1"/>
  666.                                     <path id="Pfad_4322" data-name="Pfad 4322" d="M24,3V5.771"
  667.                                           transform="translate(-15.333 -3)" fill="none" stroke="#6b675d"
  668.                                           stroke-linecap="round" stroke-linejoin="round"
  669.                                           stroke-width="1"/>
  670.                                     <path id="Pfad_4323" data-name="Pfad 4323" d="M12,3V5.771"
  671.                                           transform="translate(-8.667 -3)" fill="none" stroke="#6b675d"
  672.                                           stroke-linecap="round" stroke-linejoin="round"
  673.                                           stroke-width="1"/>
  674.                                     <path id="Pfad_4324" data-name="Pfad 4324" d="M4.5,15h12"
  675.                                           transform="translate(-4.5 -9.667)" fill="none"
  676.                                           stroke="#6b675d"
  677.                                           stroke-linecap="round" stroke-linejoin="round"
  678.                                           stroke-width="1"/>
  679.                                 </g>
  680.                             </svg>
  681.                             <p>{{ newsItem.date | date('d.m.Y') }}</p>
  683.                         </div>
  684.                         <p class="teaser-headline title-headline"><a href="{{ detailLink }}">{{ newsItem.headline | u.truncate(48, '...') }}</a></p>
  685.                         <div class="basic colored no-margin secondary">
  686.                             <a href="{{ detailLink }}"><p>{{ newsItem.intro | u.truncate(110, '...') }}</p></a>
  687.                         </div>
  688.                         <div class="buttons-row no-margin">
  689.                             <button class="primary accent">
  690.                                 <a href="{{ detailLink }}">{{ 'Mehr'|trans }}
  691.                                     <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  692.                                         <g transform="translate(0 0.354)">
  693.                                             <g transform="translate(0)">
  694.                                                 <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#b76e2b" stroke-linejoin="round" stroke-width="1"/>
  695.                                                 <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#b76e2b" stroke-width="1"/>
  696.                                             </g>
  697.                                         </g>
  698.                                     </svg>
  699.                                 </a>
  700.                             </button>
  701.                         </div>
  702.                     </div>
  703.                 </div>
  704.             {% endfor %}
  705.         </div>
  707.     </section>
  708.     {# next page #}
  709.     {% set nextPageAjax = path('news-list', {page: 2, filter: app.request.get('filter')}) %}
  710.     <section class="load-more" id="newsButtonContainer">
  711.         <a href="{{ nextPageAjax }}" id="moreNewsLink" title="load more" class="button primary moreNewsLink" data-url="{{ nextPageAjax }}">{# {{ 'mehr_laden_newsAjaxLink' | trans }} #}</a>
  712.     </section>
  713.     {#
  714.     <script src="{{ asset('assets/js/newslist.js') }}"></script>
  715.     <script src="{{ asset('assets/js/libs/gsap.min.js') }}"></script>
  716.     <script src="{{ asset('assets/js/libs/ScrollTrigger.min.js') }}"></script>
  718.     <script>
  719.         /*
  720.         gsap.to("#shadow-image-container", {
  721.             yPercent: -150,
  722.             //xPercent: 300,
  723.             ease: "none",
  724.             scrollTrigger: {
  725.                 trigger: ".news-header",
  726.                 // start: "top bottom", // the default values
  727.                 // end: "bottom top",
  728.                 scrub: true
  729.             }
  730.         });
  732.          */
  733.     </script>
  734.     #}
  735. {% endif %}
  737. {% if pimcore_select("HeaderType").getData() == "search" and not editmode %}
  738. <section class="search-results orange">
  739.     <h1 class="vertical" id="headline-text-h1">{{ 'SUCHE' | trans }}</h1>
  740.     <script async src="https://cse.google.com/cse.js?cx={{ searchCX }}"></script>
  741.     <script>
  743.         const placeholderInterval = setInterval(()=> {
  744.             const searchInput = document.getElementById('gsc-i-id1');
  745.             if (searchInput) {
  746.                 searchInput.setAttribute("placeholder", "Suche...");
  747.                 clearInterval(placeholderInterval)
  748.             }
  749.         }, 10)
  751.     </script>
  752.     <div class="container" id="gsc-i-id12">
  753.         <div class="content-container">
  754.             <div class="gcse-searchbox" data-enableHistory="true" data-enableAutoComplete="true" data-autoCompleteMaxCompletions="5"></div>
  755.             <div class="gcse-searchresults" data-refinementStyle="link"></div>
  756.         </div>
  757.     </div>
  759. </section>
  760. {% endif %}