moanos/Notfellchen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Restyle the image upload

Browse Source
This commit is contained in:
moanos [he/him]
2025-09-06 16:06:12 +02:00
parent ebaa477cff
commit f784ab0c78
2 changed files with 50 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/fellchensammlung/models.py
View File

@@ -343,7 +343,7 @@ class User(AbstractUser):
class Image(models.Model): class Image(models.Model):
image = models.ImageField(upload_to='images') image = models.ImageField(upload_to='images', verbose_name=_("Bild"), help_text=_("Wähle ein Bild aus"))
alt_text = models.TextField(max_length=2000, verbose_name=_('Alternativtext'), alt_text = models.TextField(max_length=2000, verbose_name=_('Alternativtext'),
help_text=_("Beschreibe das Bild für blinde und sehbehinderte Menschen")) help_text=_("Beschreibe das Bild für blinde und sehbehinderte Menschen"))
owner = models.ForeignKey(User, on_delete=models.CASCADE) owner = models.ForeignKey(User, on_delete=models.CASCADE)

78
src/fellchensammlung/templates/fellchensammlung/forms/form-image.html
View File

@@ -4,40 +4,58 @@
{% load widget_tweaks %} {% load widget_tweaks %}
{% block content %} {% block content %}
<div> <div class="block">
{% blocktranslate %} <p>
Lade hier ein Foto hoch - wähle den Titel wie du willst und mach bitte eine Bildbeschreibung, {% blocktranslate %}
damit die Fotos auch für blinde und sehbehinderte Personen zugänglich sind. Lade hier ein Foto hoch. Füge bitte eine Bildbeschreibung hinzu,
{% endblocktranslate %} damit die Fotos auch für blinde und sehbehinderte Personen zugänglich sind.
<p><a class="button" target="_blank" {% endblocktranslate %}
href="https://www.dbsv.org/bildbeschreibung-4-regeln.html">{% translate 'Anleitung für Bildbeschreibungen' %}</a>
</p> </p>
</div> </div>
<form method="post" enctype="multipart/form-data"> <div class="block">
{% csrf_token %} <form method="post" enctype="multipart/form-data">
<div class="field"> {% csrf_token %}
<label class="label" for="image">{{ form.image.label }}</label> <div class="file has-name is-boxed is-primary is-">
{{ form.image|add_class:"input"|attr:"id:image" }} <label class="file-label" for="image">
</div> {{ form.image|add_class:"file-input"|attr:"id:image" }}
<span class="file-cta">
<!--- Image Preview: Only shown if image gets selected ---> <span class="file-icon">
<div class="field" id="image-preview-wrapper" style="display: none;"> <i class="fas fa-upload"></i>
<label class="label">{% translate "Vorschau" %}</label> </span>
<div class="box has-text-centered"> <span class="file-label">{{ form.image.help_text }}</span>
<figure class="image is-256x256 is-inline-block"> </span>
<img id="image-preview" src="" alt="{% translate 'Bildvorschau' %}" class="is-rounded"> <span class="file-name" id="image-upload-filename">...</span>
</figure> </label>
</div> </div>
</div>
<div class="field"> <!--- Image Preview: Only shown if image gets selected --->
<label class="label" for="alt-text">{{ form.alt_text.label }}</label> <div class="field" id="image-preview-wrapper" style="display: none;">
{{ form.alt_text|add_class:"textarea"|attr:"id:alt-text"|attr:"rows:3" }} <label class="label">{% translate "Vorschau" %}</label>
<div class="is-danger">{{ form.alt_text.errors }}</div> <div class="box has-text-centered">
</div> <figure class="image is-256x256 is-inline-block">
<input class="button is-primary" type="submit" value="{% translate "Speichern" %}"> <img id="image-preview" src="" alt="{% translate 'Bildvorschau' %}" class="is-rounded">
</form> </figure>
</div>
</div>
<div class="field">
<label class="label" for="alt-text">{{ form.alt_text.label }}</label>
{{ form.alt_text|add_class:"textarea"|attr:"id:alt-text"|attr:"rows:3" }}
<div class="help">
{{ form.alt_text.help_text }}
</div>
<div class="is-danger">{{ form.alt_text.errors }}</div>
</div>
<input class="button is-primary" type="submit" value="{% translate "Speichern" %}">
</form>
</div>
<div class="block">
<a class="button is-info is-warning is-fullwidth" target="_blank"
href="https://www.dbsv.org/bildbeschreibung-4-regeln.html">
<i class="fa-solid fa-link fa-fw"></i> {% translate 'Anleitung für Bildbeschreibungen' %}
</a>
</div>
<script> <script>
@@ -45,6 +63,7 @@
const input = document.getElementById("image"); const input = document.getElementById("image");
const previewWrapper = document.getElementById("image-preview-wrapper"); const previewWrapper = document.getElementById("image-preview-wrapper");
const preview = document.getElementById("image-preview"); const preview = document.getElementById("image-preview");
const filename = document.getElementById("image-upload-filename");
input.addEventListener("change", function () { input.addEventListener("change", function () {
const file = this.files[0]; const file = this.files[0];
@@ -53,6 +72,7 @@
reader.onload = function (e) { reader.onload = function (e) {
preview.src = e.target.result; preview.src = e.target.result;
previewWrapper.style.display = "block"; previewWrapper.style.display = "block";
filename.innerText = file.name;
} }
reader.readAsDataURL(file); reader.readAsDataURL(file);
} else { } else {