file-explorer/templates/file.html.twig
jank1619 a67b93ac99 Implement image previewing
I have tested this with png and jpeg/jpg which both work but most other image types should work as well.
![image](/attachments/25318577-d48c-4902-93b3-9adbb8b954e7)

Co-authored-by: Jan Klattenhoff <j.klattenhoff@neusta.de>
Reviewed-on: sites/file-explorer#12
Co-authored-by: jank1619 <jan@kjan.email>
Co-committed-by: jank1619 <jan@kjan.email>
2024-12-21 18:12:14 +00:00

25 lines
1.0 KiB
Twig

{% extends 'base.html.twig' %}
{% block title %}
{{ file.name }}
{% endblock %}
{% block body %}
<div class="max-w-2xl mx-auto my-8 p-6 bg-white shadow-lg rounded-lg border">
<a href="{{ routing_service.goBack(app.request) }}" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="w-5 h-5 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
</svg>
Back
</a>
<div class="mt-6 text-gray-700 overflow-auto max-h-96">
{% if file.mimeType starts with 'image' %}
<img src="{{ path('serve_file', {filePath: file.name}) }}" alt="">
{% else %}
<p class="whitespace-pre-wrap leading-relaxed break-all text-balance">{{ file.content|raw }}</p>
{% endif %}
</div>
</div>
{% endblock %}