templates/_snippets/image.html.twig line 1

Open in your IDE?
  1. {% set mediaObject = image.image is not null ? image.image : null %}
  2. {% set imageUrl = image.isInternal == false and mediaObject is not null ? image.external_image : (mediaObject is not null ? sulu_get_media_url(mediaObject, 'inline') : image.external_image) %}
  4. {% set alt = image.alt|default('') %}
  5. {% set width = image.width|default(null) %}
  6. {% set widthUnit = image.widthUnit|default('%') %}
  7. {% set height = image.height|default(null) %}
  8. {% set heightUnit = image.heightUnit|default('%') %}
  9. {% set objectFit = image.objectFit|default('fill') %}
  10. {% set bordersRadius = image.bordersRadius|default(null) %}
  11. {% set bordersRadiusUnit = image.bordersRadiusUnit|default('px') %}
  12. {% set borderImageCheckbox = image.borderImageCheckbox|default(false) %}
  13. {% set boxShadowImageCheckbox = image.boxShadowImageCheckbox|default(false) %}
  14. {% set borderSizeImage = image.borderSizeImage|default(null) %}
  15. {% set borderSizeImageUnit = image.borderSizeImageUnit|default('px') %}
  16. {% set boxShadowPosXImage = image.boxShadowPosXImage|default(null) %}
  17. {% set boxShadowPosYImage = image.boxShadowPosYImage|default(null) %}
  18. {% set boxShadowSpreadImage = image.boxShadowSpreadImage|default(null) %}
  19. {% set boxShadowUnitImage = image.boxShadowUnitImage|default('px') %}
  20. {% set legend = image.legend|default('') %}
  21. {% set legendPosition = image.legendPosition|default('center') %}
  22. {% set clipPath = image.clipPath|default(null) %}
  23. {% set hasBorder = not borderImageCheckbox and borderSizeImage is not null %}
  24. {% set hasShadow = boxShadowImageCheckbox and (boxShadowPosXImage is not null or boxShadowPosYImage is not null or boxShadowSpreadImage is not null) %}
  25. {% set borderColor = image.borderColor %}
  27. <figure style="
  28. {% if width is not null %} width:{{ width }}{{ widthUnit }};{% endif %}
  29. {% if height is not null %} height:{{ height }}{{ heightUnit }}{% endif %}
  30. position: relative;
  31. ">
  32. <img
  33. class="img-fluid w-100"
  34. src="{{ imageUrl }}"
  35. alt="{{ alt }}"
  36. style="
  37. object-fit: {{ objectFit }};
  38. {% if bordersRadius is not null %}border-radius: {{ bordersRadius }}{{ bordersRadiusUnit }};{% endif %}
  39. {% if hasBorder %}
  40. border: {{ borderSizeImage }}{{ borderSizeImageUnit }} solid {{ borderColor}};
  41. {% endif %}
  42. {% if hasShadow %}
  43. box-shadow:
  44. {% if boxShadowPosXImage is not null %}{{ boxShadowPosXImage }}{{ boxShadowUnitImage }}{% else %}0px{% endif %}
  45. {% if boxShadowPosYImage is not null %}{{ boxShadowPosYImage }}{{ boxShadowUnitImage }}{% else %}0px{% endif %}
  46. {% if boxShadowSpreadImage is not null %}{{ boxShadowSpreadImage }}{{ boxShadowUnitImage }}{% else %}0px{% endif %}
  47. {% if borderColor is not null %} {{ borderColor }}{% else %} rgba(0,0,0,.5){% endif %};
  48. {% endif %}
  49. {% if clipPath and clipPath is not empty %}{{ clipPath }};{% endif %}
  50. "
  51. />
  53. {% if legend %}
  54. <figcaption class="figure-caption text-{{ legendPosition }} mt-2">
  55. {{ legend }}
  56. </figcaption>
  57. {% endif %}
  58. </figure>