templates/content/thumbnails.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %}
  3. {% block content %}
  5.     <div id="main-content" class="main-content" >
  7.         {{ include('includes/content-headline.html.twig') }}
  9.         {# this is just used for demonstration #}
  10.         {% set image =  pimcore_image('image').getImage() ?: pimcore_asset(341) %}
  13.         <p>
  14.             {{ 'Original Dimensions of the Image:'|trans }}
  15.             {{ image.width }} x {{ image.height }}
  16.         </p>
  18.         <div class="mb-5">
  19.             {{ pimcore_image('image', { thumbnail: 'content', imgAttributes: {class: 'img-responsive'}}) }}
  20.         </div>
  23.         {% set thumbnails = {
  24.             'Cover': 'exampleCover',
  25.             'Contain': 'exampleContain',
  26.             'Frame': 'exampleFrame',
  27.             'Rotate': 'exampleRotate',
  28.             'Resize': 'exampleResize',
  29.             'Scale by Width': 'exampleScaleWidth',
  30.             'Scale by Height': 'exampleScaleHeight',
  31.             'Contain & Overlay': 'exampleOverlay',
  32.             'Rounded Corners': 'exampleCorners',
  33.             'Colors': 'exampleColor',
  34.             'Sepia': 'exampleSepia',
  35.             'Grayscale': 'exampleGrayscale',
  36.             'Mask': 'exampleMask',
  37.             'Combined 1': 'exampleCombined1',
  38.             'Combined 2': 'exampleCombined2'
  39.         } %}
  43.         <section class="thumbnail-examples">
  44.             {% for title, name in thumbnails %}
  46.                 {% if loop.index0 % 3 == 0 %}
  47.                     <div class="row">
  48.                 {% endif %}
  50.                 <div class="col-lg-4">
  51.                     {% set thumbnail = image.getThumbnail(name) %}
  53.                     <div class="img-container">
  54.                         {{ thumbnail.getHTML()|raw }}
  55.                     </div>
  57.                     <h5>{{ title|trans }}</h5>
  59.                     <div class="img-dimensions">
  60.                         {{ 'Dimensions:'|trans }}
  61.                         {{ thumbnail.width }} x {{ thumbnail.height }}
  62.                     </div>
  63.                 </div>
  65.                 {% if loop.last or ((loop.index0 + 1) % 3 == 0) %}
  66.                     </div>
  67.                 {% endif %}
  68.             {% endfor %}
  69.         </section>
  71.     </div>
  73.     {{ pimcore_areablock('content_bottom') }}
  74. {% endblock %}