templates/areas/headline-text/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">
  6.             <div class="content flex column gap-20">
  7.                 <div class="content-box">
  8.                     <p class="edit-p">H1 HEADLINE TEXT:</p>
  9.                     {{ pimcore_input('h1', {'placeholder':'H1 HEADLINE' }) }}
  10.                 </div>
  11.                 <div class="content-box flex gap-20">
  12.                     <div class="item">
  13.                         <p class="edit-p">Texttyp wählen:</p>
  14.                         {{ pimcore_select("TextType", {
  15.                             "reload": true,
  16.                             "store": [
  17.                                 ["lead", "Lead Text"],
  18.                                 ["basic", "Fliess Text"]
  19.                             ],
  20.                             "defaultValue" : "lead"
  21.                         }) }}
  22.                     </div>
  23.                     <div class="item">
  24.                         <p class="edit-p">Text breite:</p>
  25.                         {{ pimcore_select("TextWidth", {
  26.                             "reload": true,
  27.                             "store": [
  28.                                 ["full-width", "Voll"],
  29.                                 [" ", "Standard"]
  30.                             ],
  31.                             "defaultValue" : " "
  32.                         }) }}
  33.                     </div>
  34.                     <div class="item">
  35.                         <p class="edit-p">Buttons einfügen:</p>
  36.                         {{ pimcore_select("ButtonsRow", {
  37.                             "reload": true,
  38.                             "store": [
  39.                                 ["true", "Mit Buttons"],
  40.                                 ["false", "Ohne Buttons"]
  41.                             ],
  42.                             "defaultValue" : "false"
  43.                         }) }}
  44.                     </div>
  45.                     <div class="item">
  46.                         <p class="edit-p">Meilensteine einfügen:</p>
  47.                         {{ pimcore_select("Milestones", {
  48.                             "reload": true,
  49.                             "store": [
  50.                                 ["true", "Mit Meilensteine"],
  51.                                 ["false", "Ohne Meilensteine"],
  52.                             ],
  53.                             "defaultValue" : "false"
  54.                         }) }}
  55.                     </div>
  56.                     <div class="item">
  57.                         <p class="edit-p">Accordion einfügen:</p>
  58.                         {{ pimcore_select("Accordion", {
  59.                             "reload": true,
  60.                             "store": [
  61.                                 ["true", "Mit Jobs"],
  62.                                 ["false", "Ohne Jobs"],
  63.                             ],
  64.                             "defaultValue" : "false"
  65.                         }) }}
  66.                     </div>
  67.                     <div class="item">
  68.                         <p class="edit-p">Abstände oben und unten:</p>
  69.                         {{ pimcore_select("Padding", {
  70.                             "reload": true,
  71.                             "store": [
  72.                                 ["small", "Klein"],
  73.                                 ["default", "Normal"]
  74.                             ],
  75.                             "defaultValue" : "default"
  76.                         }) }}
  77.                     </div>
  78.                     <div class="item">
  79.                         <p class="edit-p">Hintergrund:</p>
  80.                         {{ pimcore_select("Background", {
  81.                             "reload": true,
  82.                             "store": [
  83.                                 ["bg-default", "Standard"],
  84.                                 ["transparent", "Ohne"]
  85.                             ],
  86.                             "defaultValue" : "bg-default"
  87.                         }) }}
  88.                     </div>
  89.                     <div class="item">
  90.                         <p class="edit-p">Team einfügen:</p>
  91.                         {{ pimcore_select("Team", {
  92.                             "reload": true,
  93.                             "store": [
  94.                                 ["true", "Mit Team"],
  95.                                 ["false", "Ohne Team"],
  96.                             ],
  97.                             "defaultValue" : "false"
  98.                         }) }}
  99.                     </div>
  100.                     <div class="item">
  101.                         <p class="edit-p">Video einfügen:</p>
  102.                         {{ pimcore_select("VideoSelect", {
  103.                             "reload": true,
  104.                             "store": [
  105.                                 ["true", "Mit Video"],
  106.                                 ["false", "Ohne Video"],
  107.                             ],
  108.                             "defaultValue" : "false"
  109.                         }) }}
  110.                     </div>
  112.                     <div class="item">
  113.                         <p class="edit-p">Anker Text:</p>
  114.                         {{ pimcore_input('anchor',{'placeholder':'Anker Text','width':300}) }}
  115.                     </div>
  116.                 </div>
  119.             </div>
  121.             <div class="content flex column gap-20">
  122.                 <div class="content-box">
  123.                     <div class="item">
  124.                         <p class="edit-p">Hintergrundbild ablegen:</p>
  125.                         {{ pimcore_relation("Image",{
  126.                             "reload": true,
  127.                             "types": ["asset"],
  128.                             "subtypes": {
  129.                                 "asset": ["image"]
  130.                             }
  131.                         }) }}
  132.                     </div>
  133.                 </div>
  134.                 <div class="content-box">
  135.                     <div class="item">
  136.                         <p class="edit-p">Schattenbild oben ablegen:</p>
  137.                         {{ pimcore_relation("ShadowImage",{
  138.                             "reload": false,
  139.                             "types": ["asset"],
  140.                             "subtypes": {
  141.                                 "asset": ["image"]
  142.                             }
  143.                         }) }}
  144.                     </div>
  145.                     <div class="item">
  146.                         <p class="edit-p">Schattenbild unten ablegen:</p>
  147.                         {{ pimcore_relation("ShadowImage2",{
  148.                             "reload": false,
  149.                             "types": ["asset"],
  150.                             "subtypes": {
  151.                                 "asset": ["image"]
  152.                             }
  153.                         }) }}
  154.                     </div>
  155.                 </div>
  157.                 {% if pimcore_select("VideoSelect").getData() == "true" %}
  158.                     <div class="content-box">
  159.                         <div class="item">
  160.                             <p class="edit-p">Video Vorschaubild ablegen:</p>
  161.                             {{ pimcore_relation("VideoPosterImage",{
  162.                                 "reload": true,
  163.                                 "types": ["asset"],
  164.                                 "subtypes": {
  165.                                     "asset": ["image"]
  166.                                 }
  167.                             }) }}
  168.                         </div>
  169.                         <br>
  170.                         <div class="item">
  171.                             <p class="edit-p">YouTube Link eintragen:</p>
  172.                             {{ pimcore_input("YouTubeLink") }}
  173.                         </div>
  174.                     </div>
  175.                 {% endif %}
  176.             </div>
  178.         </div>
  179.     </div>
  180. {% endif %}
  182. <section class="{% if pimcore_select("Team").getData() == "true" %}team-section {% endif %} {% if pimcore_select("Accordion").getData() == "true" %} accordion {% endif %} headline-text {% if not pimcore_relation("Image").isEmpty() %} light {% else %} light-beige {% endif %} {{ pimcore_select("Padding").getData() }} {{ pimcore_select("Background").getData() }}" {% if not pimcore_input('anchor').isEmpty() %}id="{{ pimcore_input('anchor').getData() }}"{% endif %}>
  184.     {% if not pimcore_relation("ShadowImage").isEmpty() and not editmode %}
  185.         <div class="shadow-image-con multi-area-shadow shadow-container">
  186.             {{ pimcore_relation("ShadowImage").getElement().getThumbnail('ShadowImage').html({
  187.                 imgAttributes: {
  188.                     "class": "shadow-image"
  189.                 }
  190.             }) | raw }}
  191.         </div>
  192.     {% endif %}
  194.     {% if not pimcore_relation("ShadowImage2").isEmpty() and not editmode %}
  195.         <div class="shadow-image-con multi-area-shadow multi-area-shadow-2">
  196.             {{ pimcore_relation("ShadowImage2").getElement().getThumbnail('ShadowImage').html({
  197.                 imgAttributes: {
  198.                     "class": "shadow-image"
  199.                 }
  200.             }) | raw }}
  201.         </div>
  202.     {% endif %}
  204.     {% if not pimcore_relation("Image").isEmpty() %}
  205.         {{ pimcore_relation("Image").getElement().getThumbnail('FullHD').html({
  206.             imgAttributes: {
  207.                 "class": "bg-image"
  208.             }
  209.         }) | raw }}
  210.     {% endif %}
  214.     {% if not pimcore_input('h1').isEmpty() and pimcore_select("VideoSelect").getData() == "false" %}
  215.         <h1 class="vertical">{{ pimcore_input('h1').getData() }}</h1>
  216.     {% endif %}
  217.     {% if pimcore_select("VideoSelect").getData() == "true" %}
  218.     <div class="video-section-container" style="position: relative;">
  219.     {% endif %}
  221.     <div class="container">
  222.         {% if not pimcore_input('h1').isEmpty() and pimcore_select("VideoSelect").getData() == "true" %}
  223.             <h1 class="vertical video-h1">{{ pimcore_input('h1').getData() }}</h1>
  224.         {% endif %}
  225.         {% if editmode %}
  226.             <h2>
  227.                 {{ pimcore_textarea("h2",{
  228.                     "nl2br": true,
  229.                     "height": 120,
  230.                     "placeholder": "H2 Headline Text"
  231.                 }) }}
  232.             </h2>
  233.             {% if pimcore_select("Milestones").getData() == "false" %}
  234.                 <div class="{{ pimcore_select("TextType").getData() }} {{ pimcore_select("TextWidth").getData() }}">
  235.                     {{ pimcore_wysiwyg('Content', {
  236.                         height: 200,
  237.                         customConfig: '/assets/js/editmode/config.js'
  238.                     }) }}
  239.                 </div>
  240.             {% endif %}
  241.         {% endif %}
  242.         {% if pimcore_select("Team").getData() == "true" %}
  243.         <div class="content-container">
  244.             {% endif %}
  246.             {% if not editmode and not pimcore_textarea("h2").isEmpty() %}
  247.                 <h2>{{ pimcore_textarea("h2").getData() | nl2br }}</h2>
  248.             {% endif %}
  251.             {% if not editmode and not pimcore_wysiwyg('Content').isEmpty() %}
  252.                 <div
  253.                     class="{{ pimcore_select("TextType").getData() }} {{ pimcore_select("TextWidth").getData() }} {% if not pimcore_textarea("h2").isEmpty() %}with-headline{% endif %}">
  254.                     {{ pimcore_wysiwyg('Content').getData() | raw }}
  255.                 </div>
  256.             {% endif %}
  259.             {{ pimcore_areablock('AreablockContent', {
  260.                 'allowed': [
  261.                     'text',
  262.                 ]
  263.             }) }}
  265.             {% if pimcore_select("Team").getData() == "true" %}
  266.         </div>
  267.         {% endif %}
  270.         {% if pimcore_select("ButtonsRow").getData() == "true" %}
  271.             {% if pimcore_select("Milestones").getData() == "false" %}
  272.             <div class="buttons-row flex {{ pimcore_select("TextWidth").getData() }} {% if not pimcore_relation("Image").isEmpty() %} negativ{% else %} default{% endif %}">
  273.                 {% for i in pimcore_block('linkblock').iterator %}
  274.                     <button class="primary">
  275.                         {{ pimcore_link('Link') }}
  276.                         <svg width="15.708" height="10.709" viewBox="0 0 15.708 10.709">
  277.                             <g transform="translate(0 0.354)">
  278.                                 <g transform="translate(0)">
  279.                                     <path class="line" d="M7.5,18h15" transform="translate(-7.5 -13)" fill="none" stroke="#b76e2b" stroke-linejoin="round" stroke-width="1"/>
  280.                                     <path class="arrow" d="M18,7.5l5.026,5L18,17.5" transform="translate(-8.027 -7.5)" fill="none" stroke="#b76e2b" stroke-width="1"/>
  281.                                 </g>
  282.                             </g>
  283.                         </svg>
  284.                     </button>
  285.                 {% endfor %}
  286.             </div>
  287.                 {% endif %}
  288.         {% endif %}
  290.         {% if pimcore_select("Milestones").getData() == "true" %}
  291.             <div class="milestones flex column">
  292.                 {% for i in pimcore_block('milestones-block').iterator %}
  293.                     <div class="stone">
  294.                         <p class="year">{{ pimcore_input('year', {'placeholder':'2000 - 2023', 'width': 200}) }}</p>
  295.                         <p class="content">{{ pimcore_input('content', {'placeholder':'Felix Hodel Gartenbau gründet seine Einzelfirma im Grabenhof, Kriens'}) }}</p>
  296.                     </div>
  297.                 {% endfor %}
  298.             </div>
  299.         {% endif %}
  302.         {% if pimcore_select("Accordion").getData() == "true" %}
  303.             <div class="accordion-items flex column benefits">
  304.                 <div class="content-container">
  305.                     <div class="block">
  306.                         {% if editmode %}
  307.                             {{ pimcore_relations("JobRelations", {
  308.                                 "title": "Jobs Objekte ablegen:",
  309.                                 "types": ["object"],
  310.                                 "subtypes": {
  311.                                     "object": ["object"]
  312.                                 },
  313.                                 "classes": ["Job"]
  314.                             }) }}
  315.                         {% else %}
  316.                             {% for job in pimcore_relations("JobRelations") %}
  317.                                 <div class="parent block-accordion">
  318.                                     <input type="radio" name="item"
  319.                                            id="{{ pimcore_relations("JobRelations").current() }}" hidden/>
  320.                                     <label for="{{ pimcore_relations("JobRelations").current() }}">
  321.                                         <span class="headline">{{ job.headline | nl2br }}</span>
  322.                                         <span class="text-intro">{{ job.intro | nl2br }}</span>
  323.                                     </label>
  325.                                     <div>
  326.                                         {#{% if job.image %}
  327.                                         {{ job.image.thumbnail('JobAccordion').getHtml({
  328.                                             imgAttributes : {
  329.                                                 'class':'job-acc-image'
  330.                                             }
  331.                                         }) | raw }}
  332.                                             <br>
  333.                                             <br>
  334.                                         {% endif %}#}
  336.                                         {{ job.text | raw }}
  337.                                     </div>
  338.                                 </div>
  339.                             {% endfor %}
  340.                         {% endif %}
  341.                     </div>
  342.                 </div>
  343.             </div>
  344.         {% endif %}
  347.     </div>
  349.     {% if pimcore_select("VideoSelect").getData() == "true" %}
  350.     </div>
  351.     {% endif %}
  352.     {% if pimcore_select("VideoSelect").getData() == "true" and not pimcore_relation("VideoPosterImage").isEmpty() %}
  353.         <div class="video-section">
  354.             {{ pimcore_relation("VideoPosterImage").getElement().getThumbnail('VideoPosterImage').getHtml() | raw }}
  355.             <button class="play">
  356.                 <a href="{{ pimcore_input("YouTubeLink").getData() }}" target="_blank">
  357.                     <svg width="165.583" height="165.583" viewBox="0 0 165.583 165.583">
  358.                         <path id="Icon_ionic-ios-play-circle" data-name="Icon ionic-ios-play-circle"
  359.                               d="M86.166,3.375a82.791,82.791,0,1,0,82.792,82.791A82.779,82.779,0,0,0,86.166,3.375Zm33.355,84.344L64.911,120.756a1.771,1.771,0,0,1-2.667-1.552V53.13a1.764,1.764,0,0,1,2.667-1.552l54.611,33.037A1.825,1.825,0,0,1,119.522,87.719Z"
  360.                               transform="translate(-3.375 -3.375)" fill="#fff" opacity="0.6"/>
  361.                     </svg>
  362.                 </a>
  363.             </button>
  364.         </div>
  365.         <div class="container">
  367.             {{ pimcore_areablock('AreablockVideo', {
  368.                 'allowed': [
  369.                     'text',
  370.                 ]
  371.             }) }}
  372.         </div>
  374.     {% endif %}
  376.     {% if pimcore_select("Team").getData() == "true" %}
  377.         {% if editmode %}
  378.             <div class="container">
  379.                 {{ pimcore_relations("Categories", {
  380.                     "title": "Team Kategorie Objekte ablegen",
  381.                     "types": ["object"],
  382.                     "subtypes": {
  383.                         "object": ["object"]
  384.                     },
  385.                     "classes": ["Category"]
  386.                 }) }}
  387.                 <br>
  388.                 <br>
  389.                 {{ pimcore_relations("teamPerson", {
  390.                     "title": "Team Objekte ablegen",
  391.                     "types": ["object"],
  392.                     "subtypes": {
  393.                         "object": ["object"]
  394.                     },
  395.                     "classes": ["teamPerson"]
  396.                 }) }}
  397.             </div>
  398.         {% else %}
  399.             <div class="container">
  400.                 <div id="filters" class="toolbar {% if pimcore_relations("Categories") | length >= 5 %}big{% endif %}">
  401.                     <div class="flex space-between all-items">
  402.                         <button class="filter active all-btn"
  403.                                 data-filter="grid-item">{{ 'Alle_filter' | trans }}</button>
  404.                         <span class="open-filter" id="open-filter"></span>
  405.                     </div>
  407.                     {% for category in pimcore_relations("Categories") %}
  408.                         {% set categoryName = category.name | lower | replace({" ": "","/":"","-":"","&":"",",":"",".":"","(":"",")":"","+":""}) %}
  409.                         <button class="filter" data-rel="{{ categoryName }}" data-filter="{{ categoryName }}">{{ category.name }}</button>
  410.                     {% endfor %}
  411.                 </div>
  412.             </div>
  414.             <div class="grid" id="portfolio">
  415.                 {% for teamPerson in pimcore_relations("teamPerson") %}
  416.                     <div class="grid-item {% if teamPerson.plant == true %} plant {% endif %} {% for teamCategory in teamPerson.getCategory() %}{{ teamCategory.name | lower | replace({" ": "","/":"","-":"","&":"",",":"",".":"","(":"",")":"","+":""}) }} {% endfor %} {{ teamPerson.teaserSize }}">
  417.                         <div class="container">
  418.                             {% if teamPerson.filter %}
  419.                             {{ teamPerson.portraitimage.thumbnail('TeamOverview').getHtml({
  420.                                 imgAttributes : {
  421.                                     'class':'filter'
  422.                                 }
  423.                             }) | raw }}
  424.                             {% else %}
  425.                                 {{ teamPerson.portraitimage.thumbnail('TeamOverview').getHtml({
  426.                                     imgAttributes : {
  427.                                         'class':'no-filter'
  428.                                     }
  429.                                 }) | raw }}
  430.                             {% endif %}
  431.                             {% if not teamPerson.plant == true %}
  432.                             <div class="name">
  433.                                 <p>{{ teamPerson.name }}</p>
  434.                             </div>
  436.                             <div class="close-btn">
  437.                                 <button>
  438.                                     <svg x="0px" y="0px" viewBox="0 0 55 55">
  439.                                         <g>
  440.                                             <path d="M49,8.5v-8H0v47h7v7h48v-46H49z M2,45.5v-43h45v6H7v37H2z M53,52.5H9v-5v-37h40h4V52.5z"/>
  441.                                             <path d="M39.485,23.015c-0.391-0.391-1.023-0.391-1.414,0L31,30.086l-7.071-7.071c-0.391-0.391-1.023-0.391-1.414,0
  442.                                                 s-0.391,1.023,0,1.414l7.071,7.071l-7.071,7.071c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293
  443.                                                 s0.512-0.098,0.707-0.293L31,32.914l7.071,7.071c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293
  444.                                                 c0.391-0.391,0.391-1.023,0-1.414L32.414,31.5l7.071-7.071C39.876,24.038,39.876,23.405,39.485,23.015z"/>
  445.                                         </g>
  446.                                     </svg>
  447.                                 </button>
  448.                             </div>
  449.                             <div class="description">
  450.                                 {% if teamPerson.name %}
  451.                                     <p class="name-label">{{ teamPerson.name }}</p>
  452.                                 {% endif %}
  453.                                 {% if teamPerson.function %}
  454.                                     <p class="function">{{ teamPerson.function }}</p>
  455.                                 {% endif %}
  457.                                 {% if teamPerson.text %}
  458.                                     <div class="desc-text">
  459.                                         {{ teamPerson.text | raw }}
  460.                                     </div>
  461.                                 {% endif %}
  462.                                 {% if teamPerson.phone %}
  463.                                     <a class="link-item" href="tel:{{ teamPerson.phone }}">{{ teamPerson.phone }}</a>
  464.                                 {% endif %}
  465.                                 {% if teamPerson.email %}
  466.                                     <a class="link-item" href="mailto:{{ teamPerson.email }}">{{ teamPerson.email }}</a>
  467.                                 {% endif %}
  468.                             </div>
  469.                             {% endif %}
  470.                         </div>
  471.                     </div>
  472.                 {% endfor %}
  473.             </div>
  474.         {% endif %}
  475.     {% endif %}
  477. </section>
  478. {#
  479. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
  480. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script>
  482. <script>
  483.     gsap.from('#headline-text-h1', {
  484.         scrollTrigger : {
  485.             scrub: true
  486.         },
  487.         x: -90
  488.     })
  489. </script>
  490. #}