templates/areas/contact-header/view.html.twig line 1

Open in your IDE?
  2. {% if editmode %}
  3.     <div class="edit-box">
  4.         <h1>KONFIGURATIONEN FÜR DEN AREABRICK:</h1>
  5.         <div class="flex gap-20">
  6.             <div class="content flex column gap-20">
  7.                 <div class="content-box flex gap-20">
  8.                     <div class="item">
  9.                         <p class="edit-p">Abstand nach <strong>oben</strong> wählen:</p>
  10.                         {{ pimcore_select("MarginTop", {
  11.                             "reload": true,
  12.                             "store": [
  13.                                 ["regularMT", "Normal"],
  14.                                 ["halfMT", "1/2"],
  15.                                 ["smallMT", "1/4"],
  16.                                 ["zeroMT", "kein Abstand"],
  17.                             ],
  18.                             "defaultValue" : "zeroMT"
  19.                         }) }}
  20.                     </div>
  22.                     <div class="item">
  23.                         <p class="edit-p">Abstand nach <strong>unten</strong> wählen:</p>
  24.                         {{ pimcore_select("MarginBottom", {
  25.                             "reload": true,
  26.                             "store": [
  27.                                 ["regular", "Normal"],
  28.                                 ["half", "1/2"],
  29.                                 ["small", "1/4"],
  30.                                 ["zero", "kein Abstand"],
  31.                             ],
  32.                             "defaultValue" : "regular"
  33.                         }) }}
  34.                     </div>                    
  35.                     
  36.                     {# <div class="item">
  37.                         <p class="edit-p">Hintergrund-Bild:</p>
  38.                         <div class="container" style="z-index: 10;position: relative;">
  39.                             {{ pimcore_relation("HeaderImage",{
  40.                                 "types": ["asset"],
  41.                                 "subtypes": {
  42.                                     "asset": ["image"]
  43.                                 }
  44.                             }) }}
  45.                         </div>
  46.                     </div> #}
  48.                 </div>
  49.             </div>
  50.         </div>
  51.     </div>
  52. {% endif %}
  54. <section class="content-header contact-header {{ pimcore_select('MarginTop').getData() }} {{ pimcore_select('MarginBottom').getData() }}">
  55.     {% if editmode %}
  56.     <div class="container" style="z-index: 10;position: relative;">
  57.         {{ pimcore_relation("HeaderImage",{
  58.             "types": ["asset"],
  59.             "subtypes": {
  60.                 "asset": ["image"]
  61.             }
  62.         }) }}
  63.     </div>
  64.     {% elseif not editmode and not pimcore_relation("HeaderImage").isEmpty() %}
  65.         <div class="bg">
  66.             {{ pimcore_relation("HeaderImage").getElement().thumbnail('ContentHeaderBackground').getHtml({'imgAttributes': {
  67.                 'class': 'content-header-image'
  68.             }}) | raw }}
  69.         </div>
  70.     {% endif %}
  71.     <div class="container content-header-container contact-header-container">
  72.         {# {% if editmode %}
  73.             <h1>{{ pimcore_textarea("headline",{
  74.                     "nl2br": true,
  75.                     "height": 100,
  76.                     "placeholder": "HAUPT ÜBERSCHRIFT FÜR DIESE AREA"
  77.                 }) }}
  78.             </h1>
  79.         {% elseif not editmode and not pimcore_textarea('headline').isEmpty() %}
  80.             <h1>{{ pimcore_textarea('headline').getData() | nl2br }}</h1>
  81.         {% endif %} #}
  82.         {# <div class="content-container lead">
  83.             {% if editmode %}
  84.                 <p>{{ pimcore_textarea("intro",{
  85.                         "nl2br": true,
  86.                         "height": 200,
  87.                         "class": "content-intro-text",
  88.                         "placeholder": "Quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat."
  89.                     }) }}
  90.                 </p>
  91.             {% elseif not editmode and not pimcore_textarea('intro').isEmpty() %}
  92.                 <p>{{ pimcore_textarea('intro').getData() | nl2br }}</p>
  93.             {% endif %}
  94.         </div> #}
  95.         <div class="contact-map">
  96.             <div class="info-container">
  97.                 <div class="info">
  98.                     {# <div class="headline-container">
  99.                         {% if editmode %}
  100.                         <p class="headline">{{ pimcore_textarea('company_name',{
  101.                                 "nl2br": true,
  102.                                 "height": 80,
  103.                                 "class": "headline",
  104.                                 "placeholder": "FELIX STÖCKLI AG"
  105.                             }) }}</p>
  106.                         {% elseif not editmode and not pimcore_textarea('company_name').isEmpty() %}
  107.                             <p class="headline">{{ pimcore_textarea('company_name').getData() | nl2br }}</p>
  108.                         {% endif %}
  109.                     </div> #}
  110.                     <div class="text-container">
  111.                         <div class="left">
  112.                             {% if editmode %}
  113.                                 {{ pimcore_wysiwyg('Content_left', {
  114.                                     height: 150,
  115.                                     customConfig: '/assets/js/editmode/config.js'
  116.                                 }) }}
  117.                             {% elseif not pimcore_wysiwyg('Content_left').isEmpty() %}
  118.                                 {{ pimcore_wysiwyg('Content_left').getData() | raw }}
  119.                             {% endif %}
  121.                             <div class="hexagon">
  122.                                 {{ include('svg/hexagon.html.twig') }}
  123.                             </div>
  124.                         </div>
  125.                         {#<div class="right">
  126.                             <p><strong>Rechnungsadresse</strong><br>Felix Stöckli AG Transporte<br>Im Hasliacher 2<br>5626 Hermetschwil</p>
  127.                         </div>+41 56 640 00 50#}
  128.                     </div>
  129.                     <div class="contact-container">
  130.                         {% if editmode %}
  131.                             {{ pimcore_link('tel') }}
  132.                         {% else %}
  133.                             <a class="contact-header__tel" href="tel:{{ pimcore_link('tel').getText() }}">
  134.                                 <svg width="24.136" height="24.181" viewBox="0 0 24.136 24.181">
  135.                                     <path id="Icon_feather-phone" data-name="Icon feather-phone" d="M25.3,19.605v3.339a2.226,2.226,0,0,1-2.426,2.226,22.025,22.025,0,0,1-9.6-3.417,21.7,21.7,0,0,1-6.678-6.678A22.025,22.025,0,0,1,3.177,5.426,2.226,2.226,0,0,1,5.392,3H8.73a2.226,2.226,0,0,1,2.226,1.914,14.29,14.29,0,0,0,.779,3.127,2.226,2.226,0,0,1-.5,2.348L9.821,11.8A17.807,17.807,0,0,0,16.5,18.481l1.413-1.413a2.226,2.226,0,0,1,2.348-.5,14.29,14.29,0,0,0,3.127.779A2.226,2.226,0,0,1,25.3,19.605Z" transform="translate(-2.167 -2)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
  136.                                 </svg>
  137.                                 <span>{{ pimcore_link('tel').getText() }}</span>
  138.                             </a>
  139.                         {% endif %}
  141.                         {% if editmode %}
  142.                             {{ pimcore_link('mail') }}
  143.                         {% else %}
  144.                             <a class="contact-header__email" href="mailto:{{ pimcore_link('mail').getText() }}">
  145.                                 <svg width="22.259" height="17.807" viewBox="0 0 22.259 17.807">
  146.                                     <path id="Icon_material-mail-outline" data-name="Icon material-mail-outline" d="M23.033,6H5.226A2.223,2.223,0,0,0,3.011,8.226L3,21.581a2.232,2.232,0,0,0,2.226,2.226H23.033a2.232,2.232,0,0,0,2.226-2.226V8.226A2.232,2.232,0,0,0,23.033,6Zm0,15.581H5.226V10.452l8.9,5.565,8.9-5.565Zm-8.9-7.791-8.9-5.565H23.033Z" transform="translate(-3 -6)" fill="#fff"/>
  147.                                 </svg>
  148.                                 <span>{{ pimcore_link('mail').getText() }}</span>
  149.                             </a>
  150.                         {% endif %}
  151.                     </div>
  152.           
  153.                     {% if editmode %}
  154.                         {{ pimcore_link('Google_Maps') }}
  155.                     {% else %}
  156.                         <a class="button maps-link" href="{{ pimcore_link('Google_Maps').getHref() }}" target="_blank">
  157.                             {{ pimcore_link('Google_Maps').getText() }}
  158.                             {{ include('svg/arrow-right.html.twig') }}
  159.                         </a>
  160.                     {% endif %}
  161.                 </div>
  162.             </div>
  164.             <div class="map-container">
  165.             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2708.5335341001028!2d8.455755476813634!3d47.24526951285875!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47900702d14b987f%3A0x78c4e51eaf63a592!2su.%20Fischbachstrasse%202%2C%208932%20Mettmenstetten!5e0!3m2!1sen!2sch!4v1736501000762!5m2!1sen!2sch" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>            </div>
  166.         </div>
  167.     </div>
  168. </section>