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

Open in your IDE?
  1. {% set spacingSelect %}
  2.     {{ pimcore_checkbox("checkSpacing", {
  3.         "reload": true
  4.     }) }}
  5. {% endset %}
  6. {% set noSpacingTop = '' %}
  7. {% set brickAnchorId = '' %}
  8. {% if pimcore_checkbox('checkSpacing').isChecked() %}
  9.     {% set noSpacingTop = 'no-offset-top' %}
  10. {% endif %}
  11. {% set UID = uniqid() %}
  12. {% if pimcore_input("brickAnchorIdInput") is not empty %}
  13.     {% set brickAnchorId = pimcore_input("brickAnchorIdInput")|lowercase %}
  14. {% endif %}
  15. {% set productLink = pimcore_href("selectProduct").getElement() %}
  16. {% set UID = uniqid() %}
  17.     {% if editmode %}
  18.         <div class="flex-col offset-bottom-single">
  19.             <div class="col xs-12 m-6 l-3">
  20.                 <span class="hint">{{ 'ID für Anchorlinks vergeben' |trans }}</span>
  21.                 {{ pimcore_input("brickAnchorIdInput") }}
  22.             </div>
  23.             <div class="col xs-12 m-6 l-2">
  24.                 <div class="select-items">
  25.                     <div class="hint">
  26.                         {{ 'Kein Abstand nach oben?' |trans }}
  27.                     </div>
  28.                     {{ spacingSelect }}
  29.                 </div>
  30.             </div>
  31.         </div>
  32.         <div class="flex-col offset-bottom-single">
  33.             <div class="col xs-12 m-4 l-3">
  34.                 <span class="hint">{{ 'Verlinkung zu bestehendem Produkt?'|trans }}</span>
  35.                 {{ pimcore_href("selectProduct", {
  36.                     "types": ["object"],
  37.                     "subtypes": {
  38.                         "types": ["object"],
  39.                     },
  40.                     "width": 300,
  41.                     "classes": ["ProductFood", "ProductClothing", "Product"],
  42.                     "reload": true
  43.                 }) }}
  44.             </div>
  45.             <div class="col xs-12 m-4 l-3">
  46.                 {% if pimcore_select("headlineType").isEmpty() %}
  47.                     {% do pimcore_select("headlineType").setDataFromResource("h2") %}
  48.                 {% endif %}
  49.                 <span class="hint">{{ 'Headline Typ wählen' |trans }}</span>
  50.                 {{ pimcore_select("headlineType", {
  51.                     "store": [
  52.                     ["h2", "Überschrift h2"],
  53.                     ["h3", "Überschrift h3"],
  54.                     ["h4", "Überschrift h4"]
  55.                     ],
  56.                     "width": 300,
  57.                     "reload": true
  58.                 }) }}
  59.             </div>
  60.             <div class="col xs-12 m-4 l-3">
  61.                 <span class="hint">{{ 'Hintergrundbild festlegen' |trans }}</span>
  62.                 {{ pimcore_image("teaserTextBackground", {
  63.                     "title": "Drag your image here",
  64.                     "width": 300,
  65.                     "height": 150,
  66.                     "thumbnail": "textBackgroundImage" ~ bundleName,
  67.                     "reload": true
  68.                 }) }}
  69.             </div>
  70.         </div>
  71.     {% endif %}
  72.     {% set imageAttributes = {
  73.     "attributes" : {
  74.     "data-speed": "-1"
  75.     }
  76.     } %}
  77.     {% if productLink == true %}
  78.         {% set detailViewUri    = pimcore_url(
  79.         {
  80.         "name": productLink.getName()|sanitized_url,
  81.         "articlenumber": productLink.getArticleNumber()
  82.         },
  83.         "shopHandlerProductDetail"
  84.         ) %}
  85.     {% endif %}
  86.     {% if pimcore_image("teaserTextBackground") is not empty %}
  87.     <div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}">
  88.         <div id="{{ 'uid' ~ UID |raw }}" class="text-background has-background-image js">
  89.             <div class="background-image">
  90.                 <div class="image">
  91.                     {% if pimcore_image("teaserTextBackground").getThumbnail("textBackgroundImage" ~ bundleName) is not empty %}
  92.                         {{ pimcore_image("teaserTextBackground").getThumbnail("textBackgroundImage" ~ bundleName).getHTML(imageAttributes) |raw }}
  94.                         {#IE Fix for thumbnails rendering start#}
  95.                         <script type='text/javascript'>
  96.                             var waitForJQuery = setInterval(function () {
  97.                                 if (typeof $ != 'undefined') {
  98.                                     $(function() {
  99.                                         if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ){
  101.                                             $(".text-background.has-background-image").css({
  102.                                                 position: "absolute",
  103.                                                 width: "100%",
  104.                                                 height: "100%",
  105.                                                 background: "url( {{ pimcore_image("teaserTextBackground").getSrc() }} ) center right 100%/cover no-repeat"
  106.                                             });
  107.                                             $(".text-background.has-background-image img").hide();
  108.                                         }
  109.                                     });
  110.                                     clearInterval(waitForJQuery);
  111.                                 }
  112.                             }, 50);
  113.                         </script>
  114.                         {#IE Fix for thumbnails rendering end#}
  116.                     {% endif %}
  117.                 </div>
  118.             </div>
  119.             <div class="content-container">
  120.                 <div class="main-content flex-col">
  121.                     <div class="col xs-12">
  122.                         <div class="text-only">
  123.                             <div class="headline">
  124.                                 <{{ pimcore_select("headlineType").getData() }}
  125.                                 >{{ pimcore_input("teaserTextBackgroundHeadline", {
  126.                                     "placeholder": 'Headline'
  127.                                 }) }}</{{ pimcore_select("headlineType").getData() }}>
  128.                             <div class="text">
  129.                                 {{ pimcore_wysiwyg("TeaserImageWYSIWYG", {
  130.                                     "placeholder": 'Text',
  131.                                     "customConfig": 'bundles/core/js/ckeditor_config.js'
  132.                                 }) }}
  133.                                 {% if pimcore_href("selectProduct").isEmpty() != true %}
  134.                                     <a class="button btn-default" href="{{ detailViewUri }}">{{ 'Zum Produkt' |trans }}</a>
  135.                                 {% else %}
  136.                                     {{ pimcore_link('productLink', {'class': "button btn-default"}) }}
  137.                                 {% endif %}
  138.                             </div>
  139.                         </div>
  140.                     </div>
  141.                 </div>
  142.             </div>
  143.         </div>
  144.     {% else %}
  145.         <div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}">
  146.             <div class="text-background has-background">
  147.                 <div class="main-content flex-col">
  148.                     <div class="col xs-12">
  149.                         <div class="text-only">
  150.                             <div class="headline">
  151.                                 <{{ pimcore_select("headlineType") }}
  152.                                 >{{ pimcore_input("teaserTextBackgroundHeadline")|trademark }}</{{ pimcore_select("headlineType") }}>
  153.                         </div>
  154.                         <div class="text">
  155.                             {{ pimcore_wysiwyg("TeaserImageWYSIWYG", {
  156.                                 "customConfig": '/bundles/core/js/ckeditor_config.js'
  157.                             })|trademark }}
  158.                             {% if pimcore_href("selectProduct").isEmpty() != true %}
  159.                                 <a class="button btn-default" href="{{ detailViewUri }}">{{ 'Zum Produkt' |trans }}</a>
  160.                             {% else %}
  161.                                 {{ pimcore_link('productLink', {'class': "button btn-default"}) }}
  162.                             {% endif %}
  163.                         </div>
  164.                     </div>
  165.                 </div>
  166.             </div>
  167.         </div>
  168.         </div>
  169.     {% endif %}
  170.     {% if pimcore_image("teaserTextBackground") is not empty %}
  171. </div>
  172.         </div>
  173.     {% endif %}