templates/areas/image/view.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  2. <div class="settings">
  3.   <strong class="settings-header">Image Settings</strong><button class="toggle-settings"><i class="fa fa-plus"></i></button>
  4.   <div class="settings_container">
  5.     <div class="row flex-flow-col no-border-or-padding middle-lg">
  6.       <div class="col-lg-4">Thumbnail Type</div>
  7.       <div class="col-lg-7">
  8.         {{
  9.           pimcore_select("thumbnailType", {
  10.             store: [
  11.               ["width_500", "500 Width"],
  12.               ["square_crop", "Square Crop"],
  13.               ["square_80px", "Square 80px"],
  14.               ["circle_crop", "Circle Crop"]
  15.             ]
  16.           })
  17.         }}
  18.       </div>
  19.     </div>
  20.     <div class="row flex-flow-col no-border-or-padding middle-lg">
  21.       <div class="col-lg-4">Image Alignment</div>
  22.       <div class="col-lg-7">
  23.         {{
  24.           pimcore_select("imageAligment", {
  25.             store: [
  26.               ["left", "Left"],
  27.               ["center", "Center"],
  28.               ["right", "Right"]
  29.             ]
  30.           })
  31.         }}
  32.       </div>
  33.     </div>
  34.     <div class="row flex-flow-col no-border-or-padding middle-lg">
  35.       <div class="col-lg-4">Image Max Width</div>
  36.       <div class="col-lg-7">
  37.         {{ pimcore_numeric("imageMaxWidth") }}
  38.       </div>
  39.     </div>
  40.     <div class="row flex-flow-col">
  41.       <div class="col-lg-4">Padding</div>
  42.       <div class="col-lg-7">
  43.         {{ pimcore_numeric("imagePadding") }}
  44.       </div>
  45.     </div>
  46.     <div class="row flex-flow-col">
  47.       <div class="col-lg-4">Circle image?</div>
  48.       <div class="col-lg-7">
  49.         {{ pimcore_checkbox("circleImage") }}
  50.       </div>
  51.     </div>
  52.     <div class="row flex-flow-col">
  53.       <div class="col-lg-4">Overlay</div>
  54.       <div class="col-lg-7">
  55.         {{ pimcore_select("imageOverlay", {
  56.           store: [
  57.             ["dark", "Dark"],
  58.             ["light", "Light"],
  59.             ["red", "Red"]
  60.           ]
  61.         }) }}
  62.       </div>
  63.     </div>
  64.   </div>
  65. </div>
  66. {% endif %} 
  67. {% set imageOverlay = pimcore_select("imageOverlay").getData() ? ' image-overlay' : '' %}
  68. {% set overlayColour = pimcore_select("imageOverlay").getData() == 'dark' ? ' overlay--dark' : '' %}
  69. {% set circleImage = pimcore_checkbox("circleImage").isChecked() ? ' circle-image' : '' %}
  70. {% set imagePaddingmaxWidth = pimcore_numeric("imagePadding").getData() and pimcore_numeric("imageMaxWidth").getData() ? ' style=padding:' ~ pimcore_numeric("imagePadding").getData()|raw ~ 'px;max-width:' ~ pimcore_numeric("imageMaxWidth").getData()|raw ~ 'px;' : '' %} 
  71. {% set imagePadding = pimcore_numeric("imagePadding").getData() ? ' style=padding:' ~ pimcore_numeric("imagePadding").getData()|raw ~ 'px;' : '' %} 
  72. {% set imageMaxWidth = pimcore_numeric("imageMaxWidth").getData()|raw ? ' style=max-width:' ~ pimcore_numeric("imageMaxWidth").getData()|raw ~ 'px;' : '' %} 
  73. {% set imageAlignmentVar = pimcore_select("imageAligment").getData() %} {% set imageAlignment = imageAlignmentVar == 'center' ? ' align_image_center' : imageAlignmentVar == 'right' ? ' align_image_right' : '' %}
  74. <div class="picture_container{% if pimcore_select("thumbnailType") == 'circle_crop' %} circle-crop{% endif %}{{ imageAlignment }}{{ circleImage }}{{ imageOverlay }}{{ overlayColour }}"{{ imagePaddingmaxWidth }}{{ imageMaxWidth }}{{ imagePadding }}>
  75.   {{
  76.     pimcore_image("image", {
  77.       thumbnail: pimcore_select("thumbnailType").getData() | raw,
  78.       imgAttributes: {},
  79.     })
  80.   }}
  81. </div>