Assoziationen

Assoziationen in DynPG sind ein weiteres wichtiges Werkzeug um Seiten dynamisch zu gestalten. Mit ihrer Verwendung können Sie einen Bereich in Ihrer Webseite festlegen, in dem dynamische Inhalte angezeigt werden. Welcher Inhalt angezeigt wird, hängt von dem im Navigatonsmenü angewählten Menüpunkt ab. Durch einfaches Assoziieren der Inhalte im Backend lassen sich diese jederzeit ohne großen Aufwand ändern.

Was sind Assoziationen?

Grundsätzlich sollen mithilfe von Assoziationen bestimmte Artikel in einem festgelegten Bereich der Webseite angezeigt werden. Welcher Inhalt gerade angezeigt wird, hängt von der im Navigationsmenü ausgewählten Gruppe bzw. dem ausgewählten Artikel ab. Der assoziierte Inhalt ist immer ein Artikel. Dieser wird im Backend mit der entsprechenden im Navigationsmenü erscheinenden Gruppe bzw. dem im Navigationsmenü erscheinenden Artikel assoziiert.

Stellen wir uns zur Veranschaulichung den Bereich der Webseite, in welcher der assoziierte Inhalt angezeigt werden soll, als eine Box vor. Je nachdem welchen Menüpunkt wir nun anklicken, soll in dieser Box ein anderer Artikel angezeigt werden. Welcher das ist, können Sie bequem im Backend festlegen, da Sie einfach den Artikel mit der jeweiligen Gruppe assoziieren können. Wir werden uns dies an einem Beispiel anschauen.

Veranschaulichung

Schauen wir uns die folgende Webseite an:

Wir sehen hier eine einfache Webseite mit einem Inhaltstext und einer roten Box, die unseren Assoziationsbereich darstellt. Im Navigationsmenü ist der Punkt "Support" ausgewählt und als assoziierter Inhalt wird beispielhaft der Text "Assoziation 2 Inhaltstext" angezeigt. Das bedeutet, es existiert ein Artikel der diesen Text als Inhalt besitzt und mit der Gruppe "Support" assoziiert ist. Wir könnten nun z.B. mit der Gruppe "Kontakt" einen anderen Artikel assoziieren, der einen anderen Text oder z.B. ein Bild in der Box anzeigt.

Es soll hier deutlich werden, dass es zur Darstellung von assoziierten Artikeln einen speziellen Bereich in der Webseite geben muss, der den Inhalt darstellt. Welcher Inhalt in diesem Bereich angezeigt wird, hängt von der ausgewählten Gruppe und dem mit ihr assoziierten Inhalt ab.

Das Konzept von Assoziationen

Eine Assoziation besteht im Wesentlichen aus drei Bestandteilen:

1. einem eindeutigen Namen, der die Assoziation identifiziert,
2. einem Bereich in der Webseite, der den assoziierten Inhalt darstellt,
3. einer Menge von Artikeln, wobei jeder Gruppe einer dieser Artikel zugeordnet sind.

Um den assoziierten Inhalt im Frontend, d.h. in der Webseite anzuzeigen, werden wir ein spezielles Snippet verwenden das uns diesen Bereich erstellt. In diesem Snippet müssen wir den Namen der Assoziation angeben, die angezeigt werden soll. Danach müssen wir im Backend jeder Gruppe einen Artikel zuweisen, der für diese Assoziation angezeigt werden soll.

Beispiel

Das Prinzip lässt sich wie folgt veranschaulichen. Im unteren Bild sehen Sie eine konzeptuelle Darstellung einer Assoziation mit dem Namen Assoziation 1. Es existieren drei Gruppen Gruppe 1, Gruppe 2, Gruppe 3, die jeweils mit dem Artikel Artikel 1, Artikel 2 bzw. Artikel 3 assoziiert sind. Je nachdem welche Gruppe nun im Navigationsmenü ausgewählt ist (symbolisiert durch einen hellblauen Rahmen), wird im Assoziationsbereich der entsprechende assoziierte Artikel angezeigt.

Assoziationen einrichten

Platzhalter im Frontend einfügen

Snippet einfügen

Um den assoziierten Inhalt einer Gruppe in einer Webseite anzuzeigen, verwenden wir das folgende Snippet. Dadurch werden alle Artikel angezeigt, die der Assoziation mit dem festgelegten Namen und der aktuell ausgewählten Gruppe zugeordnet sind. Es gestaltet sich wie folgt:

Snippet zur Darstellung von Assoziationsinhalten:

<div class="association">
<?php
  $DynPG->setupTemplate('associations');
  $DynPG->SetParam_AA_Associations(Array("Assoziation"));
  $DynPG->SetParam_AA_fullLoadText(true);
  $DynPG->Write_AllArticles();
  $DynPG->setupTemplate('default');
?>
</div>

Bemerkung:

beachten Sie, dass der assoziierte Inhalt hier von einem div-Element umschlossen wird. Dies ist zum einen sinnvoll um den Inhalt mittels CSS zu positionieren und dient andereseits dazu um im folgenden noch einige notwendige CSS-Anpassungen vorzunehmen.

• Zeile 1: hier wird das Template zur Darstellung von Assoziationen geladen.
• Zeile 2: hier wird der Name der Assoziation, so wie sie im Backend erstellt wurde, als String-Parameter übergeben.
• Zeile 3: legt fest, dass der gesamte Artikeltext angezeigt werden soll.
• Zeile 4: dadurch wird der assoziierte Inhalt ausgegeben.
• Zeile 5: setzt das Template zurück auf das Standard-Template.

Achtung:

In den meisten Fällen möchte man nur den Inhaltstext des assoziierten Artikels anzeigen. Es müssen daher noch der Artikelkopf und einige andere Dinge ausbgeblendet werden, wie im nächsten Abschnitt zu den CSS-Anpassungen beschrieben wird.

CSS-Anpassungen

Da bei der Darstellung von assoziierten Inhalten meist nur der Inhalt des assoziierten Artikels angezeigt werden soll, kann mittels der folgenden CSS-Definitionen der Artikelkopf, die Anzeige des Gruppennamens und der "Mehr"-Link ausgeblendet werden.

div.association div.dynpg_A_more , div.association div.dynpg_A_header , div.association div.dynpg_A_parentgroup {
  display:none;
}

Bemerkung:

der hier angegebene Klassenname für das div-Element, das den assoziierten Inhalt umschließt (hier: div.association), muss mit dem im obigen Snippet angegebenen Klassennamen übereinstimmen.

Gruppen mit Inhalten assoziieren

→ Hauptartikel: Assoziationen im Backend erstellen

In der Artikel- oder Gruppenübersicht finden Sie für jede Gruppe bzw. jeden Artikel jeweils einen Link, um sich die bisher erstellten Assoziationen anzusehen und um neue Assoziationen zu erstellen.

Möchten Sie eine Assoziation erstellen, dann klicken Sie auf den entsprechenden Link zur Erstellung von Assoziationen. Daraufhin wird das folgende Fenster angezeigt:

Hier können Sie den assoziierten Artikel auswählen und den Namen der Assoziation festlegen. Sie können sich dabei entscheiden, ob Sie entweder eine neue Assoziation anlegen oder eine bereits existierende Assoziation verwenden möchten.

Weitere Informationen

• Tutorial - Assoziationen