src/CoreBundle/Resources/views/Areas/MagazinTeaser/view.html.twig line 1

Open in your IDE?
  1. {% set spacingSelect %}
  2.     {{ pimcore_checkbox("checkSpacing", {
  3.         "reload": true
  4.     }) }}
  5. {% endset %}
  6. {% if pimcore_checkbox('checkSpacing').isChecked() %}
  7.     {% set noSpacingTop = 'no-offset-top' %}
  8. {% endif %}
  9. {% set UID = uniqid() %}
  10. {% if pimcore_input("brickAnchorIdInput") is not empty %}
  11.     {% set brickAnchorId = pimcore_input("brickAnchorIdInput")|lowercase %}
  12. {% endif %}
  13. {% set hasSliderSelect %}
  14.     {{ pimcore_select("hasSlider", {
  15.         "store": [
  16.         ["has-slider", "Slider"],
  17.         ["no-slider", "Listenansicht"]
  18.         ], reload: true
  19.     }) }}
  20. {% endset %}
  21. {% set colSelect %}
  22.     {{ pimcore_select("cols", {
  23.         "store": [
  24.         ["xs-12 full", "1"],
  25.         ["xs-12 m-6 half", "2"],
  26.         ["xs-12 m-6 l-4 one-third", "3"]
  27.         ], reload: true
  28.     }) }}
  29. {% endset %}
  30. {% set colsSelectResult = pimcore_select("cols").getData() %}
  31. {% if editmode %}
  32.     <div class="flex-col offset-bottom-single">
  33.         <div class="col xs-12 m-6 l-3">
  34.             <span class="hint">{{ 'ID für Anchorlinks vergeben' |trans }}</span>
  35.             {{ pimcore_input("brickAnchorIdInput") }}
  36.         </div>
  37.         <div class="col xs-12 m-6 l-3">
  38.             <div class="select-items">
  39.                 <div class="hint">
  40.                     {{ 'Kein Abstand nach oben?' |trans }}
  41.                 </div>
  42.                 {{ spacingSelect }}
  43.             </div>
  44.         </div>
  45.     </div>
  46.     <div class="flex-col offset-bottom-single">
  47.         <div class="col xs-12 m-6 l-3">
  48.             <span class="hint">{{ 'Teaser Content Breite:' |trans }}</span>
  49.             {{ colSelect }}
  50.         </div>
  51.         <div class="col xs-12 m-6 l-3">
  52.             <span class="hint">{{ ' Darstellungsart:' |trans }}</span>
  53.             {{ hasSliderSelect }}
  54.         </div>
  55.     </div>
  56. {% endif %}
  57. {% if editmode %}
  58. <div class="admin teaser-panel-row">
  59.     {% endif %}
  60.         <div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}">
  61.             <div class=" panel {% if editmode %} {% else %}{{ pimcore_select("hasSlider").getData() }} {% endif %}{% if colsSelectResult == 'xs-12 m-6 half' %}half{% elseif colsSelectResult == 'xs-12 full' %}full{% else %}one-third{% endif %} magazine">
  62.                 <div class="main-content">
  63.                     <div class="panel-container">
  64.                         <div class="panel-content">
  65.                             <div class="flex-col panel-slider panel-slider_slider-content">
  66.                                 {% for i in pimcore_iterate_block(pimcore_block('contentblock')) %}
  67.                                     <div class="col {{ colsSelectResult }}">
  68.                                         {% if editmode %}
  69.                                             <span class="hint">
  70.                                                 {{ 'Bitte wählen Sie ein Magazin oder Rezept'|trans }}</span>
  71.                                             {{ pimcore_href("selectDoc", {
  72.                                                 "types": ["object"],
  73.                                                 "reload": true
  74.                                             }) }}
  75.                                         {% endif %}
  76.                                         {% set articleObject = null %}
  77.                                         {% if pimcore_href("selectDoc").isEmpty() != true %}
  78.                                             {% set articleObject = pimcore_href("selectDoc").getElement() %}
  79.                                             {% set articleImage = articleObject.headerImage() %}
  80.                                             {% set articleCategory = articleObject.classname %}
  81.                                         {% endif %}
  82.                                         {% if articleObject is defined and articleObject is not null %}
  83.                                             {% if articleObject.classname == "Recipe" %}
  84.                                                 {% set detailViewUri    = pimcore_url(
  85.                                                 {
  86.                                                 "name": articleObject.getUrlTitle()|sanitized_url,
  87.                                                 "rezeptid": articleObject.getId()
  88.                                                 },
  89.                                                 "recipeDetail"
  90.                                                 ) %}
  91.                                             {% else %}
  92.                                                 {% set detailViewUri    = pimcore_url(
  93.                                                 {
  94.                                                 "language": document.getProperty("language"),
  95.                                                 "name": articleObject.key|sanitized_url,
  96.                                                 "magazineid": articleObject.getId()
  97.                                                 },
  98.                                                 "magazineDetailMautner"
  99.                                                 ) %}
  100.                                             {% endif %}
  101.                                             <div class="teaser magazine">
  102.                                                 <div class="teaser-content-container">
  103.                                                     <div class="teaser-image-box">
  104.                                                         <a href="{{ detailViewUri }}">
  105.                                                             <div class="teaser-image">
  106.                                                                 {% if colsSelectResult == 'xs-12 full' %}
  107.                                                                 <div  data-image='{{ articleImage.getThumbnail("teaserMagazineImageFull" ~ bundleName).getPath() }}' class="one">
  108.                                                                     {{ articleImage.getThumbnail("teaserMagazineImageFull" ~ bundleName).getHtml() |raw }}
  109.                                                                 </div>
  110.                                                                 {% elseif colsSelectResult == 'xs-12 m-6 half' %}
  111.                                                                   <div  data-image='{{ articleImage.getThumbnail("teaserMagazineImageHalf" ~ bundleName).getPath() }}' class="two">
  112.                                                                     {{ articleImage.getThumbnail("teaserMagazineImageHalf" ~ bundleName).getHtml() |raw }}
  113.                                                                   </div>
  114.                                                                 {% elseif colsSelectResult == 'xs-12 m-6 l-4 one-third' %}
  115.                                                                   <div  data-image='{{ articleImage.getThumbnail("teaserMagazineImage" ~ bundleName).getPath() }}' class="three">
  116.                                                                         {{ articleImage.getThumbnail("teaserMagazineImage" ~ bundleName).getHtml() |raw }}
  117.                                                                   </div>
  118.                                                                 {% endif %}
  119.                                                                 {% if articleObject.className == "Magazine" %}
  120.                                                                     <div class="teaser-date">
  121.                                                                         <span> {{ articleObject.getDate().format('d.m.Y') }}</span>
  122.                                                                     </div>
  123.                                                                 {% endif %}
  124.                                                             </div>
  125.                                                         </a>
  126.                                                     </div>
  127.                                                     <div class="teaser-content-box">
  128.                                                         <a href="{{ detailViewUri }}">
  129.                                                             <div class="teaser-content">
  130.                                                                 <div class="teaser-title">
  131.                                                                     <span class="teaser-subline">{{ articleCategory |trans }}</span>
  132.                                                                     <h4>
  133.                                                                         {{ articleObject.getTitle()|trademark }}
  134.                                                                     </h4>
  135.                                                                 </div>
  136.                                                                 <div class="teaser-text">
  137.                                                                     <p>
  138.                                                                         {{ articleObject.getTeaserText()|trademark }}
  139.                                                                     </p>
  140.                                                                 </div>
  141.                                                                 <div class="teaser-link">
  142.                                                                     <span class="link">{{ 'Mehr lesen' |trans }}</span>
  143.                                                                 </div>
  144.                                                                 {% if articleObject.className == 'Recipe' %}
  145.                                                                     <div class="teaser-icons">
  146.                                                                         <div class="items">
  147.                                                                             <span class="icon time"></span>
  148.                                                                             <span class="uppercase">{{ articleObject.getDuration() |trans }}</span>
  149.                                                                         </div>
  150.                                                                         <div class="items">
  151.                                                                             <span class="icon toque"></span>
  152.                                                                             <span class="uppercase">{{ articleObject.getLevel() |trans }}</span>
  153.                                                                         </div>
  154.                                                                         <div class="items">
  155.                                                                             <span class="icon cutlery"></span>
  156.                                                                             <span class="uppercase">{{ 'Serves' |trans }} {{ articleObject.getServes() |trans }}</span>
  157.                                                                         </div>
  158.                                                                     </div>
  159.                                                                 {% endif %}
  160.                                                             </div>
  161.                                                         </a>
  162.                                                     </div>
  163.                                                 </div>
  164.                                             </div>
  165.                                         {% endif %}
  166.                                     </div>
  167.                                 {% endfor %}
  168.                             </div>
  169.                         </div>
  170.                     </div>
  171.                 </div>
  172.             </div>
  173.         </div>
  174.         {#IE Fix for thumbnails rendering start#}
  175.         <script type='text/javascript'>
  176.             var waitForJQuery = setInterval(function () {
  177.                 if (typeof $ != 'undefined') {
  178.                     $(function() {
  179.                       if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ) {
  180.                         $(".magazine .teaser-image-box .teaser-image .one").each(function(){
  181.                                 var image1 = $(this).attr('data-image');
  182.                                 $(this).parent().css({
  183.                                     height: "100%",
  184.                                     background: "url(" + image1 + ") center right 100%/cover no-repeat"
  185.                                 });
  186.                           });
  187.                         $(".magazine .teaser-image-box .teaser-image .two").each(function(){
  188.                             var image2 = $(this).attr('data-image');
  189.                             $(this).parent().css({
  190.                                 height: "100%",
  191.                                 background: "url(" + image2 + ") center right 100%/cover no-repeat"
  192.                             });
  193.                         });
  194.                         $(".magazine .teaser-image-box .teaser-image .three").each(function(){
  195.                             var image3 = $(this).attr('data-image');
  196.                             $(this).parent().css({
  197.                                 height: "100%",
  198.                                 background: "url(" + image3 + ") center right 100%/cover no-repeat"
  199.                             });
  200.                         });
  201.                         $(".magazine .teaser-image-box .teaser-image img").css({
  202.                             opacity: "0"
  203.                         });
  204.                       }
  205.                     });
  206.                     clearInterval(waitForJQuery);
  207.                 }
  208.             }, 50);
  209.         </script>
  210.         {#IE Fix for thumbnails rendering end#}
  211.         {% if editmode %}
  212.     </div>
  213.     {% endif %}