templates/areas/icon-writeup/view.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  2. <div class="settings">
  3.     <div class="position-relative settings-button-border">
  4.         <strong class="settings-header">Settings</strong><button class="toggle-settings"><i class="fa fa-plus"></i></button>
  5.         <div class="settings_container">
  6.             <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  7.                 <div>Layout</div>
  8.                 <div>
  9.                     {{
  10.                     pimcore_select("layout", {
  11.                         store: [
  12.                         ["flex", "Flex"],
  13.                         ["stacked", "Stacked"]
  14.                         ]
  15.                     })
  16.                     }}
  17.                 </div>
  18.             </div>
  19.             <div class="row middle-lg middle-md middle-sm" style="gap: 10px">
  20.                 <div>Columns</div>
  21.                 <div>
  22.                     {{
  23.                     pimcore_select("columns", {
  24.                         store: [
  25.                         ["1", "1"],
  26.                         ["2", "2"],
  27.                         ["3", "3"]
  28.                         ]
  29.                     })
  30.                     }}
  31.                 </div>
  32.             </div>
  33.         </div>
  34.         <div style="position: absolute; top: 10px; right: 0; font-weight: bold; text-transform: uppercase;">
  35.             Icon Writeup
  36.         </div>
  37.     </div>
  38. </div>
  39. {% endif %}
  41. {% set layout = pimcore_select("layout").getData() == 'flex' ? ' class=display-flex' : '' %}
  42. {% set columns = pimcore_select("columns").getData() == 2 ? ' two-col' : pimcore_select("columns").getData() == 3 ? ' three-col' : '' %}
  44. <div{{ layout }} style="margin-bottom: -3em;">
  45.     
  46.     {% for i in pimcore_block('iconWriteupBlock', {'limit': 4}).iterator %}
  47.     <div class="stylized-header{{ columns }}">
  48.         
  49.         {% if not pimcore_image("iconIcon").isEmpty() %}
  50.         <div class="icon-container">
  51.         {% endif %}
  53.             {% if editmode %}
  54.             {{
  55.                 pimcore_image("iconIcon", {
  56.                 title: "Drag your image here, SVG preferred for color matching of site.",
  57.                 width: 50,
  58.                 height: 50
  59.                 })
  60.             }}
  61.             {% else %} 
  62.             {% if pimcore_image("iconIcon").getName()|split('.')|last == 'svg' %}
  63.             {{ pimcore_image("iconIcon") }}
  64.             {% else %}
  65.             {{ pimcore_image("iconIcon", {
  66.                 "thumbnail": {
  67.                 "width": 200,
  68.                 "height": 200,
  69.                 "interlace": true,
  70.                 "quality": 90
  71.                 }
  72.             }) }}
  73.             {% endif %}
  74.             {% endif %}
  76.         {% if not pimcore_image("iconIcon").isEmpty() %}
  77.         </div>
  78.         {% endif %}
  80.         <p class="text--lg text-align-center font-weight-bold">
  81.             {{ pimcore_input("iconStrongText", { placeholder: "Icon Info" })|raw }}
  82.         </p>
  84.     </div>
  85.     {% endfor %}
  87. </div>