Links zu anderen Seiten und Bilder korrekt einbinden

• » Home
• »Server-Daten
• »FAQ
• » Links und Bilder

Was wären die meisten Webseiten ohne Links zu anderen Seiten und ohne Bilder! Vielleicht haben Sie in Ihrer Datenbank eine Tabelle 'Linkliste' mit den beiden Spalten 'Linkziel' und 'Linktext'. Oder Sie nutzen eine Tabelle 'Bilder' mit einer Spalte 'Bildadresse'. Und diese Daten möchten Sie als klickbare Links bzw. als sichtbare Bilder in Ausgabeseiten einbinden.

 

Der Schlüssel für diese Lösungen besteht in der Verwendung des sd:attribute -Elements. Dieses Element ermöglicht es, dem vorhergehenden Html-Element zur Laufzeit ein Attribut mit dem gewünschten Wert hinzuzufügen.

1. Eine Linkliste

Erstellen Sie sich einen View zu Ihrer Tabelle mit den Grunddaten. Wir nehmen an, daß die Tabelle zwei Spalten 'Linkziel' und 'Linktext' habe. Anschließend erzeugen Sie eine einfache Ausgabeseite - nur 'Code generieren' aufrufen, den View auswählen und speichern. Rufen Sie nun die Codebearbeitung direkt auf und suchen Sie dort den Abschnitt

<td>
  <sd:cell-value sd:col='Linkziel'/>
</td>
<td>
  <sd:cell-value sd:col='Linktext'/>
</td>

Löschen Sie diese Zeilen und fügen Sie stattdessen den folgenden Code ein:

<td>
  <a>
    <sd:attribute sd:attribute-name='href'>
      <sd:cell-value sd:col='Linkziel'/>
    </sd:attribute>
    <sd:cell-value sd:col='Linktext'/>
  </a>
</td>

Beim Aufruf der Seite wird ein a-Element, also ein gewöhnlicher Html-Link, eingefügt. Dieser erhält das href-Attribut mit dem Wert der Spalte 'Linkziel' für die aktuelle Tabellenzeile. Und als Linktext wird der Eintrag dieser Spalte ausgegeben.

2. Eine Liste mit Mailadressen als Links zum Anklicken ausgeben

Wenn in einer Spalte Mailadressen notiert sind, dann lassen sich diese direkt als klickbare Links ausgeben:

<td>
  <a>
    <sd:attribute sd:attribute-name='href'>
      mailto:<sd:cell-value sd:col='mailadresse'/>
    </sd:attribute>
    <sd:cell-value sd:col='mailadresse'/>
  </a>
</td>

Das erzeugt den Htmlcode

<a href='mailto:mailadresse'>mailadresse</a>

Beispiel mit Phantasieadresse: info@example.com

 

Beim Klick auf einen solchen Link sollte sich der Standard-Mailclient des Lesers öffnen und eine neue Mail mit dieser Adresse zum Bearbeiten bereitstellen. Allerdings sollte diese Variante meistens nur für interne Verwaltungszwecke genutzt werden, da solche Verlinkungen gefundenes Futter für Spambots sind.

3. Ein Bild direkt anzeigen

Soll ein Bild einfach nur angezeigt werden, so ist das sogar simpler als der obere Fall, da nur ein einziger Attributwert gesetzt werden muß. Die Bildadresse stehe in einer Spalte 'Bildadresse':

<img>
  <sd:attribute sd:attribute-name='src'>
    <sd:cell-value sd:col='Bildadresse'/>
  </sd:attribute>
</img>

4. Ein Bild mit alt-Attribut - ergänzendem Text

Soll zusätzlich ein alt-Attribut mit Text angegeben werden, der in einer Spalte 'altText' notiert wurde, so sind das zwei Attribute:

<img>
  <sd:attribute sd:attribute-name='src'>
    <sd:cell-value sd:col='Bildadresse'/>
  </sd:attribute>
  <sd:attribute sd:attribute-name='alt'>
    <sd:cell-value sd:col='altText'/>
  </sd:attribute>
</img>

Sie sehen: Sie können auch mehrere Attribute untereinander dynamisch einfügen.

5. Ein Vorschaubild mit alt-Attribut und Link auf die Großdarstellung

Falls ein Vorschaubild unmittelbar ausgegeben werden soll, dieses aber mit einem Link zur Vollbilddarstellung verknüpft auszugeben ist, dann können Sie den folgenden Code anpassen. Es werden die Spalten ThumbAdresse, BildAdresse und altText genutzt:

<a>
  <sd:attribute sd:attribute-name='href'>
    <sd:cell-value sd:col='Bildadresse'/>
  </sd:attribute>
  <img>
    <sd:attribute sd:attribute-name='src'>
      <sd:cell-value sd:col='ThumbAdresse'/>
    </sd:attribute>
    <sd:attribute sd:attribute-name='alt'>
      <sd:cell-value sd:col='altText'/>
    </sd:attribute>
  </img>
</a>

6. Eine Kombination aus hartcodierter Adresse und Bildname

Bei Links und Bildern kann es nützlich sein, die Daten aufzuteilen. Alle Ihre Bilder liegen in einem Unterordner /images/ Ihrer Domain. In der Datenbank speichern Sie nur die Bildnamen. Um die absoluten Adressen der Form

http://www.ihre-domain.de/images/bildname.jpg

zu erhalten, ohne jedesmal den Domainnamen und Unterordner angeben zu müssen, sind die beiden Elemente sd:param und sd:value sehr nützlich. Die Verwendung besteht aus zwei Teilen:

• Fügen Sie unterhalb des <body>-Elements die Definition für das sd:param -Element ein:

  <sd:param sd:name='bild-stammadresse'
  	sd:std-value='http://www.ihre-domain.de/images/'/>

  Dies definiert Ihnen einen Parameter und ordnet diesem den Standardwert http://www.ihre-domain.de/images/ zu.
• An der Stelle, an welcher später das Bild erscheinen soll, notieren Sie:

  <img>
    <sd:attribute sd:attribute-name='src'>
      <sd:value sd:param-name='bild-stammadresse'/>
      <sd:cell-value sd:col='BildAdresse'/>
    </sd:attribute>
  </img>

  Damit wird der tatsächliche Attributwert einfach aus dem konstanten Abschnitt und dem zeilenabhängigen Wert aus der Datenbank zusammengesetzt.

7. Wenn Zellen leer sind? Wie lassen sich fehlerhafte Links oder Kästchen statt der Bilder vermeiden?

Die bis jetzt vorgestellten Techniken setzen voraus, daß die Tabellenzellen, die als Attribute genutzt werden, nicht leer sind. Praktisch passiert es jedoch häufig, daß bsp. nur von einigen, nicht von allen Mitgliedern ein Bild vorliegt oder zu einigen Mitgliedern kein Link angegeben wurde. In diesen Fällen erzeugt der bisherige Code fehlerhafte Links oder der Browser gibt ein kleines Kästchen aus. Solche Effekte lassen sich mit dem sd:choose-null -Element unterbinden. Das Element ermöglicht eine Verzweigung in Abhängigkeit davon, ob eine Zelle leer oder belegt ist:

<td>
  <sd:choose-null>
    <sd:when sd:test='Linkziel'>
      <a>
        <sd:attribute sd:attribute-name='href'>
          <sd:cell-value sd:col='Linkziel'/>
        </sd:attribute>
        <sd:cell-value sd:col='Linktext'/>
      </a>
    </sd:when>
    <sd:otherwise>
      Kein Link definiert
    </sd:otherwise>
  </sd:choose-null>
</td>

Der Code zur Erzeugung des Links wurde einfach in den Contentbereich des sd:when -Elements verschoben. Dieses prüft zuvor, ob die Zelle 'Linkziel' belegt ist. Nur dann wird der Link eingefügt. Ansonsten wird ein Hinweistext ausgegeben, der natürlich auch fehlen könnte.

8. Und normale Links und Bilder?

Wenn Sie ein Bild auf einer Seite einbinden möchten, ohne daß der Wert aus der Datenbank stammt, dann machen Sie dies einfach wie gewohnt:

<img src='http://www.ihre-domain.de/ihre-bildadresse.jpg'
	alt='alternativer Text'/>

Der eventuelle Unterschied zu ihren bisherigen Seiten besteht darin, daß Sie - wegen der Bedingung der Xml-Wohlgeformtheit - das img-Element in der Form <img src='...' /> notieren, es also hinten abschließen. Alternativ ist

<img src='http://www.ihre-domain.de/ihre-bildadresse.jpg'
	alt='alternativer Text'></img>

denkbar. Und analog fügen Sie gewöhnliche Links auf andere Ausgabeseiten und auf andere Seiten ein. Ein Sonderfall gilt für andere Ausgabeseiten: Beginnen Sie diese immer mit '/', also:

<a href='/name-einer-ausgabeseite.html'>Linktext</a>

Der Grund: Wurde auf der aktuellen Seite sortiert, so daß die Url Url - Überschreibungen enthält, so würde eine Notation ohne Slash die Seitenadresse hinten anfügen. Der Slash sorgt für eine korrekte Adresse.