screencast

Um gleich eine realistische Herausforderung zu haben, lassen Sie uns eine erste Seite auf Ihrer neuen Website erstellen. Es soll eine "Über uns"-Seite werden, auf der Sie etwas über Ihre Firma, Ihr Projekt oder sich selbst erzählen. Meistens enthält eine solche Seite ein paar Überschriften, Text und Bilder.

Statischer vs. dynamischer Inhalt

Eine "Über uns"-Seite erstellt man einmal, verlinkt sie im Menü und muss sie im weiteren Verlauf nur noch verändern. Sie hat einen statischen Charakter. Eine Pressemitteilung oder ein Blogeintrag haben dagegen einen dynamischen Charakter.

• Bei einer statischen Seite spielen das Erstellungsdatum und der Autor keine Rolle, bei einer dynamischen Seite schon.
• Statische Seiten sind fast immer im Menü verlinkt, dynamische Seite sind über Auflistungen erreichbar.

Der Plan

Auf der "Über uns"-Seite soll es die folgenden Elemente geben:

• eine Überschrift
• einen Text
• ein Bild
• Die Seite soll nicht auf der Startseite erscheinen.
• Wir wollen einen Link zur Seite im oberen horizontalen Menü (top).

Das klingt zunächst mal einfach.
Melden Sie sich im Administrationsinterface an.

Schritt 1 – Inhalt erstellen

Gehen Sie in die Beitragsverwaltung (Inhalt - Beiträge). Dort sehen Sie eventuell noch Ihre unveröffentlichten Beispieldaten (siehe Abbildung 1).

Abbildung 1: Beiträge

Nach einem Klick auf das Icon Neu landen Sie im entsprechenden Formular und können den Titel und den Text eintragen. Im oberen Bereich unter dem Titel wählen Sie als Kategorie "uncategorized". Diese Kategorie wurde mit den Beispieldaten angelegt, daher die englische Bezeichnung. Vorstellen (Featured) gibt an, ob der Inhalt in einem besonderen Blog-Layout angezeigt werden soll. Die Funktion wird benutzt, um Beiträge auf die Startseite zu bringen. Das ist auch in Joomla! 2.5 noch so, aber die einzelnen Begriffe sind leicht mißverständlich. Wählen Sie Nein. Im Editorfenster können Sie jetzt Ihren Text eingeben. Joomla! bringt als Standard den TinyMC-Editor mit (siehe Abbildung 2).

Abbildung 2: Bearbeitungsformular für Beiträge

Ein Bild von einer URL einfügen

Als erste Variante wollen wir ein bereits im Web vorhandenes Bild nehmen, zum Beispiel dieses:
http://farm2.staticflickr.com/1198/898250237_78a0e75cba_m_d.jpg (Figure 3)

Abbildung 3: Beispielbild

Positionieren Sie den Cursor an die Stelle im Text, an der das Bild erscheinen soll. Klicken Sie auf das Bild-Icon in der Editor-Toolbar, und fügen Sie die URL im erscheinenden Popup-Fenster ein. Positionieren Sie das Bild left, und geben Sie jeweils 10 Pixel vertical und horizontal space ein (siehe Abbildung 4).

Abbildung 4: Bild einfügen

Das Bild erscheint in Ihrem Editorfenster. Klicken Sie auf Speichern, und Ihr Artikel ist gespeichert. Zum Speichern gibt es mehrere Möglichkeiten:

• Speichern: Der Artikel wird gespeichert. Der Dialog wird nicht verlassen, das ist gut zum Zwischenspeichern.
• Speichern & Schließen: Der Artikel wird gespeichert, und der Dialog wird verlassen.
• Speichern & Neu: Der Artikel wird gespeichert, der Dialog wird verlassen, und ein neuer Artikeldialog wird aufgerufen.

Verlassen Sie den Dialog.

Schritt 2 – Menülink erstellen

Der Beitrag ist erstellt, taucht aber nicht auf der Website auf. Wir brauchen einen Link, damit er erscheint.

Gehen Sie also in den Menümanager des Top-Menüs (Menüs - Top), und klicken Sie auf das Neu-Icon.

Hinweis: Top ist der Name der Position im Standardtemplate. Wenn Sie nicht das Standardtemplate und die Beispieldaten benutzen, dann existiert das Top Menü nicht oder hat einen anderen Namen.

Klicken Sie neben dem Feld Menütyp auf den Button mit der Aufschrift Wählen. Ein Fenster mit verschiedenen Links öffnet sich. Klicken Sie auf den Link Einzelner Beitrag (siehe Abbildung 5).

Abbildung 5: Menütyp-Auswahl

Jetzt müssen Sie den gewünschten Beitrag auswählen. Klicken Sie dazu im rechten Bereich (Beitrag wählen) auf Auswählen/Wechseln. You will see a search box with all articles. Sie erhalten ein Suchfenster mit allen Beitägen. Sollten Sie die Über uns-Seite nicht auf Anhieb finden, können Sie im Suchfenster nach dem Titel suchen und gewünschten Beitrag durch einen Klick auf den Titel auswählen (siehe Abbildung 6).

Abbildung 6: Menütyp-Auswahl – Suche

Geben Sie einen Titel für den Link "Über uns" ein, und achten Sie darauf, dass im Feld Menu Location wirklich top steht. Die restlichen Einstellungen können Sie zunächst beibehalten.

Schritt 3 – "Über uns" auf der Website

Wenn Sie nun Ihre Website neu laden, werden Sie den neuen Link entdecken. Durch einen Klick auf den Link landen Sie auf Ihrer ersten Seite – herzlichen Glückwunsch (siehe Abbildung 7).

Abbildung 7: Die "Über uns"-Seite

Schritt 4 – Bild-Upload

Falls Ihr Bild nicht bereits im Internet vorhanden ist, müssen Sie es von Ihrem PC hochladen. Lassen Sie uns das Beispiel durchspielen. Gehen Sie in die Beitragsverwaltung (Inhalt - Beiträge). Falls Sie Ihren Artikel nicht finden, suchen Sie ihn einfach über das Suchfeld. Klicken Sie auf den Titel des Beitrags. Das Formular zum Ändern öffnet sich. Löschen Sie das verlinkte Bild aus dem Text.

Unter dem Editor-Fenster befindet sich der Bild-Button. Dieser Button startet einen Dialog zum Hochladen eines Bildes. Sie können bereits vorhandene Bilder auswählen oder neue Bilder hochladen (siehe Abbildung 8).

Abbildung 8: Bild-Dialog

Nachdem das Bild im Editor eingefügt wurde, können Sie die HTML-Formatierungen über das Bild-Icon des Editors weiter bearbeiten. Diese Trennung der Funktionen ist in Joomla! bewusst gewählt, da Sie unterschiedliche Editoren benutzen können. Der Bild-Button mit dem Einfügedialog von Joomla! bleibt dabei immer derselbe, die Bildbearbeitung im Editor kann sich jedoch unterscheiden.

Achtung: Joomla! übernimmt die Bilder unverändert. Die Bilder werden nicht kleingerechnet und müssen in der richtigen Auflösung vorliegen.

Um dieses Problem zu beheben, lesen Sie Brian Teemans Blog: Making Joomla Idiot Proof . Vielleicht ist FBoxBot ja dann auch für Joomla! 2.5 verfügbar wenn Sie diesen Artikel lesen.

Um gleich eine realistische Herausforderung zu haben, lassen Sie uns eine erste Seite auf Ihrer neuen Website erstellen. Es soll eine "Über uns"-Seite werden, auf der Sie etwas über Ihre Firma, Ihr Projekt oder sich selbst erzählen. Meistens enthalten solche Seiten ein paar Überschriften, Text und Bilder.

Website vs. Seite

In der englischen Sprache unterscheidet man zwischen den Begriffen Website und Page. Website bezeichnet die gesamte "Homepage", also alle Inhalte, Benutzer und Dialoge, die sich in Ihrer Joomla!-Installation befinden. Eine Page ist eine über eine eindeutige Adresse (URL) erreichbare Seite innerhalb Ihrer Website – also so etwas wie das Impressum oder eine "Über uns"-Seite.

Der deutsche Begriff Homepage ist eine mögliche Übersetzung von Website. Firmen sprechen meist nicht von ihrer Homepage, sondern oft recht wolkig von ihrem Internetauftritt oder ihrer Internetpräsenz. Der Begriff Homepage hat in Deutschland ein "Bastel-Image". Ich bleibe im weiteren Verlauf des Buches bei den Begriffen Website (für alles) und Seite für eine Seite.

Statische vs. dynamische Inhalte

Eine "Über uns"-Seite erstellt man einmal, verlinkt sie im Menü und muss sie im weiteren Verlauf nur noch verändern. Sie hat einen statischen Charakter. Eine Pressemitteilung oder ein Blogeintrag haben dagegen einen dynamischen Charakter.

• Bei einer statischen Seite spielen das Erstellungsdatum und der Autor keine Rolle, bei einer dynamischen Seite schon.
• Statische Seiten sind fast immer im Menü verlinkt, dynamische Seite sind über Auflistungen erreichbar.

Der Plan

Auf der "Über uns"-Seite soll es die folgenden Elemente geben:

• eine Überschrift
• einen Text
• ein Bild
• Die Seite soll nicht auf der Startseite erscheinen.
• Wir wollen einen Link zur Seite im oberen horizontalen Menü (top).

Das klingt zunächst mal einfach.
Melden Sie sich im Administrationsinterface an.

Um gleich eine realistische Herausforderung zu haben, lassen Sie uns eine erste Seite auf Ihrer neuen Website erstellen. Es soll eine über uns Seite werden auf der Sie etwas über Ihre Firma, Ihr Projekt oder sich selbst erzählen. Meistens enthalten solche Seiten ein paar Überschriften, Text und Bilder.

Website vs. Seite

In der englischen Sprache unterscheidet man zwischen den Begriffen Website und Page. Website bezeichnet die gesamte "Homepage", also alle Inhalte, Benutzer und Dialoge, die sich in Ihrer Drupal Installation befinden. Eine Page ist eine über eine eindeutige Adresse (URL) erreichbare Seite innerhalb Ihrer Website. Also so etwas wie das Impressum oder eine "über uns" Seite.

Der deutsche Begriff Homepage ist eine mögliche übersetzung von Website. Firmen sprechen meist nicht von Ihrer Homepage sondern oft recht wolkig von ihrem Internetauftritt oder ihrer Internetpräsenz. Homepage hat in Deutschland ein "Bastel-Image". Ich bleibe im weiteren Verlauf des Buches bei den Begriffen Website (für alles) und Seite für eine Seite.

Statische vs. Dynamische Inhalte

Eine "Über uns" Seite erstellt man einmal, verlinkt sie im Menü und muss Sie im weiteren Verlauf nur noch verändern. Sie hat einen statischen Charakter. Eine Pressemitteilung oder ein Blogeintrag haben dagegen einen dynamischen Character.

• Bei einer statischen Seite spielt das Erstellungsdatum und der Autor keine Rolle, bei einer dynamischen Seite schon.
• Statische Seiten sind fast immer im Menü verlinkt, dynamische Seite sind erreichbar über Auflistungen

Der Plan

Auf der "Über uns" Seite soll es die folgenden Elemente geben

• Eine Überschrift
• Ein Text
• Ein Bild
• Die Seite soll nicht auf der Startseite erscheinen
• Wir wollen einen Link zur Seite im oberen horizontalen Menü (top)

klingt zunächst mal einfach.

Schritt 1 - Inhalt erstellen (add content)

Klicken Sie auf den Link add content.

Willkommen in der Drupal Administration. In der sogenannten Layer Technik erscheint ein helles Dialogfenster vor einem dunklen Hintergrund.Diese Technik wird in allen Verwaltungsbereichen von Drupal 7 verwendet. Falls Sie versehentlich in diesem Bereich landen, klicken Sie einfach auf die Escape Taste. Das Fenster verschwindet und sie sind wieder auf Ihrer Website.

Aber zurück zum Dialog. Sie haben die Auswahl zwischen zwei verschiedenen Inhaltstypen namens Article und Basic Page (Abbildung 1). Ein Artikel wird für Inhalte genutzt, die einen zeitlichen Bezug haben, beispielsweise Neuigkeiten und Pressemeldungen. Eine Seite (Basisc page) wird dagegen für Inhalte verwendet, die keinen zeitlichen Bezug haben, beispielsweise die 'Über uns' oder die 'Anfahrt' Seite. Klicken sie auf Basic Page. 

Abbildung 1: Neuen Inhalt erstellen

Es erscheint ein Eingabeformular mit einem Titel und einem Beschreibungsfeld. Leider gibt es im Drupal Core keinen WYSIWYG Editor, so dass die Formatierung des Textes mit HTML Tags erfolgen muss (Wie Sie einen WYSIWYG Editor installieren können erfahren Sie hier TODO ). Standardmässig sind eine beschränkte Anzahl von HTML Tags erlaubt. Sie können unter dem Eingabefenster verschiedenen Eingabeformate wählen. Mehr über Eingabeformate erfahren Sie hier TODO . Im unteren Bereich des Formulars können Sie einen Menülink setzen und auf den Save (speichern) oder den Preview (Vorschau) Button klicken (Abbildung 2).

Abbildung 2: Eingabeformular

Die Seite wird erstellt und Sie landen direkt in der Website (Abbildung 3).

Abbildung 3: Über uns Seite ohne Bild

Schritt 2: Inhalttyp um ein Bildfeld erweitern.

Wir wollen ein Bild auf der Seite haben. Sie können natürlich ein schon im Internet erreichbares Bild mit dem HTML img Tag einbinden (zu diesem Zweck müssen Sie das Full-HTML Eingabeformat auswählen). Für "normale" Benutzer ist ein WYSIWYG Editor allerdings besser geeignet!

Neues Feld im Inhaltstyp erstellen

Durch die Modularität von Drupal ist es ohne Programmieraufwand sehr einfach, dem Inhalttyp Basic Page ein Feld vom Typ Bild zuzuordnen. Das bedeutet dass Sie hinterher auf jeder Seite vom Typ Basic Page ein, oder mehrere Bilder zuordnen können. Diese Bilder können dann in unterschiedlichen Grössen auf der Website dargestellt werden. Hört sich zunächst kompliziert an, ist aber sehr einfach.

Klicken Sie im Administrationsmenü auf den Link Struktur und dann auf Content types. Sie sehen die beiden Inhaltstypen Article und Basic Page. Klicken Sie auf den Link manage fields beim Typ Basic Page (Abbildung 4).

Abbildung 4: Neues Feld zuordnen

Im unteren Bereich (add exististing fields) können sie bereits bestehende Felder zuordnen. Im Drupal Core ist bereits ein Bildfeld enthalten. Wählen Sie es aus und klicken auf save. Sie landen in den Basic Page Settings in denen Sie die Parameter des Bildfeldes einstellen können. Kreuzen Sie die Checkbox für ALT und TITLE an und belassen Sie den Rest bei den Standardeinstellungen. Nach einem Klick auf Save haben Sie ein neues Feld erstellt. Ziehen Sie das Feld an die gewünschte Stelle und klicken erneut Save (Abbildung 5).

Abbildung 5: Felder sortieren

Sie haben jetzt die Struktur des Inhaltstypen verändert und können jetzt das Bild hochladen. Wenn Sie die Über uns Seite editieren sehen Sie das neue Feld (Abbildung 6).

Abbildung 6: Bildfeld

Bild hochladen

Sie können jetzt ein Bild von Ihrem PC hochladen. Die Auflösung spielt keine Rolle, das Bild darf nicht grösser als 32 MB sein. Der MB Wert ist in den Drupal Einstellungen änderbar und abhängig von Ihrer PHP Konfiguration (Siehe auch: TODO Link). Drupal zeigt nach dem Upload ein kleingerechnetes Thumbnail an. Sie können noch einen ALT und TITLE Beschreibungstext eingeben (Abbildung 7).

Abbildung 7: hochgeladenes Bild

Nach dem Abspeichern sehen Sie das Bild als Original und setellen vermutlich fest, das es zu gross ist (Abbildung 8).

Abbildung 8: Bild auf Website in falscher Grösse

Anzeigegrösse anpassen

Um die Grösse für die Anzeige zu ändern, müssen Sie im entsprechenden Inhaltstyp eine Grösse vorgeben. Klicken Sie auf Structure -> Content types -> manage display. Hier können Sie die Anzeigeeigenschaften festlegen. Verstecken Sie das Label (hidden) und wählen Sie als Format thumbnail (Abbildung 9).

Abbildung 9: Anzeigeeinstellungen für Felder

Wenn Sie nach dem Speichern zurück auf die Über uns Seite gehen, sollte das Bild kleiner werden (Abbildung 10).

Abbildung 10: Über uns Seite

Der jetzt beschriebene Weg eine Über uns Seite zu erstellen mutet ein wenig kompliziert an. Wenn Sie sich aber überlegen, was Sie gerade mit ein paar Mausklicks erstellt und verändert haben, so ist genau das einer der Hauptvorteile von Drupal. Sie können wie mit Legosteinen arbeiten.