Arbeiten mit Bildern in Plone
Um Bilder im Web anzuzeigen muss die Höhe und Breite dieser berücksichtigen werden um bei Größenänderungen die Porportionen korrekt beizubehalten. Das automatische Umrechnen auf kleinere Formate ist heute keine Hexerei mehr, das macht Plone ohne manuelles Beitun.
Jetzt kommt es mitunter vor, dass ein und das selbe Bild an mehreren Stellen einer Website angezeigt werden soll. Möchte man aus Gründen der Ästhetik beispielweise auf einer Übersichtsseite die Proportionen der Bilddarstellung ändern (z.B. 16:9 anstatt dem Originalformat 4:3) muss man sich überlegen, wie das Bild in das vorgegebene Fenster eingepasst werden soll. Die folgenden Beispiel sollen etwas Licht in die Sache bringen:
Die Ausgangslage skizziert
Die folgenden Beispiel zeigen mögliche Probleme beim Arbeiten mit Bilder gefolgt vom Lösungsweg in Plone.
Bild in 4:3 mit einem Bildauschnitt 4:3 Skaliert
Das linke Bild zeigt das Original im Format 4:3. Das rechte Bild eine skalierte Version des linken Bildes ebenfalls im Format 4:3. Das Originalbild wird somit poportional verkleinert.
Je nach Bildinhalt und skalierte Größe, kann das im Fokus stehende Element (im Beispiel der Marienkäfer) aufgrund der Endgröße schwer zu erkennen sein.
Bild in 4:3 mit einem Bildauschnitt 4:3 mit Fokus
Das linke Bild zeigt das Original im Format 4:3. Das rechte Bild zeigt einen Bildauschnitt des linken Bildes (schwarzer Rahmen) ebenfalls im Format 4:3. Das Bild im Hintergrund ist das Ergebnis das Bildausschnittes skaliert auf die gleiche Größe wie das Originalbild. Die kleinen Bilder im rechten Bild zeigen skalierte Varianten des Bildes mit unterschiedlichen Bildausschnitten mit Fokus auf den Marienkäfer.
Das im Fokus stehende Element wurde durch den gewählten Bildausschnitt herausgearbeitet. Dadurch wird auch in einer z.B. Listenansicht mit kleinem Bild der Inhalt ohne Anstrengung erkannt (Usability).
Bild in 4:3 mit einem Bildausschnit 16:9
Das Linke Bild zeigt wieder das Original im Format 4:3. Das rechte Bild zeigt einen Bildauschnitt des linken Bildes (schwarzer Rahmen) im Format 16:9 mit Fokus auf den Marienkäfer.
Würde man das Bild automatisch zum Beispiel via CSS (Stylesheet) Anweisung einpassen, würde möglicherweise wichtige Bildelement abgeschnitten werden - die Beispiele im rechten Bild zeigen die Problematik.
Der Weg zum Ziel
Um den Content-Redakteuren die Arbeit mit Bildern zu erleichtern gibt ihnen Plone zwei Funktionen in die Hand:
- Bildskalierung: Auswahl der vorskalierten Bildgrößen -Bilder werden in vordefinierten Größen proportional skaliert (thumb (128:128), mini(200:200), preview(400:400) ...). Diese können im Editor ausgewählt werden oder im Layout fix zugewiesen werden.
- Bildausschnitteditor: Über den Bildausschnitteditor können den vordefinierten Bildskalierungen der passende Bildausschnitt zugewiesen werden.
Das folgende Video zeigt wie das Arbeiten mit Bildern in Plone funktioniert: