CMSimpel Bilder einbinden

banner

Bilder einbinden

Viele Wege führen nach Rom und so sieht es auch aus beim Thema Bilder einbinden aus. Zuerst einmal setzen wir das Ziel fest. Es geht hier nicht um die Einbindung einer Galerie in CMSimpel, dafür gibt es andere und bessere Lösungen, sondern primär um das Einbinden einzelner Bilder oder kleinerer Bildgruppen in einzelne Seiten und Blogeinträge.

Fangen wir mit der einfachsten und generell (da ohne Javascript Tricks) verfügbaren Variante an:

Das direkte Einbinden in den Text:

me.jpg

<img title="me" src="images/me.jpg" alt="me.jpg" width="200" height="225">

Bei kleineren Bildern kein Problem, je nach Formatierung kann man auch noch schön Text drum rum fliessen lassen, aber spätestens wenn ein Bild von der Größe her die Breite des Inhaltsfensters erreicht, wird es unschön und kann das Design der Seite zerstören. Aber auch dafür gibt es eine Lösung:

<img title="wiese" src="content/plugins/fotogalerie/images/8.jpg" alt="" width="600">

Mit dem width="600px"  erzähl ich dem Browser einfach, er soll das Bild auf eine Breite von 600 Pixel skalieren, damit kann ich ein kleines Bild in der Größe aufblasen und, was viel wichtiger ist, ein Großes "passend" Klein machen.
Vorteil: ist bequem; Nachteil dabei: übertragen wird immer noch das große Bild, in dem Falle ein Bild mit 1600x1067px und einer Dateigröße von 360kb. Wenn ich 5 oder 6 Bilder so auf einer Seite anzeige, kommen locker 2 Megabyte an Transfervolumen zusammen, obwohl bei der gleichen Anzahl echter 600*400px Bildern nur um 300 Kilobyte übertragen werden müssten.

Um große Bilder adäquat anzeigen zu können muß eine andere Lösung her und der Klassiker ist da das Öffnen im Browser. Ganz ungeschickt aber immer noch zu sehen: im gleichen Browserfenster in dem auch die Seite steht. Normalerweise auch das übliche Fallback, wenn das neue Fenster per Javapopup oder ganz modern in einer light/shadowbox geöffnet werden sollte, der Besucher aber Javascript ausgeschaltet hat:

<a href="images/ff1/img_1398.jpg"><img src="images/ff1/tn/img_1398.jpg" alt=""></a>

Ist uncool, aber ok, öffnen wir es nun in einem neuen Browserfenster:

<a href="images/ff1/img_1398.jpg" target="_blank"><img src="images/ff1/tn/img_1398.jpg" alt="">

Je nach Browser sieht es immer noch uncool aus, werden wir moderner, also Web 1.0 mit JavaPopup:

<a onclick="window.open('http://web57.ws/cms/images/ff1/img_1398.jpg','','resizable=yes,width=1280,height=854,left=50,top=50');return false;"><img src="images/ff1/tn/img_1398.jpg" alt=""></a>

... und eigentlich könnte ich jetzt hier Schluss machen, weil diese Lösung ziemlich optimal ist: das Bild, egal welcher Größe, es darf auch ein Original 4xxx*3xxxpx Bild sein, wird in einem Browserfenster angezeigt und der Besucher hat dann die Wahl, wie er das Bild nun weiter betrachten mag, in Gänze oder als Teil.
Aber die Welt ist ja schöner und bunter und vor allen Dingen gibt es die verschiedenen Lighbox Ableger, die ein Bild in einem farblich abgesetzten Rahmen schön auf dem aktuellen Browserfenster darstellen können.

 

Der folgende Textteil ist inzwischen überholt, das Plugin hi_FancyBox habe ich momentan deaktiviert. Die FancyBox ist mir zu Ressourcenhungrig! Mein realer Bedarf für eine Galerie wird zwar anderweitig umfänglich befriedigt, das hat mich jetzt aber nicht abgehalten mal auf die Schnelle eine Gallerie mit der lb_gallery einzurichten. Mehr dazu HIER

Und schließlich habe ich mit shutter-reloadet sowieso meinen persönlichen Favoriten aus Wordpress Zeiten wieder. Ein Dank an Holger, dem wir die Anpassung für CMSimple zu verdanken haben.

 -------------------- schwer veralteter text ----------------------------------

Auch wenn man "sowas" nicht tut, momentan benutze ich hier zwei unterschiedliche Lightbox Varianten nebeneinander (scheinbar konfliktfrei), die ich für unterschiedliche Anzeigevarianten einsetze. Am besten verdeutliche ich den Unterschied mit einem großen Bild.

Die erste Variante ist die Naheliegende, das CMSimple Plugin hi_FancyBox :

<a class="zoom" title="katze auf c-schlauch" href="content/plugins/fotogalerie/images/20.jpg"><img src="content/plugins/fotogalerie/images/thumbs/20t.jpg" alt=""></a>

und nun mit shadowbox :

<a rel="shadowbox" href="content/plugins/fotogalerie/images/20.jpg"><img src="content/plugins/fotogalerie/images/thumbs/20t.jpg" alt=""></a>

Der Unterschied ist sichtbar und mal erscheint die Eine, mal die andere Version attraktiver. Natürlich ließe sich die shadowbox auch so konfigurieren, daß sie das gesamte Bild in Browserfenstergröße skaliert anzeigt, daran bin ich aber bei großen Bildern gar nicht interessiert. Die Einstellung für die Fancybox wiederum, mit der sich große Bilder unskaliert anzeigen lassen ist optisch unattraktiver, mit elend lange Scrollbalken die das Seitendesign zersägten; dagegen ist das klassische Javapopup ein echter Augenschmeichler.

Da man bei CMSimple_XH in Verbindung mit dem Plugin Hi_pd_scripting(_xh) mehrere Pluginaufrufe auf einer Seite positionieren kann (bis zu 5), lassen sich in Verbindung mit der Fotogalerie_XH auch mal ganz nette (bequeme) Lösungen realisieren. Wie z.B. hier auf der Seite zum Soligor, bei dem die 10 Bilder nicht einzeln, sondern über 3 kleine Galerien plaziert wurden. Natürlich kann man auch eine Gallery mit nur einem Bild erstellen, wie z.B. das Bild der Katze auf dem C-Schlauch

nur zum testen

Katze auf dem C-Schlauch

Ich benutze in der Fotogalerie die shadowbox zur Bildanzeige, sie gefiel mir einfach besser wie die eingebaute Slimbox.

Und weil es so schön war, noch zum Abschluß ein Album aus dem Gallerie Plugin lb_gallery :


Tags: cmsimple cmsimple tips

Letzte Bearbeitung: 11.10.2012, 11:11
Benutzername

Passwort

autom. Login

Seitenanfang | 2001-2014 | © w.scharff | Impressum | Powered by CMSimple 4 | Template by w.scharff | Login