Bild


Das Symbol für das Bild-Element in der Objektpalette

Indem Sie statt eines herkömmlichen Bildes ein WebYep-Bild-Element in einer Webseite platzieren, geben Sie den BenutzerInnen der Webseite die Möglichkeit, das Bild selbst (im Webbrowser) durch eigene GIF- oder JPEG-Dateien zu ersetzen.

Dieses WebYep Element wird durch folgenden PHP Code repräsentiert:

<?php webyep_image("Feldname", false, "", "eine_andere_seite.php", "andererFrame", 700, 900, true, 70, 90); ?> Details...

Parameter der PHP Funktion webyep_image():
(siehe auch "Eigenschaften des Bild-Elementes" weiter unten)
  1. "Feldname": Ein Text – der Name für dieses Element.
  2. true/false: Ein boolscher Wert – der Gültigkeitsbereich dieses Elementes.
    true wenn das Element in allen Seiten den selben Inhalt haben soll (global).
    false wenn es auf jeder Seite, auf der es platziert ist, andere Inhalte haben soll.
  3. "": Ein Text – nicht mehr verwendet. Geben Sie einen Leertext ("") an.
  4. "eine_andere_seite.php": Ein Text (optional) – der URL einer Seite, auf die das Bild verweisen soll (Link). Kann auch ein absoluter URL sein (http://...).
    Wenn ein Leertext ("") angegeben wird, ist das Bild initial kein Link, kann aber von den BenutzerInnen noch beim Editieren der Seite verlinkt werden.
  5. "andererFrame": Ein Text (optional) – der Name eines Frames (Rahmen), der ggf. für den Link als "target" (Ziel) fungieren soll.
    Geben Sie einen Leertext ("") ein, wenn Sie kein Frameset verwenden und die verlinkte Seite nicht in einem neuen Fenster geöffnet werden soll.
    Geben Sie "_blank" an, um die verlinkte Seite in einem neuen Fenster zu öffnen.
  6. 700: Eine Zahl – die Breite des Bildes bzw. des Vorschaubildes, oder Null, wenn der Parameter ignoriert werden soll.
  7. 900: Eine Zahl – die Höhe des Bildes bzw. des Vorschaubildes, oder Null, wenn der Parameter ignoriert werden soll.
  8. true/false: Ein boolscher Wert – gibt an, ob für das Bild ein Vorschaubild erzeugt werden soll.
    true, wenn ein Vorschaubild erzeugt werden soll. Breite bzw. Höhe des Vorschaubildes werden durch die nächsten beiden Parameter definiert. Ein Klick auf das Vorschaubild im Webbrowser öffnet dann das Original-Bild in einem Popup-Fenster.
    false, wenn kein Vorschaubild berechnet werden soll. Die Parameter für Breite und Höhe gelten dann für das Bild selbst, das in dieser Größe dann direkt in der Seite angezeigt wird.
  9. 70: Eine Zahl – die Breite des Vorschaubildes.
  10. 90: Eine Zahl – die Höhe des Vorschaubildes.

Bitte beachten Sie auch die Details unter "Eigenschaften des Bild-Elementes" weiter unten bzgl. Größenangaben und Vorschaubild-Erstellung!

Die Bilddateien können von den BenutzerInnen direkt im Webbrowser zum Webserver gesendet werden. Im WebYep Bild-Ändern-Fenster wird im Webbrowser einfach eine GIF- oder JPEG-Datei ausgewählt und durch Klick auf "Speichern" wird die Datei zum Webserver gesendet und von WebYep gespeichert.


Das Bild-Element in Aktion - durch Klicken auf den Bearbeiten-Knopf ("Foto bearbeiten")
öffnet sich das Bild-Ändern-Fenster


Das Bild-Ändern-Fenster

Die BenutzerInnen können im Bild-Ändern-Fenster auch den URL einer Seite angeben, auf die das Bild verlinken soll (wenn nicht ein Vorschaubild erstellt wurde oder der/die WebDesignerIn nicht schon einen URL vorgegeben hat). Zusätzlich kann auch der "Alt"-Text (der Wert für das "alt"-Attribut des <img>-Tags) angegeben werden.


Seitenanfang

Einen Lightbox-Effekt hinzufügen

Das WebYep Bild-Element (wie auch das Galerie-Element) unterstützt die verbreitete JavaScript-Effekt-Bibliotheken "Lightbox" (basierend auf Prototype/Scriptaculous) und "FancyBox" (basierend auf jQuery). Wenn Sie eine dieser Bibliothek herunterladen und im "opt"-Ordner von WebYep installieren, wird das Bild-Element automatisch diese Bibliothek verwenden. Anstatt ein Popup-Fenster zu öffnen, wenn auf ein Vorschaubild geklickt wird, wird WebYep dann das Originalbild direkt in der Seite mit einem Lightbox-Effekt anzeigen.

Installation der "Lightbox"

Zum Zeitpunkt der Erstellung dieser Dokumentation kann die Lightbox-Bibliothek unter der folgender Adresse heruntergeladen werden: http://www.lokeshdhakar.com/projects/lightbox2/

Nach dem Herunterladen des ZIP-Archivs, ist dieses zu entpacken und der resultierende Ordner (der üblicherweise die Versionsnummer im Namen trägt) einfach auf lightbox umzubenennen. Dieser Ordner ist dann in den Ordner webyep-system/programm/opt am Server hochzuladen.

Um die Konfiguration der Lightbox anzupassen, folgen Sie bitte den Anleitungen auf deren Website - siehe Link oben.

Sie werden z.B. die Datei webyep-system/programm/opt/lightbox/js/lightbox.js anpassen wollen, um die Pfade zu den Bilddateien für die "schließen"- und "lädt"-Bilder anzupassen:

LightboxOptions = Object.extend({
   fileLoadingImage: '/webyep-system/programm/opt/lightbox/images/loading.gif',
   fileBottomNavCloseImage: '/webyep-system/programm/opt/lightbox/images/close.gif',

Wenn Ihre Seite bereits aus anderen Gründen die Prototype- und/oder Scriptaculous-Bibliothek verwendet, sollten Sie WebYep mitteilen, diese nicht erneut einzubinden. Dies erfolgt in WebYeps Konfigurationsdatei konfiguration.php mittels:

$webyep_bDoNotIncludePrototype = true;

und/oder

$webyep_bDoNotIncludeScriptaculous = true;

Installation der "FancyBox"

Zum Zeitpunkt der Erstellung dieser Dokumentation kann die FancyBox-Bibliothek unter der folgenden Adresse heruntergeladen werden: http://fancybox.net/

Nach dem Herunterladen des ZIP-Archivs, ist dieses zu entpacken. Dabei entsteht ein Ordner mit einigen Unterordnern. Der Unterordner namens fancybox ist derjenige, der auf den Server in das webyep-system/programm/opt-Verzeichnis hochzuladen ist.

Sie werden im Stammordner des ZIP-Archivs auch eine Datei namens jquery-x.x.x.min.js finden (wobei x.x.x für die Versionsnummer steht) – hierbei handelt es sich um die jQuery-Bibliothek, auf der die FancyBox basiert. Sie können diese Datei ebenfalls auf den Server in das webyep-system/programm/opt-Verzeichnis hochladen, müssen das aber nicht unbedingt. Wenn Sie dies nicht tun, wird die jQuery-Bibliothek einfach aus dem Google Code-Archiv geladen.

Wenn Ihre Seite bereits aus anderen Gründen die jQuery-Bibliothek verwendet, sollten Sie WebYep mitteilen, diese nicht erneut einzubinden. Dies erfolgt in WebYeps Konfigurationsdatei konfiguration.php mittels:

$webyep_bDoNotIncludejQuery = true;


Seitenanfang

Eigenschaften des Bild-Elementes


Das Eigenschaftsfenster für das Bild-Element

Bildname

Ein Name für das Bild-Element. Der Bildname wird in der Webseite im "Bearbeiten"-Modus angezeigt, damit die BenutzerInnen bei der Eingabe die verschiedenen Bild-Elemente unterscheiden können.

Inhalte

Ist hier "für diese Seite" eingestellt, so ist dieses Bild-Element von den Bild-Elementen anderer Seiten unabhängig, auch wenn diese den gleichen Bildnamen aufweisen. Wenn Sie möchten, dass die Bild-Elemente mit diesem Bildnamen auf allen Seiten den gleichen Inhalt aufweisen, ist dieses Popupmenü auf "für alle Seiten" zu setzen.

Breite / Höhe

Gibt die Breite bzw. Höhe des Bildes an (siehe Eigenschaft "Vorschaubild"). Wenn keine Größenänderung am hochgeladenen Bild vorgenommen werden soll, können diese Eigenschaften leer gelassen werden.

Wenn eine dieser Eigenschaften angegeben wird, sorgt WebYep dafür, dass das Bild die angegebene Breite oder Höhe nicht überschreitet.

Wenn beide Eigenschaften angegeben werden, wird das verkleinerte Bild weder die angegebene Höhe noch die angegebene Breite überschreiten.

Das Seitenverhältnis des Bildes bleibt dabei immer unangetastet.

Hinweis: Die Größenänderung (Verkleinerung) des Bildes kann nur durchgeführt werden, wenn am Webserver die PHP-Erweiterung "GD" installiert ist. Wenn nicht, so wird im Bild-Ändern-Fenster ein Warnhinweis angezeigt und das Bild wird nur in den entsprechenden Dimensionen angezeigt aber nicht tatsächlich umgerechnet (die Datenmenge bleibt also unverändert).

Vorschaubild

Ist diese Option aktiviert, dann wird ein Vorschaubild berechnet, das anstelle des Originals in der Seite dargestellt wird. Die Größe des Vorschaubildes wird durch die Eigenschaften "Höhe des Vorschaubildes" und/oder "Breite des Vorschaubildes" bestimmt. Ein Klick auf dieses Vorschaubild im Webbrowser öffnet dann das Originalbild in einem Popup-Fenster.

Ist die Option nicht aktiviert, so wird kein Vorschaubild berechnet und stattdessen das Originalbild auf die durch Höhe und/oder Breite definierte Größe verkleinert (wenn eine dieser Eigenschaften angegeben wurde). Ein Klick auf das Bild im Webbrowser öffnet dann auch kein Popup-Fenster.

Breite / Höhe des Vorschaubildes

Gibt die Breite bzw. Höhe des Vorschaubildes an (siehe Eigenschaft "Vorschaubild").

Seite (URL)

Der URL (bzw. Dateiname) einer Seite, auf die beim Klick auf dieses Bild verwiesen werden soll. Dadurch wird dieses Bild-Element zum Link.

Bei Verwendung dieser Option für Bild-Elemente die sich in einer Schleife (WebYep-Schleifen-Element) befinden (um mehrere Bilder zB. untereinander darzustellen), verhält sich der Bild-Link dann wie ein WebYep-Menü-Element: Die Seite auf die verwiesen wird kann unterschiedliche Inhalte aufweisen, je nachdem welches der Bilder in der Schleife angeklickt wurde. So kann mit Schleife und Bild ein grafisches Menü aufgebaut werden.

Ziel (frame) - bei Verwendungen von Rahmen (target frame)

Wenn die unter der Eigenschaft "Seite (URL)" angegebene Seite beim Klick auf das Bild in einem anderen Rahmen dargestellt werden soll, ist bei der Eigenschaft "Ziel (frame)" der Name des betreffenden Rahmens anzugeben.


Seitenanfang
© 2011, Objective Development