Anleitung für Bildeinbau

Ich bin die Kurzanleitung für die Darstellung der Bilder. Hier gibt's alle notwendigen Infos für den Einbau der Bildergalerien und Einbau der Thumbnail-Funktion (kleines Artikelbild -> bei Klick erscheint großes Bild in Lightbox) für normale Artikelbilder.

Bildergalerien

Dafür ist nun die Komponente "IgniteGallery" installiert. (Menü Komponenten > IgniteGallery).
Die Bedienung der IgniteGallery ist recht easy und leicht verständlich und funktioniert grundsätzlich so:

Die Bilder werden in der Ignite-Gallery in Kategorien abgelegt. Darüberhinaus kann man jeder Kategorie ein Profil zuweisen, über das das Aussehen der Kategorie im Frontend gesteuert wird. Exemplarisch habe ich zwei Profile und zwei Beispielkategorien dafür angelegt.


1. Galerie (mit Vorschaubild)

Beispielkategorie "Schiffdorf"
Ansicht in Frontend mit großem Vorschaubild und kleinen Thumbnails darunter:
http://www.mes-schiffdorf.de/bildergalerie-album-schiffdorf.html


2. Galerie (ohne Vorschaubild)

Beispielkategorie "Schüler"
Ansicht in Frontendohne Vorschaubild und kleinen Thumbnails darunter:
http://www.mes-schiffdorf.de/bildergalerie-album-schueler.html



Eine Bildergalerie in einem Beitrag einbauen

Mit Hilfe des Buttons "Igallery" (Button ist unter dem Texteingabefenster zu finden) kann eine Bildergalerie, genauer gesagt eine Kategorie auch ganz einfach in einem Beitrag integriert werden. Dazu einfach den Button "Igallery" anklicken > im Popup-Fenster kann man die Bilder-Kategorie und das Profil auswählen. (siehe Screenshot)

galerie_in_beitrag_einbauen

Nach Speichern der Angaben wird im Beitrag die Plugin-Anweisung zum Aufruf der Galerie eingefügt. (Plugin-Anweisung ist im Beitragstext gut an den geschweiften Klammer zu erkennen)


Beispiel: Bildergalerie im Beitrag ohne Vorschaubild


Beispiel: Bildergalerie im Beitrag mit Vorschaubild

Ich bin ein Beispiel der Ignite-Bildergalerie mit kleinen Thumbs, Vorschaubild und eingeblendeter Bildbeschreibung :-)



"Normale" Bilder mit Vergrößerung (Lightbox-Funktion) im Beitrag einbauen

mes_luftbild_450x300

Für die Thumbnail bzw. Vergrößerungsfunktion muss für das Bild die CSS-Klasse class="juimage" angegeben werden.
Im Quellcode sieht das dann so aus:

<img class="juimage" src="/images/stories/schulleben/mes_luftbild_450x300.jpg" alt="" />

Die CSS-Klasse kann direkt im Quellcode eingefügt werden oder auch beim Einfügen des Bildes im Bearbeitungsfenster (siehe Screenshot - auch mit Vergrößerungsfunktion eingebaut)

screenshot_bild_cssklasse



"Normale" Bilder ohne Vergrößerung (in Originalgröße darstellen)

Bei dem Einbau von Bildern ohne Vergrößerung gibt es keine Änderungen, bleibt alles wie gehabt!

antarktis-pinguine