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