Gallerie in Artikel einbetten

[B.Lachner]

Halli Hallo ...

ich habe schon wenig herumgesucht und den einen oder anderen Artikel/Blogbeitrag zu dem Thema gefunden. Allerdings sind die Informationen teilweise zu alt (> 10 J) oder es geht eher um die Lösung von Problemen mit schon genutzten Plugins.

Ich würde aber gerne wissen, wie ich relativ kompakt in einen Artikel ein paar Bilder einfügen kann? Ich erhoffe mir quasi nur eine (höhere) "Zeile", in der die Bilder in einer verkleinerten Vorschau mit Unterschrift angezeigt werden, wo ich durchblättern kann. So zum Beispiel wie die "Ähnlichen Artikel", die man auf der Seite eines Artikels unten findet.
Es sollen auch die Vorschau-Bilder also nicht alle auf der Artikel-Seite zu sehen sein.

Man sollte sich die Bilder dann aber auch per Anklicken genauer anschauen können und dann wäre eine etwas längere Beschreibung praktisch, dazu auch das Weiterblättern zu den nächsten Bildern.

Soweit meine Wünsche. Es wäre nett, wenn ihr mir hier ein Feedback geben könntet, was davon mit welchem Plugin machbar ist, oder eben nicht. Wenn ich die Namen habe, kann ich dann ja auch nach weiteren Informationen suchen.

Danke, Birgit

[yellowled]

Ich würde aber gerne wissen, wie ich relativ kompakt in einen Artikel ein paar Bilder einfügen kann?

Zunächst mal: Es gibt (leider) noch keine „eingebaute“ Galerie-Funktion in s9y. Ich hab das bereits angeregt, aber wie so oft müsste sich erstmal jemand finden, der es implementiert. Bis dahin muss man ein wenig basteln.

Dann sollte man noch bedenken, dass Begriffe wie „Zeile“ in Zeiten kleiner Smartphone-Bildschirme und responsiver Themes, die diese Bildschirme bedienen, nicht mehr zeitgemäß sind bzw. solche Konzepte wie „9 Bildervorschauen in 3 Zeilen“ dort eben keinen rechten Sinn mehr ergeben (was auf einem Laptop noch 3x3 sind, ist auf dem Smartphone schnell 9x1, vereinfacht gesagt).

Grundsätzlich ist zunächst einmal die Sache mit der kleinen Vorschau und den großen Bildern gar kein Problem, das ist bereits im Kern enthalten. Wann immer man ein Bild aus der Mediendatenbank einfügt, kann man auswählen, ob man „die Vorschau“ oder „das große Bild“ im Eintrag haben möchte und (wichtig) ob das Bild ein Link sein soll. Ist (was standardmäßig voreingestellt ist, aber meiner Erinnerung nach ausdrücklich ausgewählt werden muss) ein Vorschaubild ein Link auf die große Version, ist das, was Du willst, quasi schon erledigt.

Darüber hinaus kann man einstellen, ob Bilder einen Absatz erzeugen oder links bzw. rechts vom Text (und auch ggf. von weiteren Bildern) umflossen werden sollen. Wenn Du also mehrere Vorschaubilder (die Links zu großen Versionen sind) links vom Text umflossen hintereinander in einen Eintrag einfügst, entsteht (je nach verfügbarem Platz) eine bzw. mehrere „Reihen“ von Bildern – nicht ohne Stolperfallen zwar, aber dazu gleich mehr.

Um nun zwischen den Bildern „blättern“ zu können, sollte man ein sogenanntes Lightbox-Script verwenden, welches die große Version in einem Overlay (eine Art über das Browserfenster gelegtem Fenster) darstellt und aus mehreren Bildern eine Galerie macht, durch die man blättern kann. Dazu gibt es das s9y-Plugin serendipity_event_lightbox (Lightbox für Blog Einträge mit Bildern), welches gleich mehrere solcher Scripte bereit stellt. Sofern die Bilder wie oben beschrieben eingefügt wurden, funktioniert das automagisch, übrigens auch in statischen Seiten, nicht nur in Einträgen.

Das sieht dann z.B. so aus wie hier in meinem Blog.

Es sollen auch die Vorschau-Bilder also nicht alle auf der Artikel-Seite zu sehen sein.

Ich bin mir nicht ganz sicher, ob ich richtig verstehe, was Du möchtest, glaube aber, dass das nicht geht. Bestenfalls könnte man ein paar Bilder in den erweiterten Eintrag auslagern, damit sie auf Übersichtsseiten nicht angezeigt werden, aber dann würden sie dort auch nicht in der Galerie nachgeladen. Aber vielleicht erklärst Du nochmal etwas genauer, was Du damit meinst?

Nun noch kurz zu den Haken:

Das größte Problem mit solchen „improvisierten“ Galerien sind Vorschaubilder mit unterschiedlichen Höhen. Das ist technisch ein wenig schwer zu erklären, zumal es auch vom verwendeten Theme und der Bildschirmauflösung abhängt. Ich versuche mal, es zu illustrieren. Nehmen wir an, es sind 9 Bilder und das Theme lässt anhand der (einstellbaren) Größe der Vorschaubilder 3 davon pro „Reihe“ zu. Das sieht so aus:

Code: Select all

+---+---+---+
|   |   |   |
+---+---+---+
|   |   |   |
+---+---+---+
|   |   |   |
+---+---+---+

Das klappt aber so eben nur, wenn alle Bilder gleich hoch sind. Haben die Bilder Bildunterschriften, müssten auch diese gleich „hoch“ sein (also die gleiche Anzahl Zeilen haben), und spätestens da wird es schwierig, zumindest über verschiedene Bildschirmauflösungen. Wenn man also solche Galerien verbauen möchte, empfehle ich darauf zu achten, dass stets alle Bilder (in einer Galerie) das gleiche Format und keine Bildunterschriften haben (dann sind sie aufgrund der in s9y voreingestellten Vorschaubild-Größe auch gleich hoch).

Zweites Problem: Damit diese 9 Bilder sich so anordnen, müssen sie alle links von Text bzw. vom auf sie folgenden Inhalt (hier: dem nächsten Bild) umflossen werden. In CSS heißt das „float: left;“. Idealerweise müsste man das float des letzten Bildes aufheben (das nennt sich Clearing), indem man z.B. (es gibt mehrere Methoden dafür) dem folgenden Element die Eigenschaft „clear: left;“ zuweist, was schwierig ist, weil auf so eine Galerie viele Arten Elemente folgen können. Daher ist es vermutlich sinnvoller, jede Galerie in einen div-Container zu wickeln (das würde z.B. eine integrierte Galerie-Funktion in s9y automagisch machen) und diesem bestimmte Styles zu geben. Dafür muss man allerdings zwingend ins HTML der Eintrages, das geht nicht über einen WYSIWYG-Editor (bzw. geht schon, aber man muss dazu in die Code-Ansicht umschalten).

Ich glaube, das war's im Prinzip, aber frag um Himmels Willen gerne nach, wenn etwas unklar oder nicht ganz klar ist. Das war ziemlich viel auf einmal. Sorry, komplexes Thema.

YL

[B.Lachner]

Dann sollte man noch bedenken, dass Begriffe wie „Zeile“ in Zeiten kleiner Smartphone-Bildschirme und responsiver Themes, die diese Bildschirme bedienen, nicht mehr zeitgemäß sind

Nun ja ... an Smartphone-Bildschirme habe ich tatsächlich nicht gedacht.

„9 Bildervorschauen in 3 Zeilen“ dort eben keinen rechten Sinn mehr ergeben (was auf einem Laptop noch 3x3 sind, ist auf dem Smartphone schnell 9x1, vereinfacht gesagt).

... mit einer Zeile meinte ich quasi eine Zeile von Bildern, die aber nicht statisch sind sondern in dieser Zeile verschiebbar sind. Wenn also nur drei nebeneinander passen würden, dann nur drei sichtbare, aber vielleicht noch ein paar, die ich wie bei einem Foto-Film rechts/links verschieben kann.

Aber das scheint es wohl nicht zu geben, außer eben indem man die Lightbox verwendet.

Was deine restlichen Hinweise betreffen, so gehen die in Richtung allgemeines Web-Design, mit dem ich mich eigentlich einigermaßen auskennen. Das ist mir soweit klar.
Ich habe ja gehofft, es gibt ein Hilfsmittel, das eben auch von sich aus flexibel auch Bildschirmgrößen reagieren kann und vielleicht auch Bilder aus einem Verzeichnis einfach so anzeigt.

Dann muss ich wohl noch warten, dass es jemand macht, schade.

Danke auf jeden Fall für deine Rückmeldungen und Infos,
Birgit.

[yellowled]

... mit einer Zeile meinte ich quasi eine Zeile von Bildern, die aber nicht statisch sind sondern in dieser Zeile verschiebbar sind. Wenn also nur drei nebeneinander passen würden, dann nur drei sichtbare, aber vielleicht noch ein paar, die ich wie bei einem Foto-Film rechts/links verschieben kann.

Das wäre dann wohl eine Art responsives Carousel, das z.B. auch die Anzahl der angezeigten Bilder der Bildschirmbreite anpasst. Sowas geht z.B. mit slick, aber auch dafür gibt es kein s9y-Plugin. Bin mir zudem nicht sicher, ob man es „gut“ mit einer Lightbox-Funktion verbinden könnte.

Vielleicht meinst Du auch eher eine Slideshow mit Thumbnail-Leiste als Navigation? Hast Du eine Beispielseite, auf der es so implementiert ist, wie Du es haben willst?

YL