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

Aktuelle News

Ausstellung "Die Zeichnung überlebt!"

neuengamme_90Die Gedenkstätte Neuengamme (Hamburg) leiht der Max-Eyth-Schule eine besondere Ausstellung aus.

...mehr

Daniel Steffen ist Europameister im Karate

karate_siegerehrung_90_70In unserer Fachoberschule Technik schlummert offensichtlich ein enormes Potential!

...mehr

"Faust postmodern"

mephisto90x70Theaterprojekt „Faust postmodern
Die Klasse FSP 1 präsentiert ihr neues Stück

...mehr

Comenius

comeniuslogoComenius-Projekt gestartet!
Internationales Flair an der Max-Eyth-Schule.

...mehr

Umweltschule Europa 2011

umweltschule_2011_tn Erneute Auszeichnung der Max-Eyth-Schule und ein tierisch guter Ausflug

...mehr

"Rent a Prof"

rent_a_prof_100"Rent a Prof"
Max-Eyth-Schule leiht sich Professor

...mehr