diff --git a/website/__init__.py b/website/__init__.py index 6a54bf8..231d344 100644 --- a/website/__init__.py +++ b/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//thumbnail') diff --git a/website/models/image.py b/website/models/image.py index 0a7bda8..3fff6b4 100644 --- a/website/models/image.py +++ b/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] diff --git a/website/templates/image.pug b/website/templates/image.pug new file mode 100644 index 0000000..0ab9d2a --- /dev/null +++ b/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 }}") \ No newline at end of file diff --git a/website/templates/images.pug b/website/templates/images.pug index 2d1fdc6..f907d3e 100644 --- a/website/templates/images.pug +++ b/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 %} \ No newline at end of file