Add support for fake browser decoration in images

javiereguiluz · javiereguiluz · commit 68f4b5e25c5e · 2021-10-22T15:24:02.000+02:00
diff --git a/src/Templates/default/html/image.html.twig b/src/Templates/default/html/image.html.twig
@@ -2,4 +2,7 @@
     Overridden so we can control the path to the image based on our copying logic.
     See CopyImagesListener.
 #}
+{% set wrap_image_with_browser = 'with-browser' in imageNode.options.class ?? '' %}
+{% if wrap_image_with_browser %}<div class="with-browser">{% endif %}
 <img src="{{ imageNode.value }}" {% for key, value in imageNode.options %}{{ key }}="{{ value }}" {% endfor %}/>
+{% if wrap_image_with_browser %}</div>{% endif %}
diff --git a/tests/fixtures/expected/blocks/nodes/figure.html b/tests/fixtures/expected/blocks/nodes/figure.html
@@ -1,10 +1,3 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-</head>
-<body>
-
 <figure>
     <!-- REMOVE: src is empty just because the test doesn't utilize the full stack, with CopyImagesListener -->
     <img src="" alt="Symfony Logo" width="200px" />
@@ -18,5 +11,7 @@
     <figcaption><p>But I am a caption <em>for</em> the figure above.</p></figcaption>
 </figure>
 
-</body>
-</html>
+<p>Some images use a special CSS class to wrap a fake browser around them:</p>
+<div class="with-browser">
+    <img src="" alt="A typical exception page in the development environment" align="center" class="some-class with-browser another-class">
+</div>
diff --git a/tests/fixtures/source/blocks/nodes/figure.rst b/tests/fixtures/source/blocks/nodes/figure.rst
@@ -8,3 +8,10 @@ caption for the above figure.
 .. figure:: images/logo.png
 
     But I am a caption *for* the figure above.
+
+Some images use a special CSS class to wrap a fake browser around them:
+
+.. image:: images/exceptions-in-dev-environment.png
+   :alt: A typical exception page in the development environment
+   :align: center
+   :class: some-class with-browser another-class
