You are here

image-style-preview.html.twig in Drupal 10

Default theme implementation to display a preview of an image style.

Available variables:

  • style_id: The ID of the image style.
  • style_name: The name of the image style.
  • cache_bypass: A timestamp token used to avoid browser caching of images.
  • original: An associative array containing:
    • url: The URL of the original image.
    • width: The width in pixels of the original image.
    • height: The height in pixels of the original image.
    • rendered: The render array for the original image.
  • derivative: An associative array containing:
    • url: The URL of the derivative image.
    • width: The width in pixels of the derivative image.
    • height: The height in pixels of the derivative image.
    • rendered: The rendered derivative image.
  • preview: An associative array containing:
    • original: An associative array containing:

      • width: The width in pixels of the original image in the preview.
      • height: The height in pixels of the original image in the preview.
    • derivative: An associative array containing:
      • width: The width in pixels of the derivative image in the preview.
      • height: The height in pixels of the derivative image in the preview.

File

core/modules/image/templates/image-style-preview.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation to display a preview of an image style.
  5. *
  6. * Available variables:
  7. * - style_id: The ID of the image style.
  8. * - style_name: The name of the image style.
  9. * - cache_bypass: A timestamp token used to avoid browser caching of images.
  10. * - original: An associative array containing:
  11. * - url: The URL of the original image.
  12. * - width: The width in pixels of the original image.
  13. * - height: The height in pixels of the original image.
  14. * - rendered: The render array for the original image.
  15. * - derivative: An associative array containing:
  16. * - url: The URL of the derivative image.
  17. * - width: The width in pixels of the derivative image.
  18. * - height: The height in pixels of the derivative image.
  19. * - rendered: The rendered derivative image.
  20. * - preview: An associative array containing:
  21. * - original: An associative array containing:
  22. * - width: The width in pixels of the original image in the preview.
  23. * - height: The height in pixels of the original image in the preview.
  24. * - derivative: An associative array containing:
  25. * - width: The width in pixels of the derivative image in the preview.
  26. * - height: The height in pixels of the derivative image in the preview.
  27. *
  28. * @see template_preprocess_image_style_preview()
  29. *
  30. * @ingroup themeable
  31. */
  32. #}
  33. <div class="image-style-preview preview clearfix">
  34. {# Preview of the original image. #}
  35. <div class="preview-image-wrapper">
  36. {{ 'original'|t }} (<a href="{{ original.url }}">{{ 'view actual size'|t }}</a>)
  37. <div class="preview-image original-image" style="width: {{ preview.original.width }}px; height: {{ preview.original.height }}px;">
  38. <a href="{{ original.url }}">
  39. {{ original.rendered }}
  40. </a>
  41. <div class="height" style="height: {{ preview.original.height }}px"><span>{{ original.height }}px</span></div>
  42. <div class="width" style="width: {{ preview.original.width }}px"><span>{{ original.width }}px</span></div>
  43. </div>
  44. </div>
  45. {# Derivative of the image style. #}
  46. <div class="preview-image-wrapper">
  47. {{ style_name }} (<a href="{{ derivative.url }}?{{ cache_bypass }}">{{ 'view actual size'|t }}</a>)
  48. <div class="preview-image modified-image" style="width: {{ preview.derivative.width }}px; height: {{ preview.derivative.height }}px;">
  49. <a href="{{ derivative.url }}?{{ cache_bypass }}">
  50. {{ derivative.rendered }}
  51. </a>
  52. <div class="height" style="height: {{ preview.derivative.height }}px"><span>{{ derivative.height }}px</span></div>
  53. <div class="width" style="width: {{ preview.derivative.width }}px"><span>{{ derivative.width }}px</span></div>
  54. </div>
  55. </div>
  56. </div>

Related topics