Bild 14.1: Detailansicht des Portfolio

Eine Schwierigkeit war der Zurück zur Übersicht-Verweis, da ich zwei Kategorien habe, Webdesign und Programmierung, und diese beiden Bereiche im Portfolio trennen wollte. Also zwei verschiedene Menüverweise jeweils als Kategorieblog.

Doch der Reihe nach:

Eine neue App mit dem Titel Portfolio. Alle Elemente und sowohl App Root als auch Haupteintrag auf Ja.

Entnehmen Sie die Felder der Abbildung:

Bild 14.2; Die felder im Adminformular.

Die Felder für die Versionen sind mit den gängigen Joomla!-Versionen vorbelegt. Für das Jahr habe ich ein Textfeld gewählt, da mir die Eingabe der Jahreszahl mit dem Datumsfeld zu umständlich erschien. Für die Projektbilder kommt ein Feld X zur Anwendung, um beliebig viele Screenshots eingeben zu können, wobei ich den Standard auf 5, Maximum auf 10 und Minimum auf 0 gesetzt habe. Nachfolgend eine Detailbeschreibung der Felder. Bis auf die Felder Projekttitel und Projektkategorie wurden die Felder als Benutzerdefiniert – Article – introtext gespeichert.

• Kurztext – Textbereich – Spalten: 30, Reihen: 10, Mindestlänge: 0, Maximallänge: 255, Neue Zeilen: Absätze (?), Lösche Leerzeilen: Nein
  Mit diesem Feld gebe ich den Text im Intro an, also einen kurzen Übersichtstext. Der sollte nicht weiter gestaltet werden können, weshalb ich auf den WYSIWYGEditor verzichtet habe.
• Projektbeschreibung – WYSIWYG-Editor – Ort: Standard, Breite x Höhe: 600 x 400, Importierer: Nein
  Dieser Text wird dann in der Detailansicht (Inhalt) angezeigt. Da ich eventuell einmal etwas fett oder eine Aufzählung machen möchte, brauche ich einen Editor.
• Technik – WYSIWYG-Editor – wie Projektbeschreibung.
  Meine Gedanken dazu sind, dass ich einen Absatz machen wollte, in dem installierte Erweiterungen unter dem eigentlichen Beschreibungstext angezeigt werden sollen. Damit erreiche ich bei jedem Projekt ein einheitliches Aussehen.
• Projektkategorie – Kategorie
       Speicherung – Standard – Artikel – catid
• Version – Einfachauswahl – Standard Wert: Joomla! 3.2, Optionen: [Die jeweiligen Joomla!-Versionen]
• Jahr – Text
• Link zur Site – Link – Zeige Text: Verberge, Zeige Ziel: Zeige, Standard Ziel: _blank, Zeige Klasse: Verberge, Zeige Vorschau: Zeige, Größe: 32, Mindestlänge: 0, Maximallänge: 255
• Projektbilder – Feld X – Feld (Formular): einzelbild, Standard: 5, Maximum: 10, Minimum: 0, alles andere auf Ja
• Einzelbild (wird nicht im Formular angezeigt) – Bild – Ordner: images/portfolio/, 1 Ordner / Inhalt: Nein, 1 Ordner / Benutzer: Nein, Erlaubte Erweiterungen: Image, Maximalgröße: 5 MB, Zeige Vorschau: Miniaturbild 1, Zeige Löschen-Kästchen: Zeige, Zeige spezifischen Pfad: Verberge, Größe: 32, Erweiterter Modus: Nein
• Miniaturbilderstellung: Beim Hochladen
        Anzeige als Standard: Miniaturbild 1
        Bild: Original
        Miniaturbild 1: Max Anpassung – 150 x 150 px
        Miniaturbild 2: Max Anpassung – 1024 x 800 px
        Miniaturbild 3: Max Anpassung – 400 x 250 px
• Introbild – Bild – Ordner: images/portfolio/introbilder/, 1 Ordner / Inhalt: Ja, 1 Ordner / Benutzer: Nein, Erlaubte Erweiterungen: Image, Maximalgröße: 5 MB, Zeige Vorschau: Miniaturbild 5, Zeige Löschen-Kästchen: Zeige, Zeige spezifischen Pfad: Verberge, Größe: 32, Erweiterter Modus: Ja (JSON-formatierter
  Wert), Zeige Titel: Titel, Zeige »alternative« Beschreibung: Zeige alt-attribut
• Miniaturbilderstellung: Immer, wenn nicht vorhanden
        Anzeige als Standard: Miniaturbild 2
        Bild: Original
        Miniaturbild 1: Max Anpassung – 150 x 150 px
          Miniaturbild 3: Max Anpassung – 1000 x 800 px
         Miniaturbild 5: Max Anpassung – 300 x 200 px
• Projekttitel – Text
       Speicherung – Standard – Artikel – title
• Zurück-Link – Link – Alles auf Verberge gesetzt, Standard Text: Zurück zur Übersicht, Standard Ziel: _self, Größe: 70, Mindestlänge: 0, Maximallänge: 255
• Oder-Zurück-Link – Exakt gleiche Einstellung wie der »Zurück-Link«, einschließlich des gleichen Standardtextes. Erläuterung etwas weiter unten.

Da ich als Einziger für das Portfolio zuständig bin, gibt es nur ein Admin Formular, ein Seitenformular wird nicht benötigt.

Das Intro umfasst die Felder: Kurztext, Jahr, Version und Introbild.

Der Inhalt erhält die Felder: Projektbeschreibung, Technik, Link zur Site, Jahr, Version, Zurück-Link, Oder-Zurück-Link und Projektbilder.

Verlinkt wird das Ganze als Kategorieblog. Und an dieser Stelle wurde ein Problem sichtbar: Ich wollte natürlich beim Zurück zur Übersicht automatisch die richtige Verlinkung haben. Ergo musste ich SEBLOD kundtun: Wenn in der Kategorie Webdesign ausgewählt ist, nimm diese Übersichts-URL, und wenn die Kategorie Programmierung ausgewählt ist, nimm die andere Übersichts-URL.

Eigentlich sollte das mit den abhängigen Feldern kein Problem darstellen. Doch leider kann keine SONST-Bedingung definiert werden. Also: WENN das, DANN nimm dieses, SONST das – ist etwas, was nicht funktioniert in SEBLOD. Also blieb nur, zwei Felder zu nehmen und bei beiden Feldern eine Abhängigkeit auf die Kategorie einzustellen.

Das eine Feld prüft, ob die Kategorie Webdesign heißt. Wenn ja, wird eine bestimmte URL in das Textfeld geschrieben. Wenn nicht, wird es einfach leer gelassen. Das andere Feld macht das Gleiche, prüft lediglich die Kategorie auf Programmierung ab. Glücklicherweise werden leere Felder nicht angezeigt, somit wird nur der eine korrekte Link zur Übersicht ausgegeben.

Um das alles einzustellen, klicken Sie im Admin Formular auf die Nummer 5 und klicken beim Zurück-Link auf Hinzufügen. Geben Sie nun Folgendes ein:

Dieses Feld ist ausgefüllt [Ihr Link zu Ihrer Übersicht] #form# [Haken gesetzt] WENN Projektkategorie is Equal 43

43 ist bei mir die Kategorie-ID für Programmierung. Bei Ihnen wird das vermutlich abweichen. Klicken Sie der Einfachheit halber die orangefarbenen Pfeile an und wählen Sie die passende Kategorie aus.

Exakt das Gleiche müssen Sie bei dem Oder-Zurück-Link noch einmal machen, allerdings mit der Kategorie-ID für das Webdesign.

Bild 14.3: Die richtige URL für den Zurück-Link.

Ich habe beide Felder im Admin Formular auf Nur Leserechte gesetzt, da die URLs letztlich fest vorgegeben sind und ich mich darum auch nicht mehr kümmern will.

Bild 14.4: Wird die Kategorie Programmierung ausgewählt, erhält das obere Feld den passenden Link, und das untere bleibt leer. Bei der Kategorie Webdesign ist es umgekehrt. Im Frontend wird nur das jeweils beschriebene Feld ausgegeben.

14.1       Gestaltung

Im Intro habe ich zunächst beim Jahr die Nummer 3 ausgewählt und dann in der Typographie Kursiv. Beim Introbild wird die Typographie Bild ausgewählt. Hier klicken Sie bitte auf das kleine Pluszeichen und stellen Folgendes ein:

• Anzeige als Standard: Miniaturbild 5 – Breite/Höhe: Automatisch
• Modales Fenster: Miniaturbild 3 – Breite/Höhe: 1000 x 800 px
• Pfad: Relative

Das Intro ist der erste Überblick, den Sie sehen, wenn Sie den Link direkt aufrufen. Das Bild können Sie anklicken, und es öffnet sich in einem modalen Fenster, dazu ein Button, mit dem Sie in die Detailansicht wechseln können. WEITERLESEN ist eine Joomla!-Eigenschaft. Eventuell müssen Sie die Joomla!-Optionen bei den Beiträgen oder den Menüverweis entsprechend einstellen, sollte dieser nicht angezeigt werden.

Bild 14.5: Das Intro mit anklickbarem Bild, das sich im modalen Fenster öffnet (Lightbox), und einem WEITERLESEN-Button, um in die Detailansicht zu kommen.

Im Inhalt habe ich bei der Typographie (Nummer 3) bei Jahr und Version ebenfalls Kursiv ausgewählt und bei den Projektbildern auch wieder das Bild, wobei ich hier als Standard: Miniaturbild 1 und für das modale Fenster das Miniaturbild 5 gewählt habe. Breite und Höhe bleiben auf Automatisch.

Beim Menüaufruf habe ich bei den beiden Referenzverweisen im Menü eingestellt, dass die Kategoriebeschreibung (Tab Kategorieoptionen) angezeigt, und im Tab Beitragsoptionen, dass WEITERLESEN angezeigt werden soll, da ich dieses in den globalen Optionen jeweils ausgeschaltet habe.

Was das Ganze im Frontend betrifft, also die Gestaltung mit CSS, kommen Sie nicht umhin, sich mit CSS und dessen Auffinden näher zu befassen. Sie finden auf meiner Tutorialsite^[1] eine Einführung in CSS und auch, wie CSS-Formatierungen und zugehörige Klassen und IDs gefunden werden können. Alles andere würde den Rahmen dieses Buches sprengen.

Sie können sich das Praxisbeispiel auf meiner Website time4mambo.de ansehen.

[1] http://www.time4joomla.de – dort unter »Tutorials zu 1.6 bis 3.5 / Templates«