src/Develey/MautnerTonicBundle/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.                 {% if pimcore_select("headlineType").isEmpty() %}
  35.                     {% do pimcore_select("headlineType").setDataFromResource("h2") %}
  36.                 {% endif %}
  37.                 <span class="hint">{{ 'Headline Typ wählen' |trans }}</span>
  38.                 {{ pimcore_select("headlineType", {
  39.                     "store": [
  40.                     ["h2", "Überschrift h2"],
  41.                     ["h3", "Überschrift h3"],
  42.                     ["h4", "Überschrift h4"]
  43.                     ],
  44.                     "width": 300,
  45.                     "reload": true
  46.                 }) }}
  47.             </div>
  48.             <div class="col xs-12 m-4 l-3">
  49.                 <span class="hint">{{ 'Hintergrundbild festlegen' |trans }}</span>
  50.                 {{ pimcore_image("teaserTextBackground", {
  51.                     "title": "Drag your image here",
  52.                     "width": 300,
  53.                     "height": 150,
  54.                     "thumbnail": "textBackgroundImage" ~ bundleName,
  55.                     "reload": true
  56.                 }) }}
  57.             </div>
  58.         </div>
  59.     {% endif %}
  60.     {% set imageAttributes = {
  61.     "attributes" : {
  62.     "data-speed": "-1"
  63.     }
  64.     } %}
  65.     {% if productLink == true %}
  66.         {% set detailViewUri    = pimcore_url(
  67.         {
  68.         "name": productLink.getName()|sanitized_url,
  69.         "articlenumber": productLink.getArticleNumber()
  70.         },
  71.         "shopHandlerProductDetail"
  72.         ) %}
  73.     {% endif %}
  74.     {% if pimcore_image("teaserTextBackground") is not empty %}
  75.     <div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}">
  76.         <div id="{{ 'uid' ~ UID |raw }}" class="text-background has-background-image js">
  77.             <div class="background-image">
  78.                 <div class="image">
  79.                     {% if pimcore_image("teaserTextBackground").getThumbnail("textBackgroundImage" ~ bundleName) is not empty %}
  80.                         {{ pimcore_image("teaserTextBackground").getThumbnail("textBackgroundImage" ~ bundleName).getHTML(imageAttributes) |raw }}
  82.                         {#IE Fix for thumbnails rendering start#}
  83.                         <script type='text/javascript'>
  84.                             var waitForJQuery = setInterval(function () {
  85.                                 if (typeof $ != 'undefined') {
  86.                                     $(function() {
  87.                                         if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ){
  89.                                             $(".text-background.has-background-image").css({
  90.                                                 position: "absolute",
  91.                                                 width: "100%",
  92.                                                 height: "100%",
  93.                                                 background: "url( {{ pimcore_image("teaserTextBackground").getSrc() }} ) center right 100%/cover no-repeat"
  94.                                             });
  95.                                             $(".text-background.has-background-image img").hide();
  96.                                         }
  97.                                     });
  98.                                     clearInterval(waitForJQuery);
  99.                                 }
  100.                             }, 50);
  101.                         </script>
  102.                         {#IE Fix for thumbnails rendering end#}
  104.                     {% endif %}
  105.                 </div>
  106.             </div>
  107.             <div class="content-container">
  108.                 <div class="flex-col">
  109.                     <div class="col xs-12">
  110.                         <div class="text-only">
  111.                             <div class="headline">
  112.                                 <{{ pimcore_select("headlineType").getData() }}
  113.                                 >{{ pimcore_input("teaserTextBackgroundHeadline", {
  114.                                     "placeholder": 'Headline'
  115.                                 }) }}</{{ pimcore_select("headlineType").getData() }}>
  116.                             <div class="text">
  117.                                 {{ pimcore_wysiwyg("TeaserImageWYSIWYG", {
  118.                                     "placeholder": 'Text',
  119.                                     "customConfig": 'bundles/core/js/ckeditor_config.js'
  120.                                 }) }}
  121.                             </div>
  122.                             <div class="image">
  124.                                 {{ pimcore_image("teaserTextTextIcon", {
  125.                                     "title": "Drag your image here",
  126.                                     "width": 70,
  127.                                     "height": 70,
  128.                                     "thumbnail": "teaserTextTextIcon" ~ bundleName,
  129.                                     "reload": true
  130.                                 }) }}
  132.                             </div>
  133.                         </div>
  134.                     </div>
  135.                 </div>
  136.             </div>
  137.         </div>
  138.     {% else %}
  139.         <div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}">
  140.             <div class="text-background has-background">
  141.                 <div class="flex-col">
  142.                     <div class="col xs-12">
  143.                         <div class="text-only">
  144.                             <div class="headline">
  145.                                 <{{ pimcore_select("headlineType") }}
  146.                                 >{{ pimcore_input("teaserTextBackgroundHeadline")|trademark }}</{{ pimcore_select("headlineType") }}>
  147.                         </div>
  148.                         <div class="text">
  149.                             {{ pimcore_wysiwyg("TeaserImageWYSIWYG", {
  150.                                 "customConfig": '/bundles/core/js/ckeditor_config.js'
  151.                             })|trademark }}
  152.                             {% if pimcore_href("selectProduct").isEmpty() != true %}
  153.                                 <a class="button btn-default" href="{{ detailViewUri }}">{{ 'Zum Produkt' |trans }}</a>
  154.                             {% else %}
  155.                                 {{ pimcore_link('productLink', {'class': "button btn-default"}) }}
  156.                             {% endif %}
  157.                         </div>
  158.                     </div>
  159.                 </div>
  160.             </div>
  161.         </div>
  162.         </div>
  163.     {% endif %}
  164.     {% if pimcore_image("teaserTextBackground") is not empty %}
  165. </div>
  166.         </div>
  167.     {% endif %}