Bilder
Über das Pattern
Bildgrößen
Querformat
- Standard-Bilder auf wien.gv.at sind im Querformat und brauchen ein Verhältnis von 16:9.
- Mindestgröße Bilder im Fließtext:
390px×219px, 72dpi Auflösung (Retina:780px×438px) - Maximale Größe Bilder im Fließtext:
710px×399px(Retina:1420px×798px) - Bei Klick auf ein Bild öffnet sich eine Lightbox (optional).
Hochformat
Bilder im Hochformat sind nicht vorgesehen.
Anwendungsrichtlinien
- Grafische Textelemente, Rahmen, Schatten oder abgerundete Ecken dürfen nicht verwendet werden.
- Bei allen Bildern sind verpflichtend Alternativtext sowie Copyright hinzuzufügen.
- Bildunterschrift (Bildtext) sowie das Lupen-Symbol (Vergrößerung) können ergänzt werden.
Parameter und Anwendung in Nunjucks
# Parameter image(settings)
settings: "object"
src: "string" # Pfad des Bildes
alt: "string" # alternative Bildbeschreibung (muss angegeben werden!)
display_size: "string" # (optional) Wert (z. B.: 170px) für Attribut "sizes" -> steuert width des Bildes
link: "string" # (optional) Pfad zu großem Bild
class: "string" # (optional) CSS Klasse
attributes: "object" # HTML-Attribute (z. B.: width, height, class,...), frei wählbar
width: "int" # Breite (sollte angegeben werden)
height: "int" # Höhe (sollte angegeben werden)
title: "string" # Title des Bildes frei wählbar, kann verwendet werden für Quellenverweise (copyright: )
not_lazy: "boolean" # (optional, default: false), true -> Bild nicht lazy laden
sizes: "array" # (optional) Pfade und Größen für Attribut "srcset" müssen in absteigender Reihenfolge angegeben werden.
- url: "string" # Pfad des Bildes
size: "int" # media(min-width) ab welcher Fenstergröße Bild geladen wird
sources: "array" # (optional) Pfade und Größen für Element "picture" müssen in absteigender Reihenfolge angegeben werden. Wenn unterschiedliche Formate (1. avif, 2. webp) verwendet werden -> müssen in dieser Reihenfolge angegeben werden.
- url: "string" # Pfad des Bildes
url_retina: "string" # (optional) Pfad zum Retina-Bild
size: "int" # media(min-width) ab welcher Fenstergröße Bild geladen wird
# Anwendung
{% from "components/image/image.njk" import image with context %}
{{ image(settings) }}Alternativtext
Alternativtexte sind verpflichtend einzugeben und liefern eine Beschreibung des Bildinhalts, falls das Bild selbst nicht betrachtet werden kann. Das kann zum Beispiel bei alternativen Ausgabegeräten wie Textbrowsern oder Screenreadern der Fall sein oder wenn ein Bild nicht richtig verlinkt wurde.
Copyright
Das Copyright ist ein verpflichtendes Bildelement. Es erscheint nicht in Bildunterschriften oder im Fließtext des zugehörigen Artikels. Es wird jedoch als Mouseover vor dem Bild eingeblendet. Wenn das title-Attribut des Bildes mit „copyright: “ beginnt, dann wird das Copyright auch am Ende einer Seite angezeigt. Das Copyright muss den Namen der Fotografin oder des Fotografen enthalten; auch die Form „Institution - Vorname Familienname“ ist möglich.
JavaScript
Anwendung
Notwendig für Bilder mit Quelle.
import { initCopyright } from './copyright.js';
// Copyright versteckt in Toggle
initCopyright()
// Copyright als sichtbare Liste
initCopyright(true)
// Copyright mit benutzerdefiniertem Parent, das observed werden soll und eigener Konfiguration
initCopyright(false, document.querySelector('.my-parent'), {
attributes: false,
childList: true,
characterData: false,
subtree: true
})Variationen
Einzelbild
Bild Lazy Loading
Bild mit Beschreibung
HTML
Laden…Nunjucks
Laden…Bild mit Link zu Lightbox
Bild mit Quelle
Copyrights stehen am Ende der Seiten, sobald das title-Attribut des Bildes mit „copyright: ” beginnt, siehe Footer dieser Seite. Außerdem sind sie als Mouseover vor dem Bild sichtbar.
Neu in Wiener Melange v1.3.0: Der Copyright-Block im Footer wird standardmäßig als Toggle dargestellt und die Liste aktualisiert sich automatisch, wenn neue Bilder dynamisch hinzugefügt oder entfernt werden.
