src/Develey/LoewensenfBundle/Resources/views/Areas/TeaserInterstitial/view.html.twig line 1

Open in your IDE?
  1. {% set productLink = pimcore_href("selectProduct").getElement() %}
  2. {% set spacingSelect %}
  3.     {{ pimcore_checkbox("checkSpacing", {
  4.         "reload": true
  5.     }) }}
  6. {% endset %}
  7. {% set noSpacingTop = '' %}
  8. {% set brickAnchorId = '' %}
  9. {% if pimcore_checkbox('checkSpacing').isChecked() %}
  10.     {% set noSpacingTop = 'no-offset-top' %}
  11. {% endif %}
  12. {% set UID = uniqid() %}
  13. {% if pimcore_input("brickAnchorIdInput") is not empty %}
  14.     {% set brickAnchorId = pimcore_input("brickAnchorIdInput")|lowercase %}
  15. {% endif %}
  16. {% if editmode %}
  17.     <div class="flex-col offset-bottom-single">
  18.         <div class="col xs-12 m-6 l-3">
  19.             <span class="hint">{{ 'ID für Anchorlinks vergeben' |trans }}</span>
  20.             {{ pimcore_input("brickAnchorIdInput") }}
  21.         </div>
  22.         <div class="col xs-12 m-6 l-2">
  23.             <div class="select-items">
  24.                 <div class="hint">
  25.                     {{ 'Kein Abstand nach oben?' |trans }}
  26.                 </div>
  27.                 {{ spacingSelect }}
  28.             </div>
  29.         </div>
  30.     </div>
  31.     <div class="flex-col offset-bottom-single">
  32.         <div class="col xs-12 m-6">
  33.             <span class="hint">
  34.                 {{ 'Verlinkung zu bestehendem Produkt?'|trans }}</span>
  35.             {{ pimcore_href("selectProduct", {
  36.                 "types": ["object"],
  37.                 "subtypes": {
  38.                     "types": ["object"],
  39.                 },
  40.                 "width": 300,
  41.                 "reload": true
  42.             }) }}
  43.         </div>
  44.         <div class="col xs-12 m-6">
  45.             <div class="input-space">
  46.                 <span class="hint">{{ 'Hintergrundbild festlegen' |trans }}</span>
  47.                 {{ pimcore_image("teaserInterstitialImage", {
  48.                     "title": "Drag your image here",
  49.                     "width": 300,
  50.                     "height": 150,
  51.                     "thumbnail": "teaserInterstitialImage" ~ bundleName,
  52.                     "reload": true
  53.                 }) }}
  54.             </div>
  55.         </div>
  56.     </div>
  57. {% endif %}
  58. {% set imageAttributes = {
  59.     "attributes" : {
  60.         "data-speed": "-1"
  61.     }
  62. } %}
  63. {% if productLink == true %}
  64.     {% set detailViewUri    = pimcore_url(
  65.     {
  66.     "name": productLink.getName()|sanitized_url,
  67.     "articlenumber": productLink.getArticleNumber()
  68.     },
  69.     "shopHandlerProductDetail"
  70.     ) %}
  71. {% endif %}
  72. <div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}">
  73.     <div id="{{ 'uid' ~ UID |raw }}"
  74.          class="teaser-interstitial {% if pimcore_image("teaserInterstitialSmallImage") and pimcore_link('productLink') is not empty %}with-image-absolute{% endif %} has-background-image js">
  75.         <div class="background-image">
  76.             {% if pimcore_image("teaserInterstitialImage").getThumbnail("teaserInterstitialImage" ~ bundleName) is not empty %}
  77.                 <div class="image">
  78.                     {{ pimcore_image("teaserInterstitialImage").getThumbnail("teaserInterstitialImage" ~ bundleName).getHTML(imageAttributes) |raw }}
  79.                 </div>
  81.                 {#IE Fix for thumbnails rendering start#}
  82.                 <script type='text/javascript'>
  83.                     var waitForJQuery = setInterval(function () {
  84.                         if (typeof $ != 'undefined') {
  85.                             $(function() {
  86.                                 if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ){
  88.                                     $(".teaser-interstitial .background-image .image").css({
  89.                                         position: "absolute",
  90.                                         width: "100%",
  91.                                         height: "100%",
  92.                                         background: "url( {{ pimcore_image("teaserInterstitialImage").getSrc() }} ) center right 100%/cover no-repeat"
  93.                                     });
  94.                                     $(".teaser-interstitial .background-image .image img").hide();
  95.                                 }
  96.                             });
  97.                             clearInterval(waitForJQuery);
  98.                         }
  99.                     }, 50);
  100.                 </script>
  101.                 {#IE Fix for thumbnails rendering end#}
  103.             {% endif %}
  104.         </div>
  105.         <div class="content-container flex-col">
  106.             <div class="col teaser-interstitial-content main-content flex-col">
  107.                 <div class="headline-container">
  108.                     <div class="text-only">
  109.                         <div class="headline {% if pimcore_image("teaserInterstitialSmallImage") and pimcore_link('productLink') is empty %} text-center {% endif %}">
  110.                             {{ pimcore_wysiwyg("teaserInterstitialHeadline", {'placeholder': 'Headline'})|trademark }}
  112.                         </div>
  113.                     </div>
  114.                 </div>
  115.                 {% if pimcore_image("teaserInterstitialSmallImage") is not empty %}
  116.                     <div class="image-container">
  117.                         <div class="image-absolute">
  118.                             <div class="flex-column box-align-center">
  119.                                 {{ pimcore_image("teaserInterstitialSmallImage", {
  120.                                     "title": "Drag your image here",
  121.                                     "thumbnail": "teaserInterstitialSmallImage" ~ bundleName,
  122.                                     "reload": true
  123.                                 }) }}
  124.                             </div>
  125.                         </div>
  126.                     </div>
  127.                 {% endif %}
  128.                 {% if pimcore_link("productLink") is not empty %}
  129.                     <div class="button-container text-only">
  130.                         {% if productLink == true %}
  131.                             <a class="button btn-default btn-pull-right" href="{{ detailViewUri }}" target="{{ pimcore_link("productLink").getTarget() }}">{{ 'Zum Produkt' |trans }}</a>
  132.                         {% else %}
  133.                             {{ pimcore_link('productLink', {'class': "button btn-default"}) }}
  134.                         {% endif %}
  135.                     </div>
  136.                 {% endif %}
  137.             </div>
  138.         </div>
  139.     </div>
  140. </div>