Dieses Tutorial steht als PDF-Download im Download-Center zur Verfügung.
Als ich das erste Mal Seblod installiert hatte, habe ich große unverständliche Augen gemacht, ein wenig herumgeklickert, versucht die Komponente zu begreifen und schließlich das ganze wieder deinstalliert. Nun habe ich eine Anforderung erhalten, die sich mit den vorhandenen Bordmitteln und mit verschiedener Erweiterungen nur sehr schwer umsetzen lässt und um nicht vollends in endlosen Programmierungen abzudriften, beschloss ich, mir das "Wundermittel Seblod" genauer anzusehen.
Mittlerweile habe ich einige Stunden Tutorials studiert, viel ausprobiert und bin, ehrlich gesagt, sehr begeistert über dieses CCK! Es gibt inzwischen auch deutschsprachige Videos zu Seblod auf YouTube. Überall wird aber stets gesagt, dass Seblod nichts für Anfänger ist und oftmals entstehen in den Videos von den Dozenten auch Fehler, was einem nicht unbedingt Sicherheit als Einsteiger in Seblod verspricht. In meinem Tutorial werde ich mich zunächst um die einfachen Grundlagen kümmern. Kompliziert können wir es später immer noch machen.
Was ist Seblod?
Seblod ist ein CCK - ein Content Construction Kid. Damit lassen sich eigene Formulare herstellen, die komplexe Anwendungen ersetzen, bzw. herstellen können. Ein einfaches Beispiel dazu: Wenn Sie einen neuen Beitrag schreiben, dann haben Sie oben links den Titel, den Alias, die Kategorie und einige weitere Felder und dann den eigentlichen Editor. Rechts haben Sie einige Optionen zum Beitrag. Reichen Sie über das Frontend einen neuen Beitrag ein, haben Sie ein paar weniger Felder, aber meist immer noch eine Reihe Felder, die Sie eigentlich gar nicht brauchen oder in einem Redaktionssystem entweder mühselig per Rechtesystem "verstecken" oder oft genug auch in Kauf nehmen müssen. Mit Seblod könnten Sie diese Eingabeformulare für einen Beitrag komplett umgestalten und tatsächlich nur die Felder zur Anzeige bringen, die Sie benötigen oder auch neue Felder dazu geben, wie beispielsweise Checkboxen oder Radioauswahlfelder und vieles andere. Sie könne sich komplett neue Masken erstellen und beispielsweise als Beitrag abspeichern.
In diesem Tutorail beschreibe ich, wie Sie ein Portfolio mit Seblod erstellen können. Spätestens dann werden Sie erahnen, wie mächtig Seblod ist. Damit können Sie Joomla entscheidend aufbrechen und eigentlich gibt es dann keine Grenzen mehr um Joomla.
Wie funktioniert Seblod?
Seblod selber können Sie sowohl über das Komponentenmenü, als auch mit direkten Klick auf "Construction" aufrufen:
Die einzelnen Bereiche wiederrum können ebenfalls über mehrere Varianten aufgerufen werden:
Schauen wir uns Joomla im Detail an, stellen wir fest, dass nahezu alles aus Formularen besteht, in denen wir etwas eingeben und deren Inhalte nach dem Speichern in die Datenbank geschrieben werden. Rufen wir dann das Frontend auf und lassen uns beispielsweise einen Beitrag anzeigen, dann besteht dieser Beitrag im Grunde auch aus einem Formular. Nur das statt der Eingabegfelder deren Inhalt angezeigt wird. Nichts anderes macht Seblod: Wir erstellen Formulare, geben dort Informationen ein, speichern alles und lassen uns dann die Daten, die wir zuvor eingegeben haben, anzeigen.
Die Formulare erstellen wir unter dem Tab "Forms Content Types". Den Tab "Fields" finden wir auch unter den "Forms Content Types" wieder. Wenn wir keine Formulare zu den bereits bestehenden Joomlaerweiterungen erstellen wollen, können wir unter den Tab "App Folder" unsere eigene Erweiterung quasi anlegen. Den "Apps Folder" finden Sie in der Tableiste in Form eines Ordner-Icons. Das sind die drei Tabs, die uns zunächst interessieren. "Lists & Search Types", sowie "Sites" vernachlässige ich in diesem Tutorial.
Optionen und Preferences
Bevor wir in die eigentliche Erstellung gehen, noch einen kleinen Abstecher in die Optionen und Preferences. Beides finden Sie in der Seblod-Übersicht oben rechts.
In den Preferences lassen Sie am besten zunächst alles so, wie es vorgegeben ist. Lediglich den "Style" können Sie Ihren Bedürfnissen anpassen. Den Unterschied sehen Sie insbesondere in den "Forms & Content Types". In meinen Screenshots sehen Sie den "indigo_dye-Style".
In den "Optionen" sollten Sie auch erst dann etwas verändern, wenn Sie wissen, was Sie da tun. Unter dem Tab "Language" können Sie allerdings die deutsche Sprache downloaden. Bei mir wurde diese aber erst nach einem Browser-Neustart angezeigt.
App Folder
Die App Folder sind letztlich nichts anderes, als eine Zergliederung vorhandener Strukturen. Um das etwas besser zu verstehen, schauen wir uns etwas Altbekanntes an - die Kategorien:
Seblod verändert nach der Installation bereits die bisherigen Standarderweiterungen in Joomla. Wenn Sie jetzt eine neue Kategorie eingeben, sieht das etwas anders aus, als zuvor - es ist aber noch alles vorhanden. Lediglich die Felder sind etwas anders sortiert. Innerhalb der Kategorien befinden sich rechts die "Basic Options":
Diese Gruppe findet sich auch im Tab "Fields" wieder. Der Einfachheit habe ich einen entsprechenden Filter in der Übersicht gesetzt. Dann sehen Sie direkt die drei Felder, die in den "Basic Options" stehen:
Im App Folder sehen Sie also die Struktur einer Erweiterung. Diese einzelnen Strukturen können Sie natürlich nach Ihren eigenen Bedürfnissen anpasssen. Sie können Felder wegnehmen (was beispielsweise bei der Erstellung von Beiträgen innerhalb eines Redaktionssystems sehr interessant sein kann) oder Felder dazufügen (beispielsweise haben Sie auch Zugriff auf die Felder der Benutzeranmeldung).
Wenn Sie eine eigene Erweiterung mit Seblod erstellen möchten, fügen Sie einfach einen neuen App Folder hinzu. Ich möchte mir mit Seblod ein Portfolio erstellen. Also einen Text, in der ich meine vergangenen Projekte beschreibe, ein paar Bilder, die sich in einer Lightbox vergrößern lassen und die Joomlaversion, in der ich seinerzeit das Projekt erstellt habe, als Auswahl per Radiobuttons. Dazu noch das Jahr, in dem ich das Projekt erstellt habe und natürlich den Namen nicht vergessen. All das gibt es auch als Erweiterung in den Extensions, aber man muss dort suchen und zumindest ich habe dort nichts wirklich zufriedenstellendes gefunden, als ich das letzte Mal dort entsprechendes suchte.
Ich erstelle also einen neuen App Folder Namens "Portfolio". Da es eine eigenständige Erweiterung werden soll, die nicht innerhalb einer vorhandenen Erweiterung läuft, gebe ich als Parent "Top" an. Wenn Sie möchten, können Sie eine Beschreibung für sich mit angeben. Color, Character Color und Character dient lediglich der besseren Übersicht, hat ansonsten aber keine Funktion. Ich vergebe ein saftiges Grün mit weißer Schrift und den Buchstabenkürzel "Po" für "Portfolio" - für die bessere Übersicht. Unter Elements gebe ich an, dass diese Erweiterung alles, was angegeben werden kann, enthält. Wichtig ist, bei Features ein "Yes" zu setzen, damit ich diesen neuen App Folder später auswählen kann und meine Felder einwandfrei zuordnen kann. Was ich genau damit meine, klärt sich gleich...
Nach dem Speichern finden wir, vermutlich etwas weiter unten, unsere neue App Folder:
Fields
Wechseln Sie nun in den Tab "Fields". Dort geben wir nun unsere Felder ein. Um nicht jedes Mal unseren "App Folder" auswählen zu müssen, ein kleiner Tipp: geben Sie im Filter oben "Portfolio" ein. Da wir noch keine Felder angelegt haben, ist die Liste zunächst leer. Klicken Sie nun bitte auf "Neu". Im App Folder ist nun automatisch unser "Portfolio" eingetragen. Wenn das bei Ihnen nicht so ist, müssen Sie das explizit auswählen. In Title geben Sie den Namen des Feldes ein. In meinem Beispiel nenne ich das Feld "Projektname". Der Alias wird automatisch mit dem Title befüllt, wenn Sie dort nichts hineinschreiben, können aber natürlich einen eigenen Alias angeben. Der Alias wird von Joomla benötigt. Unter Type erhalten Sie eine lange Liste möglicher Formularfelder. Die Liste gibt Ihnen einen kleinen Eindruck, was mit Seblod alles möglich ist. Wir wählen "Text" aus. Sie finden den Typ "Text" in der Gruppe "Form".
Label kann später ausgegeben werden und unter Default Value können Sie einen festen Wert vorgeben. Die Maßangaben sind so, wie Sie sie aus Formularen kennen. Wenn Sie diesbezüglich unsicher sind, finden Sie unter den "Nützlichen Links" auf meinen Seiten weiterführende Webseiten.
Interessant und nicht einfach zu verstehen, ist die Gruppe Storage. Hier geben Sie an, wo und wie die Daten in der Datenbank abgelegt werden sollen. Sie können vorhandene Datenbankspalten auswählen oder neue Spalten erstellen. Neue Spalten machen beispielsweise Sinn, wenn später programmiert und auf die einzelnen Inhalte zugegriffen werden soll. Der Projektname soll später auswählbar sein und per Menü angesprochen werden. Deswegen speichere ich den Inhalt in das Datenbanktabellenfeld "title". In "title" stehen auch die Beitragsüberschriften. Somit wird unser Portfoliodatensatz später in der Beitragsübersicht angezeigt werden und kann damit auch für das Menü ausgewählt werden.
Ein möglicher Fehler lauert im Format. Wenn Sie hier nicht Standard, sondern Custom auswählen, kann es sein, dass Sie später merkwürdige Titelnamen angezeigt bekommen.
Klicken Sie nun oben auf "Speichern & Neu".
Das nächste Feld trägt den Namen "Jahr" und der Typ ist ein "Calendar" (in der Gruppe "Picker"). Im Format tragen Sie nur das "Y" ein. Damit wird ausschließlich das Jahr angezeigt. Als Default Value bietet sich das aktuelle Jahr an. Unter Storage lege ich den Inhalt in das sogenannte Seblod-Sammelfeld Namens "introtext" - Custom-Article-introtext. Vermutlich wird das bereits voreingestellt sein. Diese Einstellung übernehme ich auch für die restlichen Felder.
Wieder Speichern & Neu und ein Feld für die "Projektbeschreibung". Dafür wähle ich den Type "Wysiwyg Editor" aus.
Für das Feld "Version" wähle ich den Type "Radio" aus. Der Bereich Construction unterscheidet sich nun deutlich. Wenn Sie auf das grüne Plus klicken, erhalten Sie Platz für weitere Optionen. Mit dem roten Minus löschen Sie eine Optionsauswahl und mit den blauen Kreisen können Sie die Anordnung per Drag and Drop verändern.
Es wird Zeit, dass wir uns nun um die Bilder für unsere Projekte kümmern. Da bietet Seblod einige hübsche Dinge an. Zunächst fügen wir ein Feld für den Bild-Upload ein. Also als Titel gebe ich "Bild" ein und als Type "Image", welches Sie in der Gruppe "Upload" finden (fast ganz unten). Gehen wir anschließend zunächst in die Gruppe Processing. Dort können Sie verschiedene Bildgrößen vorgeben. Im Beispiel gebe ich zwei Größen bei den Thumbnails vor: jeweils "Max Fit" und einmal 100x100px und einmal 800x600px. Die kleinen werden in der Übersicht angezeigt und das große in einer Lightbox.
Nun ergibt in der Gruppe Construction das "Show Preview" Sinn, welches nämlich auf das Bild verzweigt, welches nach dem Speichern angezeigt werden soll. Preview = Vorschau.Anfangs hatte ich gedacht, dass hier die Lightbox eingestellt wird, die für die Anzeige im Frontend verantwortlich ist, was aber ein Irrtum meinerseits war. An dieser Stelle geht es nur um die Ansicht im Backend. Also nach dem speichern, bzw. editieren des Datensatzes/Contents.
Wenn Sie den Advanced Mode auf "Yes" stellen, können Sie später einen Titel und einen Alternativtext zu jedem Bild eingeben. Ansonsten wird als Alternativtext der Bildname automatisch eingetragen. Als Folder können Sie auch einen Pfad zu einem Ordner angeben, den es noch nicht gibt. Dieser wird dann automatisch angelegt.
Momentan wäre nur ein einziges Bild einfügbar in unser Portfolio. Aber schön wäre natürlich, wenn wir so viele Bilder, wie Bedarf ist, einfügen könnten. Dazu legen wir ein neues Feld an, merken uns aber den Titel des soeben angelegten Image-Feldes. Wenn Sie meinem Beispiel folgen, wäre das der Name "Bild". Das nächste Feld nenne ich "Projektbilder" und wähle als Type "Field X" aus. In der Gruppe Construction erhalten Sie nun das Feld "Field (Form)". Dort tragen Sie den gemerkten Namen ein. Als den Bezug zu "Bild".
Wenn Sie das nun speichern, werden Sie später die gleiche Mimik haben, wie eben bei den Radiofeldern. Also die Plus, Minus und Verschiebe-Buttons pro Bild. Damit können Sie beliebig viele Bilder pro Eintrag ins Portfolio hochladen.
Soweit so gut. Nun fehlt eigentlich nur noch eine Kategorie. Denn dann könnten wir einen Menüverweis auf einen Kategorieblog oder -liste setzen und damit unser Portfolio anzeigen. Also legen wir ein Feld Namens "Kategorie" an und wählen als Type "Category" aus. Dieses finden Sie in der Gruppe "Joomla Library (JForms)". Möchten Sie eine bestimmte Kategorie als Default vorgeben, dann müssen Sie die Kategorie-ID eintragen. Unter Storage nun wählen wir Standard-Article-catid aus. Die catid sorgt dafür, dass unsere Auswahl innerhalb Joomlas gespeichert wird und somit der Menüverweis einwandfrei funktioniert.
Damit haben wir alle Felder zusammen.
Forms & Content Types
Wechseln Sie nun bitte zum Tab "Forms & Content Types" und klicken oben beherzt auf "Neu". Unter Skeleton wählen Sie bitte "Portfolio" aus. Hätten Sie im App Folder bei Features nicht "Yes" angekreuzt, könnten Sie das hier nun auch nicht auswählen. Danach drücken Sie den Button "Create Form & Content Type". Warten Sie ein, zwei Sekunden und es baut sich eine Menge Bildschirm auf.
Hier nun werden die verschiedenen Ansichten, die Formulare, wie sie im Browser sichtbar sind, zusammengebaut. Oben werden die Views nach Admin Form, Site Form, Intro und Content unterschieden, zu denen jeweils sehr unterschiedliche und auch eine Vielzahl jeweils eingestellt werden kann. Daneben gibt es noch verschiedene Options für jede Sicht einzustellen und darunter schließlich werden die Felder zu den verschiedenen Views zugeordnet.
Auf den ersten Blick sieht das alles sehr verwirrend aus, aber bringen wir ein wenig Licht in die Katakomben.
Wählen wir zuerst die Admin Form. Also der Form, in der wir im Backend Daten eingeben können.
Ganz oben haben Sie ein Icon Namens "Positions". Die spiegeln die Auswahlbereiche unten wider. Also "#MAINBODY", #BOTTOMBODY", etc. Diese Positionen beziehen sich nicht auf Ihr installiertes und aktiviertes Joomla-Template, sondern betrifft ausschließlich den Contentbereich. Das Formular über das Sie Daten eingeben, bzw. im Frontend anzeigen.
Zur Erinnerung: Geben Sie einen Beitrag in Joomla ein, haben Sie über ca. zwei Drittel u.a. den Wysiwyg-Editor und rechts eine Spalte mit den Optionen. Das ist die Anordnung eines Formulars. Und diese Anordnung können Sie nun frei gestalten.
Ich habe mich in meinem Beispiel dafür entschieden, in der oberen Reihe die Felder "Projektname", das "Jahr" und die "Kategorie" nebeneinander anzeigen zu lassen, in dem ich sie jeweils den Positionen "#TOP-A", "#TOP-B" und "#TOP-C" zugeordnet habe.
Die Zuordnung können Sie auf verschiedenen Arten machen:
- Sie können eines der Felder rechts markieren und mit dem Pfeil nach links oder umgekehrt verschieben und so auch die Reihenfolge verändern.
- Halten Sie die Strg-Taste fest, können Sie mehrere Felder gleichzeitig auswählen.
- Wenn Sie in einer Position ganz rechts den kleinen Radiobutton markieren - also einen blauen Punkt dort setzen - dann schieben Sie die Felder rechts an die so ausgewählte Position mit dem Pfeilbutton.
- Jedes Feld hat auch einen Pfeil, womit Sie die Felder auch einzeln direkt verschieben können.
- Sie können die einzelnen Felder aber auch an dem geriffelten Bereich mit der Maus "anfassen" und so mittels Drag and Drop bewegen.
So können Sie eine Eingabemaske erstellen.
Wenn Sie das Bild-Feld einfügen möchten, wählen Sie das Feld mit dem Field X aus. Das beinhaltet automatisch das Upload-Feld.
So können Sie das nun für die anderen Ansichten jeweils wiederholen. Site Form ist die Eingabemaske im Frontend, wenn Sie entsprechende Berechtigungen zum Direkteingeben haben. Intro ist der Überblick und Content der Gesamtblick. Hier meine Content-Maske:
Eine Kleinigkeit brauchen wir noch, damit das mit der Lightbox einwandfrei funktioniert. Denn leider reicht die Einstellung, die wir im Image-Field gemacht haben nicht aus. Dazu wählen Sie rechts die Nummer "3" aus und dann in der Spalte "Typographie" (steht ganz oben im ersten dunkelblauen Bereich (im Beispiel ist das "#MAINBODY")) "Image" bei unseren Projektbildern aus. Danach erscheint rechts daneben ein kleines "+" auf das Sie bitte klicken.
In dem dann erscheinen Fenster stellen Sie ein, welche Bilder in der Lightbox/Modal Box angezeigt werden.
Sie können in diesem Seblod-Bereich noch eine Unmenge toller Dinge tun. Aber für ein Einführungstutorial muss es hier reichen, da es sonst den Rahmen sprengt.
Eingabe in unser Portfolio im Backend
Das ist nun sehr interessant von Seblod gelöst. Wechseln Sie in die Beitragsübersicht. Wenn Sie nun mit der Maus über das große Icon "Neu" ganz oben fahren, klappt ein Menü auf. Dort können Sie das Portfolio auswählen.
Meine Ausgabe im Frontend:
Wenn ich auf eines der Thumbnails klicke, öffnet sich odnungsgemäß eine Lightbox.
Das ganze kann nun natürlich noch verschönert werden, was aber Gegenstand eines anderen Tutorials sein wird.
Nachtrag:
Mittlerweile habe ich das Portfolio nach meinen Vorstellungen erstellt und benutze es auf meiner Firmenseite. Im Wesentlichen baue ich auf dieses Einführungstutorial auf, habe aber natürlich einige CSS-Formatierungen eingefügt.
Zeitlich habe ich ca. einen halben Tag benötigt. Hätte ich eine Komponente programmieren wollen, hätte ich deutlich länger dafür benötigt.
Wer es sich anschauen möchte: http://www.time4mambo.de/webdesign/referenz.html