src/CoreBundle/Resources/views/Areas/Text3ColBackground/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 imageAttributes = {
  16. "attributes" : {
  17. "data-speed": "-1"
  18. }
  19. } %}
  20. {% if editmode %}
  21.     <div class="flex-col offset-bottom-single">
  22.         <div class="col xs-12 m-6 l-3">
  23.             <span class="hint">{{ 'admin.brick.hint.anchorId' |trans }}</span>
  24.             {{ pimcore_input("brickAnchorIdInput") }}
  25.         </div>
  26.         <div class="col xs-12 m-6 l-3">
  27.             <div class="select-items">
  28.                 <div class="hint">
  29.                     {{ 'admin.brick.hint.paddingTop' |trans }}
  30.                 </div>
  31.                 {{ spacingSelect }}
  32.             </div>
  33.         </div>
  34.     </div>
  35.     <div class="flex-col offset-bottom-single">
  36.         <div class="col xs-12 m-6 l-6">
  37.             <span class="hint">{{ 'admin.brick.hint.addBackgroundimage' }}</span>
  38.             {{ pimcore_image("teaserText3ColBackground", {
  39.                 "title": "Drag your image here",
  40.                 "width": 400,
  41.                 "thumbnail": "teaserText3ColBackground" ~ bundleName,
  42.                 "reload": true
  43.             }) }}
  44.         </div>
  45.     </div>
  46. {% endif %}
  47. <div id="{{ 'uid' ~ UID |raw }}" class="section">
  48.     <div class="text-image has-background-image js ">
  49.         <div class="flex-column box-center">
  50.             <div class="background-image">
  51.                 <div class="image">
  52.                     {% set teaserTextBackgroundImage = pimcore_image("teaserText3ColBackground").getThumbnail("teaserText3ColBackground" ~ bundleName) %}
  53.                     {% if teaserTextBackgroundImage is not empty %}
  54.                         {{ teaserTextBackgroundImage.getHTML(imageAttributes) |raw }}
  56.                         {#IE Fix for thumbnails rendering start#}
  57.                         <script type='text/javascript'>
  58.                             var waitForJQuery = setInterval(function () {
  59.                                 if (typeof $ != 'undefined') {
  60.                                     $(function() {
  61.                                         if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ){
  63.                                             $(".text-image.has-background-image .background-image .image").css({
  64.                                                 position: "absolute",
  65.                                                 width: "100%",
  66.                                                 height: "100%",
  67.                                                 background: "url( {{ pimcore_image("teaserSpecificBackground").getSrc() }} ) center right 100%/cover no-repeat"
  68.                                             });
  69.                                             $(".text-image.has-background-image .background-image img").hide();
  70.                                         }
  71.                                     });
  72.                                     clearInterval(waitForJQuery);
  73.                                 }
  74.                             }, 50);
  75.                         </script>
  76.                         {#IE Fix for thumbnails rendering end#}
  78.                     {% endif %}
  79.                 </div>
  80.             </div>
  81.             <div class="content-container">
  82.                 <div class="main-content flex-col box-center box-align-center text-center offset">
  83.                     <div class="col xs-12 m-10">
  84.                         <div class="text-only">
  85.                             <div class="headline">
  86.                                 <h2>{{ pimcore_input("teaserText3ColBackgroundHeadline", {
  87.                                         "placeholder": 'Headline'
  88.                                     })|trademark }}
  89.                                 </h2>
  90.                             </div>
  91.                         </div>
  92.                     </div>
  93.                     <div class="xs-12 flex-col box-center content-image">
  94.                         <div class="col xs-12 s-6 l-3 flex-column box-center box-align-center">
  95.                             <div class="image">
  96.                                 {{ pimcore_image("teaserText3ColSublineIcon1", {
  97.                                     "title": "Drag your image here",
  98.                                     "width": 50,
  99.                                     "height": 60,
  100.                                     "thumbnail": "teaserText3ColSublineIcon1" ~ bundleName,
  101.                                     "reload": true
  102.                                 }) }}
  103.                             </div>
  104.                             <div class="text-only">
  105.                                 <h4>{{ pimcore_input("teaserText3ColBackgroundHeadlinePart1") }}</h4>
  106.                             </div>
  107.                         </div>
  108.                         <div class="col xs-12 s-6 l-3 flex-column box-center box-align-center">
  109.                             <div class="image">
  110.                                 {{ pimcore_image("teaserText3ColSublineIcon2", {
  111.                                     "title": "Drag your image here",
  112.                                     "width": 50,
  113.                                     "height": 60,
  114.                                     "thumbnail": "teaserText3ColSublineIcon2" ~ bundleName,
  115.                                     "reload": true
  116.                                 }) }}
  117.                             </div>
  118.                             <div class="text-only">
  119.                                 <h4>{{ pimcore_input("teaserText3ColBackgroundHeadlinePart2") }}</h4>
  120.                             </div>
  121.                         </div>
  122.                         <div class="col xs-12 s-6 l-3 flex-column box-center box-align-center">
  123.                             <div class="image">
  124.                                 {{ pimcore_image("teaserText3ColSublineIcon3", {
  125.                                     "title": "Drag your image here",
  126.                                     "width": 50,
  127.                                     "height": 60,
  128.                                     "thumbnail": "teaserText3ColSublineIcon3" ~ bundleName,
  129.                                     "reload": true
  130.                                 }) }}
  131.                             </div>
  132.                             <div class="text-only">
  133.                                 <h4>{{ pimcore_input("teaserText3ColBackgroundHeadlinePart3")|trademark }}</h4>
  134.                             </div>
  135.                         </div>
  136.                     </div>
  137.                 </div>
  138.             </div>
  139.         </div>
  140.     </div>
  141. </div>