templates/includes/detailSnippet.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/layout-snippet.html.twig' %}
  3. {% block content %}
  4.     <section class="snippet-wrapper">
  5.         <div class="snippet-container">
  7.             {# mobile close button #}
  8.             <a class="x-btn">
  9.                 <form>
  11.                     <input type="button" onclick="history.back()">
  13.                     <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42">
  14.                         <g transform="translate(-103.765 0.235)" style="isolation: isolate">
  15.                             <g transform="translate(103.765 -0.235)" fill="none" stroke="#000" stroke-width="2">
  16.                                 <rect width="42" height="42" rx="21" stroke="none"/>
  17.                                 <rect x="1" y="1" width="40" height="40" rx="20" fill="none"/>
  18.                             </g>
  19.                             <text transform="translate(124.765 28.765)" font-size="25" font-family="ZapfDingbatsITC, Zapf Dingbats"><tspan x="-9.528" y="0">✕</tspan></text>
  20.                         </g>
  21.                     </svg>
  23.                 </form>
  24.             </a>
  26.             {# title, text, back button #}
  27.             <div class="text">
  28.                 <div class="container">
  30.                     {% if editmode %}
  31.                         <h1>{{ pimcore_input('headline',{'placeholder':'Fachzeitschriften'}) }}</h1>
  32.                     {% elseif not editmode and not pimcore_input('headline').isEmpty() %}
  33.                         <h1>{{ pimcore_input('headline').getData() }}</h1>
  34.                     {% endif %}
  36.                     {% if editmode %}
  37.                         {{ pimcore_wysiwyg("snippetContent", {
  38.                             "height": 200,
  39.                             "toolbarGroups": [
  40.                                 {
  41.                                     "name": 'basicstyles',
  42.                                     "groups": [ 'basicstyles', 'list', "links"]
  43.                                 }
  44.                             ]}) }}
  45.                     {% elseif not editmode and not pimcore_wysiwyg("snippetContent").isEmpty() %}
  46.                         {{ pimcore_wysiwyg("snippetContent").getData() | raw }}
  47.                     {% endif %}
  49.                     {# back button #}
  50.                     <form>
  51.                         <a class="btn-snippet">
  53.                             <input type="button" onclick="history.back()">
  55.                             <svg xmlns="http://www.w3.org/2000/svg" width="215.129" height="49.2" viewBox="0 0 215.129 49.2">
  56.                                 <g id="Gruppe_138" transform="translate(312 -4274)" style="isolation: isolate">
  57.                                     <g id="Gruppe_84" transform="translate(-312 4274)" style="mix-blend-mode: screen;isolation: isolate">
  58.                                         <g id="Gruppe_85" style="mix-blend-mode: screen;isolation: isolate">
  59.                                             <g id="Pfad_37" fill="none">
  60.                                                 <path d="M25.1,0H190.031a24.853,24.853,0,0,1,25.1,24.6,24.853,24.853,0,0,1-25.1,24.6H25.1A24.853,24.853,0,0,1,0,24.6,24.853,24.853,0,0,1,25.1,0Z" stroke="none"/>
  61.                                                 <path d="M 25.09840393066406 2 C 21.97430419921875 2 18.94509887695312 2.599117279052734 16.09489440917969 3.780704498291016 C 13.34346008300781 4.921352386474609 10.87266540527344 6.554058074951172 8.7510986328125 8.633499145507812 C 6.632339477539062 10.71017837524414 4.969451904296875 13.12705993652344 3.80865478515625 15.81700134277344 C 2.6085205078125 18.59811782836914 1.999984741210938 21.55314826965332 1.999984741210938 24.60000038146973 C 1.999984741210938 27.64685249328613 2.6085205078125 30.60188293457031 3.80865478515625 33.38299942016602 C 4.969451904296875 36.07294082641602 6.632339477539062 38.48982238769531 8.7510986328125 40.56650161743164 C 10.87266540527344 42.64594268798828 13.34346008300781 44.27864837646484 16.09489440917969 45.41929626464844 C 18.94509887695312 46.60088348388672 21.97430419921875 47.20000076293945 25.09840393066406 47.20000076293945 L 190.0306396484375 47.20000076293945 C 193.1547241210938 47.20000076293945 196.1839294433594 46.60088348388672 199.0341339111328 45.41929626464844 C 201.7855682373047 44.27864837646484 204.2563629150391 42.64594268798828 206.3779296875 40.56650161743164 C 208.4966888427734 38.48982238769531 210.1595458984375 36.07294082641602 211.3203430175781 33.38299942016602 C 212.5204772949219 30.60188293457031 213.1290130615234 27.64685249328613 213.1290130615234 24.60000038146973 C 213.1290130615234 21.55314826965332 212.5204772949219 18.59811782836914 211.3203430175781 15.81700134277344 C 210.1595458984375 13.12705993652344 208.4966888427734 10.71017837524414 206.3779296875 8.633499145507812 C 204.2563629150391 6.554058074951172 201.7855682373047 4.921352386474609 199.0341339111328 3.780704498291016 C 196.1839294433594 2.599117279052734 193.1547241210938 2 190.0306396484375 2 L 25.09840393066406 2 M 25.09840393066406 0 L 190.0306396484375 0 C 203.8921051025391 0 215.1290130615234 11.0137939453125 215.1290130615234 24.60000038146973 C 215.1290130615234 38.18620681762695 203.8921051025391 49.20000076293945 190.0306396484375 49.20000076293945 L 25.09840393066406 49.20000076293945 C 11.23692321777344 49.20000076293945 -1.52587890625e-05 38.18620681762695 -1.52587890625e-05 24.60000038146973 C -1.52587890625e-05 11.0137939453125 11.23692321777344 0 25.09840393066406 0 Z" stroke="none" fill="#000"/>
  62.                                             </g>
  63.                                             <text id="_Zurück" transform="translate(101.801 33.201)" font-size="27" font-family="LucidaGrande, Lucida Grande"><tspan x="-60.818" y="0">←</tspan><tspan y="0" xml:space="preserve" font-family="MuseoSans-500, Museo Sans" font-weight="500"> Zurück</tspan></text>
  64.                                         </g>
  65.                                     </g>
  66.                                 </g>
  67.                             </svg>
  69.                         </a>
  70.                     </form>
  72.                 </div>
  73.             </div>
  75.             {# images or videos #}
  76.             {% if editmode %}
  78.                 {{ pimcore_relations("SnippetImages", {
  79.                     "types": ["object"],
  80.                     "title": "Magazin Objekte Ablegen",
  81.                     "subtypes": {
  82.                         "object": ["object"]
  83.                     },
  84.                     "classes": ["Magazin"]
  85.                 }) }}
  87.             {% elseif not editmode and not pimcore_relations("SnippetImages").isEmpty() %}
  89.                 <div class="images-container">
  90.                     <div class="images">
  91.                         {% for img in pimcore_relations("SnippetImages") %}
  93.                             {# Magazin objects #}
  94.                             <a {% if img.getModal() != "true" %} {% if img.getLink() %}href="{{ img.getLink().getHref() }}"{% endif %} target="{{ img.getLink().getTarget() }}" {% endif %}>
  95.                                 <div class="{% if img.video %}teaser-video{% else %}teaser{% endif %} {{ document.getProperty('Name') }}">
  97.                                     <div class="image-container">
  99.                                         {{ img.getImage().thumbnail('SnippetTeaser').html() | raw }}
  101.                                         {% if img.video %}
  102.                                             {{ include('svg/play.html.twig') }}
  103.                                         {% endif %}
  105.                                     </div>
  107.                                     {# modal #}
  108.                                     {% if img.getModal() == "true" %}
  110.                                         {# video or image #}
  111.                                         {% if img.video %}
  112.                                             <div class="modal-video">
  114.                                                 <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42">
  115.                                                     <g transform="translate(-103.765 0.235)" style="isolation: isolate">
  116.                                                         <g transform="translate(103.765 -0.235)" fill="none" stroke="#000" stroke-width="2">
  117.                                                             <rect width="42" height="42" rx="21" stroke="none"/>
  118.                                                             <rect x="1" y="1" width="40" height="40" rx="20" fill="none"/>
  119.                                                         </g>
  120.                                                         <text transform="translate(124.765 28.765)" font-size="25" font-family="ZapfDingbatsITC, Zapf Dingbats"><tspan x="-9.528" y="0">✕</tspan></text>
  121.                                                     </g>
  122.                                                 </svg>
  124.                                                 <div class="video">
  125.                                                     <video controls>
  126.                                                         <source src="{{ img.video }}">
  127.                                                     </video>
  128.                                                 </div>
  130.                                             </div>
  131.                                         {% else %}
  132.                                             <div class="modal-image">
  134.                                                 <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42">
  135.                                                     <g transform="translate(-103.765 0.235)" style="isolation: isolate">
  136.                                                         <g transform="translate(103.765 -0.235)" fill="none" stroke="#000" stroke-width="2">
  137.                                                             <rect width="42" height="42" rx="21" stroke="none"/>
  138.                                                             <rect x="1" y="1" width="40" height="40" rx="20" fill="none"/>
  139.                                                         </g>
  140.                                                         <text transform="translate(124.765 28.765)" font-size="25" font-family="ZapfDingbatsITC, Zapf Dingbats"><tspan x="-9.528" y="0">✕</tspan></text>
  141.                                                     </g>
  142.                                                 </svg>
  144.                                                 {{ img.getImage().thumbnail('ModalImage').html() | raw }}
  146.                                             </div>
  147.                                         {% endif %}
  148.                                     {% endif %}
  150.                                 </div>
  151.                             </a>
  153.                         {% endfor %}
  154.                     </div>
  155.                 </div>
  157.                 {# back button #}
  158.                 <form class="back-btn-form">
  160.                     <input type="button" onclick="history.back()">
  162.                     <svg xmlns="http://www.w3.org/2000/svg" width="215.129" height="49.2" viewBox="0 0 215.129 49.2">
  163.                         <g id="Gruppe_138" transform="translate(312 -4274)" style="isolation: isolate">
  164.                             <g id="Gruppe_84" transform="translate(-312 4274)" style="mix-blend-mode: screen;isolation: isolate">
  165.                                 <g id="Gruppe_85" style="mix-blend-mode: screen;isolation: isolate">
  166.                                     <g id="Pfad_37" fill="none">
  167.                                         <path d="M25.1,0H190.031a24.853,24.853,0,0,1,25.1,24.6,24.853,24.853,0,0,1-25.1,24.6H25.1A24.853,24.853,0,0,1,0,24.6,24.853,24.853,0,0,1,25.1,0Z" stroke="none"/>
  168.                                         <path d="M 25.09840393066406 2 C 21.97430419921875 2 18.94509887695312 2.599117279052734 16.09489440917969 3.780704498291016 C 13.34346008300781 4.921352386474609 10.87266540527344 6.554058074951172 8.7510986328125 8.633499145507812 C 6.632339477539062 10.71017837524414 4.969451904296875 13.12705993652344 3.80865478515625 15.81700134277344 C 2.6085205078125 18.59811782836914 1.999984741210938 21.55314826965332 1.999984741210938 24.60000038146973 C 1.999984741210938 27.64685249328613 2.6085205078125 30.60188293457031 3.80865478515625 33.38299942016602 C 4.969451904296875 36.07294082641602 6.632339477539062 38.48982238769531 8.7510986328125 40.56650161743164 C 10.87266540527344 42.64594268798828 13.34346008300781 44.27864837646484 16.09489440917969 45.41929626464844 C 18.94509887695312 46.60088348388672 21.97430419921875 47.20000076293945 25.09840393066406 47.20000076293945 L 190.0306396484375 47.20000076293945 C 193.1547241210938 47.20000076293945 196.1839294433594 46.60088348388672 199.0341339111328 45.41929626464844 C 201.7855682373047 44.27864837646484 204.2563629150391 42.64594268798828 206.3779296875 40.56650161743164 C 208.4966888427734 38.48982238769531 210.1595458984375 36.07294082641602 211.3203430175781 33.38299942016602 C 212.5204772949219 30.60188293457031 213.1290130615234 27.64685249328613 213.1290130615234 24.60000038146973 C 213.1290130615234 21.55314826965332 212.5204772949219 18.59811782836914 211.3203430175781 15.81700134277344 C 210.1595458984375 13.12705993652344 208.4966888427734 10.71017837524414 206.3779296875 8.633499145507812 C 204.2563629150391 6.554058074951172 201.7855682373047 4.921352386474609 199.0341339111328 3.780704498291016 C 196.1839294433594 2.599117279052734 193.1547241210938 2 190.0306396484375 2 L 25.09840393066406 2 M 25.09840393066406 0 L 190.0306396484375 0 C 203.8921051025391 0 215.1290130615234 11.0137939453125 215.1290130615234 24.60000038146973 C 215.1290130615234 38.18620681762695 203.8921051025391 49.20000076293945 190.0306396484375 49.20000076293945 L 25.09840393066406 49.20000076293945 C 11.23692321777344 49.20000076293945 -1.52587890625e-05 38.18620681762695 -1.52587890625e-05 24.60000038146973 C -1.52587890625e-05 11.0137939453125 11.23692321777344 0 25.09840393066406 0 Z" stroke="none" fill="#000"/>
  169.                                     </g>
  170.                                     <text id="_Zurück" transform="translate(101.801 33.201)" font-size="27" font-family="LucidaGrande, Lucida Grande"><tspan x="-60.818" y="0">←</tspan><tspan y="0" xml:space="preserve" font-family="MuseoSans-500, Museo Sans" font-weight="500"> Zurück</tspan></text>
  171.                                 </g>
  172.                             </g>
  173.                         </g>
  174.                     </svg>
  176.                 </form>
  178.             {% endif %}
  179.         </div>
  180.     </section>
  182.     <script src="/assets/js/snippet.js"></script>
  185.     
  186.     <style>
  187.         @media (min-width: 1440px) {
  188.             .snippet-wrapper .snippet-container .images {
  189.                 width: 100%;
  190.                 max-height: none;
  191.                 overflow-x: hidden;
  192.                 overflow-y: hidden;
  193.                 scrollbar-width: auto;
  194.             }
  195.         }
  197.         @media (min-width: 1440px) {
  198.             .snippet-wrapper .snippet-container .images-container {
  199.                 height: calc(100vh - 200px);
  200.                 max-height: none;
  201.                 overflow-x: auto;
  202.                 width: 60%;
  203.             }
  204.         }
  206.         @media (min-width: 992px) {
  207.            .snippet-wrapper .snippet-container .images a .teaser {
  208.                 width: calc(50% - 10px);
  209.                 max-width: none;
  210.                 max-height: none;
  211.             }
  212.         }
  214.         .snippet-wrapper .snippet-container .images a .teaser-video img {
  215.             object-fit: contain !important;
  216.             height: 100%;
  217.             width: 100%;
  218.             display: block;
  219.         }
  221.         .video {
  222.             height: 100%;
  223.             display: flex;
  224.             align-items: center;
  225.             justify-content: center;
  226.             margin-top: 20px;
  227.         }
  229.         @media (min-width: 992px) {
  230.             .video {
  231.                 margin-top: 0;
  232.             }
  233.         }
  235.         .video video {
  236.             height: 100%;
  237.             max-height: 80%;
  238.         }
  240.         .snippet-wrapper .snippet-container .images a .teaser-video .image-container {
  241.             position: relative;
  242.         }
  244.         .snippet-wrapper .snippet-container .images a .teaser-video .image-container svg {
  245.             position: absolute;
  246.             top: 50%;
  247.             left: 50%;
  248.             z-index: 1;
  249.             width: 80px;
  250.             height: auto;
  251.             transform: translate(-50%, -50%);
  252.         }
  254.         .snippet-wrapper .snippet-container .images a .teaser-video .image-container svg path {
  255.             fill: white;
  256.         }
  258.         .snippet-wrapper .snippet-container .images .modal-image {
  259.             z-index: 2;
  260.         }
  262.         .snippet-wrapper .snippet-container .images .modal-image.active {
  263.             display: block;
  264.             right: 0vw;
  266.             position: fixed;
  267.             top: 0;
  268.             height: calc(100vh);
  269.             width: calc(100vw - 15px);
  270.             padding: 10px;
  271.         }
  273.         .snippet-wrapper .snippet-container .images .modal-image.active svg {
  274.             top: 3%;
  275.         }
  277.         .snippet-wrapper .snippet-container .images .modal-video.active svg {
  278.             top: 3%;
  279.             position: absolute;
  280.             right: 50%;
  281.             transform: translateX(50%);
  282.             cursor: pointer;
  283.         }
  285.         .snippet-wrapper .snippet-container .images a .teaser-video {
  286.             height: fit-content;
  287.             cursor: pointer;
  288.         }
  290.         @media (min-width: 992px) {
  291.             .snippet-wrapper .snippet-container .images a .teaser-video {
  292.                 width: calc(33% - 12px);
  293.                 max-width: none;
  294.                 max-height: none;
  295.             }
  296.         }
  298.         .snippet-wrapper .snippet-container .images .modal-video {
  299.             z-index: 2;
  300.         }
  302.         .snippet-wrapper .snippet-container .images .modal-video {
  303.             position: absolute;
  304.             top: 5%;
  305.             width: 99vw;
  306.             height: 95vh;
  307.             background-color: #F7F6F5;
  308.             display: none;
  309.         }
  311.         @media (min-width: 1440px) {
  312.             .snippet-wrapper .snippet-container .images .modal-video {
  313.                 right: 0vw;
  314.             }
  315.         }
  317.         .snippet-wrapper .snippet-container .images .modal-video.active {
  318.             display: block;
  319.             right: 0vw;
  320.             position: fixed;
  321.             top: 0;
  322.             height: 100vh;
  323.             width: 100vw;
  324.             padding: 10px;
  325.         }
  327.     </style>
  329. {% endblock %}