Installationsanleitung für die Komponente

Bei der RandomImage-Komponente handelt es sich um eine Zufalls-Bilder-Komponente. Aus maximal 5 Bildern wird nach dem Zufallsprinzip bei Seitenaufruf immer wieder ein anderes Bild eingeblendet.

Nachdem Ihr die ZufallsBilder-Komponente installiert habt, öffnet Ihr Euer NOF-Projekt, in welchem Ihr sie nutzen möchtet. In der Arbeitsansicht findet Ihr die SwissKnife Komponenten unter den Benutzerdefinierten Komponenten im linken Bereich Eurer Arbeitsansicht. Solltet Ihr die Komponenten dort nicht finden, dann schaut bitte unter Ansicht >> Komponenten in der oberen Menüleiste, ob die Komponenten ggf. deaktiviert sind.

5a

Ihr klickt nun einmal auf die Komonente Zufalls-Bilder und im Anschluss in Euer Layout. 

6

Es öffnen sich der Platzhalter für die Komponente und die ZufallsBilder-Eigenschaften-Palette.

7

Hier klickt Ihr nun zunächst in die Zeile „ZufallsBild1”, und auf den kleinen Würfel mit den drei Punkten. Es öffnet sich ein Fenster, in welchem Ihr zu Eurem ersten Bild navigiert.
Ich bevorzuge es alle verwendeten Dateien zunächst von Hand in den Assetordner zu kopieren und von dort aus darauf zuzugreifen. So vermeidet man Probleme die ggf. auftreten könnten, wenn wir irgendwann mal unsere Festplatte aufräumen und Pfade zu verwendeten Dateien dabei eventuell verändert werden.
Auch in diesem Fall habe ich das gewünschte Bild bereits im Assetordner platziert und wähle es nun aus.

In die Zeile AltText1 schreibt Ihr einen zum Bild gehörenden, relevanten Alttext. Dieser Text wir eingeblendet, wenn das Bild aus irgendwelchen Gründen nicht angezeigt werden kann und bietet „Nahrung” für Suchmaschinen.

8

Diesen Vorgang wiederholt Ihr nun auch für alle anderen Bilder. In meinem Beispiel sind es 3 Bilder, Ihr könnt jedoch auch bis zu maximal 5 Bilder auswählen.

10

Ihr habt sicher gesehen, dass es zu jedem Bild auch noch die Option „Originalgröße” Ja/Nein gibt. Damit hat es folgendes auf sich.
Enscheidet Ihr Euch hier für „Ja” so wird das Bild in seiner realen Dateigröße angezeigt. Enscheidet Ihr Euch für „Nein” so habt Ihr die Möglichkeit, den Platzhalter mit der gedrückten Maustaste auf Eure Wunschgröße zu ziehen. Ihr braucht hierbei keine Millimeterarbeit zu leisten, denn die Komponente sorgt automatisch dafür, dass das Seitenverhältnis Eures Bildes beibehalten wird. Es gibt also weder Zerrungen noch Quetschungen.

11

Damit habt Ihr bereits ein funktionierendes Zufalls-Bild erstellt. Betrachten könnt Ihr dieses jedoch nur online oder unter Verwendung der Komponente LocalWebServer, weil es sich um eine .php-Seite handelt.

Nun bleibt noch die Zeile „CSS-Klasse”. Hier könnt Ihr den Namen einer von Euch erstellten CSS-Klasse eintragen, welche dann auf das Zufalls-Bild angewandt wird. Somit habt Ihr sogar noch die Möglichkeit, Euer ZufallsBild zu formatieren.

12

Um eine CSS-Klasse anzulegen, klickt Ihr im oberen Textmenü auf „Text” und dann auf „Formatvorlagen verwalten”. Es öffnet sich ein Fenster und Ihr klickt am unteren Rand den Button „Neu”. Es öffnet sich ein weiteres Fenster, in welchem Ihr die Punkte „Benutzerdefinierte Formatvorlage erstellen” und „Site-übergreifend” aktiviert und einen Namen für die CSS-Klasse vergebt. Der Name darf weder Umlaute noch Sonderzeichen enthalten und sollte griffig sein, damit Ihr ihn auch behaltet. In meinem Beispiel habe ich mich für den Namen „RandomImage” entschieden. Eure Einstellungen bestätigt Ihr mit OK.

13

Nun öffnet sich ein neues Fenster in welchem Ihr zuerst den Reiter „Rahmen” aktiviert. Ich habe einen 2px breiten rotbraunen Rahmen eingestellt und unter Textabstand 2px Abstand zu allen Seiten festgelegt. Das bewirkt, dass der rotbraune Rahmen nicht direkt am Bild klebt sondern 2px Abstand zum Bild hält (IE8 zickt).

14

Im Anschluss wechselt Ihr zum Reiter „Absatz”. Hier habe ich unter „Ränder und Einzüge” einen unteren und linken Rand von je 25px festgelegt. Diese Einstellung wird dafür sorgen, dass das Bild inmitten von Text links und unten immer 25px Abstand zum Text halten wird. Ihr könnt die Auswirkung am Ende des Tutorials in der Demo sehen.

15

Natürlich dürft Ihr nicht vergessen, den Namen Eurer CSS-Klasse auch noch in die Eigenschaftenpalette einzutragen. Die Schreibweise muss absolut identisch mit der Eurer Klasse sein.

17


Achtung! Die Komponente darf nicht durch kopieren und einfügen vervielfältigt werden. Sollte der Wunsch bestehen, mehrere Zufalls-Bilder  einzufügen, dann muss für jedes zusätzliche Bild erneut die Komponente ins Layout gezogen werden. Nur so ist eine reibungslose Funktion der Komponente sichergestellt.

Demo ansehen...

Ich wünsche gutes Gelingen und viel Spaß mit der neuen RandomImage-Komponente!