Implement clickable images for full resolution. Closes #79

website/__init__.py

@@ -40,7 +40,11 @@
         'www.googletagmanager.com',
         'google-analytics.com',
         'www.google-analytics.com',
-    ]
+    ],
+    'img-src': [
+        '\'self\'',
+        'data:',
+    ],
 }
 Talisman(app, content_security_policy=csp)
 
@@ -98,11 +102,9 @@ def image(name: str) -> str:
     if image is None:
         flask.abort(404)
 
-    mimetype = 'image/jpeg' if image.extension == 'jpg' else 'image/png'
-
-    return flask.Response(
-        image.content,
-        mimetype=mimetype,
+    return flask.render_template(
+        'image.pug',
+        image=image
     )
 
 @app.route('/images/<string:name>/thumbnail')

website/models/image.py

@@ -18,6 +18,7 @@
 # LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 # OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+import base64
 import datetime
 import io
 from dataclasses import dataclass
@@ -31,6 +32,16 @@ class Image:
     created: datetime.datetime
     content: bytes
 
+    @property
+    def data_uri(self) -> str:
+        """
+        Returns the data URI of the image.
+
+        Returns:
+            str: The data URI of the image.
+        """
+        return f"data:image/png;base64,{base64.b64encode(self.content).decode('utf-8')}"
+
     @property
     def extension(self) -> str:
         return self.title.split('.')[-1]

website/templates/image.pug

@@ -0,0 +1,8 @@
+extends document.pug
+
+block title
+    title {{ image.title }} - Johnathan Irvin
+
+block body
+    .container-fluid.text-center
+        img.img-fluid(src="{{ image.data_uri }}")

website/templates/images.pug

@@ -6,9 +6,11 @@ block title
 block content
     .d-flex.justify-content-center.flex-wrap
         // {% for image in images %}
-        img.flex(
-            src='/images/{{ image.title }}/thumbnail',
-            width='200px',
-            height='200px'
-        )
+        a(href="{{ url_for('image', name=image.title) }}", target="_blank")
+            img.img-fluid.img-thumbnail.m-1(
+                src='/images/{{ image.title }}/thumbnail',
+                alt='{{ image.title }}',
+                width='200px',
+                height='200px'
+            )
         // {% endfor %}