PHPCMS - Schnipsel: Tags

Anbei stelle ich einige meiner hier verwendeten Tags vor. Sie sind nicht bis ins allerletzte Detail genau beschrieben, zeigen wohlaber die Richtung auf. Wenn der ein oder andere eine Anregung findet, ist mein Ziel bereits erreicht.

Boxen
Links intern und extern
statische Texte
anpassungsfähige Texte
statische Links
Bildergalerie
Accesskeys
Youtube-Video einbinden
Datum als Kalenderblatt

Boxen

Ich habe verschiedene Boxen in meiner Seite. Alle sollen ein einheitliches Look and Feel rüberbringen. Daher wurde ein Tag geschrieben.
Mit CSS kann man bei vielen Sachen annähernd das Gleiche abbilden, aber eben nicht ganz. Mir ist die Verwendung von Tags statt CSS im Content schon oft zugute gekommen; insbesondere beim Hinzufügen/ entfernen von zusätzlichen HTML- und Javascript-Code in meinen "Standard-Elementen".

Demo - eine der Boxen sieht z.B. so aus:


Ich habe eine Überschrift und meine Box an sich. Für beide gibt es je einen öffnenden und schliessenden PHPCMS-Tag. Der Code in den Content-Dateien sieht so aus:

<BOX1HEAD>Demobox</BOX1HEAD>
<BOX1>
   <BR>
   Hier ist der Text innerhalb der Box.<BR>
   <BR>
</BOX1>

Vor und hinter dem Text "Demobox" kann man ein einzelnes Zeichen setzen. Ansonsten werden einfach nur DIV-Container geschrieben, die eine CSS-Klasse (erst diese macht es dann bunt und zeichnet die Rahmen) im Attribut angeben:

<BOX1HEAD>              := <DIV class="box1head">&nbsp;&#8801;&nbsp;
</BOX1HEAD>             := &nbsp;&#8801;&nbsp;</DIV>
<BOX1>                  := <div class="box1" ALIGN="left">
</BOX1>                 := </div>

Auf diese Weise habe ich verschiedene Boxen für unterschiedliche Verwendungen definiert. Die für für Hinweistexte habe ich gerade beschrieben. Für die Darstellung von Code gibt es eine weitere - hier wird optional eine Fusszeile gesetzt. Das funktioniert aber nach demselben Prinzip.

Seitenanfang

Links intern und extern

Klar braucht es in Hypertext-Dokumenten Links... der schöne A-Tag.
Den könnte man hart in den Content-Dateien codieren. Ich habe trotzdem Tags daraus gemacht, um unterschiedliche Linktypen separat handlen zu können. Ich verwende z.B. je einen Tag für interne und externe Links je einen Tag, um eine andere Grafik voranzustellen. Bei den externen Links wird per Javascript eine Beschreibung zur Zielseite eingeblendet.

Einmal ein Beispiel ... wie es so aussieht:

interner Link ... Startseite
externer Link ...

... und der Code in der Content-Datei (*.htm):

interner Link ... <LNK_INTERN "../index.htm,home,Startseite"><BR>
externer Link ... <LNK_EXTERN "http://www.putzi4win.de/,Putzi4Win,www.putzi4win.de,">

Hier sieht man, dass ich keinen statischen Text zwischen einem öffnenden und schliessenden Tag ersetzen lasse, sondern den Tags Parameter mitgebe. Deren Reihenfolge ist in der Tag-Datei angegeben und muss in allen Content-Dateien beachtet werden:

<LNK_INTERN "$link,$lnktitle,$lnktext,$cssclass"> :=
   <A HREF="$link" class="lnkintern$cssclass"
   title="interner Link: $lnktitle $lnktext">$lnktext</A>
 
<LNK_EXTERN "$link,$lnktitle,$lnktext,$cssclass"> :=
    <A HREF="$link" class="lnkextern$cssclass"
        title="externer Link: $lnktitle" target="_blank" >$lnktext</A>

Anmerkung:
Der zu ersetzende Text muss im Tagfile in einer einzelnen Zeile stehen. Der Übersichtlichkeit halber ist er hier umgebrochen und eingerückt.

Es werden somit 4 Parameter übergeben, die in der Ersetzung mit entspr. Namen angesprochen werden. Gibt man Variablen nicht in der Contentatei an, sind die Variablen leer. Als ersten Parameter sollte man daher immer den/ die wichtigsten angeben. Bei meinen Link-Tags ist sind die Ziel-URL ($link) und angezeigter verlinkter Text. Weitere Parameter werden für Title-Tag und CSS-Klasse verwendet.

Die Grafiken werden mit CSS "vorangestellt" - besser als Hintergrundgrafik gesetzt. Und das nur, weil der zu unrecht weit verbreitete IE6 nur mässig mit CSS umgehen kann. So kennt dieser nicht das Pseudoelement :before.
s.a. Blog 14.01.2006

Seitenanfang

statische Texte

Etliche Texte wiederholen sich. Seien es Copyright-Hinweise auf meinen Foto-Seiten, die Hinweise auf dieser Seite, dass die Codeauszüge mit Zeilenumbruch lesbar sind oder Hinweise auf fehlendes Javascript. Teilweise sind es eben mehrzeilige Standard-Texte, die man nicht wieder und wieder 1:1 abtippen (oder bei Änderung des Textes in allen Dateien ändern) will.

Für den Hinweis mit dem Zeilenumbruch der Code-Beispiele steht in der Content-Datei ein einzelnes Wort:

<TAGFILE_REMARK>

Die Ersetzung erfolgt mit Hilfe der Tag-Datei - hier ist ein statischer Text hinterlegt:

<TAGFILE_REMARK>:=<I><B>Anmerkung:</B><BR></I>Der zu ersetzende Text muss ...<BR>

Seitenanfang

anpassungsfähige Texte

Ich bin z.B. freundlich, wenn ich mal ausahmsweise Javascript auf einer Seite verwende. Im HTML-Code schreibt man einen entsprechenden Hinweis in ein ein NOSCRIPT-Tag:

<NOSCRIPT>
   <b>Entschuldigung!</b><BR>Auf dieser Seite wird ausnahmsweise aktiviertes
   Javascript benötigt. Eine gewünschte Funktionalität ist daher nicht verfügbar.<BR>
   <A HREF="/axel/page_infos/keinjavascript.htm" class="lnkintern"
   title="interner Link: Hinweis zu Javascript">genauere Informationen</A><BR>
<NOSCRIPT>

Obigen Text habe ich in ein Tag namens <NO_JS_WARNING> gepackt.
Nun kann eine Standard-Fehlermeldung verwirren, wenn es schlicht heisst, "irgendwas" geht hier nicht oder wurde nicht angezeigt. Besser wäre es, wenn man mitteilen könnte, was denn nun nicht verügbar ist. PHPCMS erlaubt es, denselben Tag auch mit Parametern zu definieren. So kann man seine Hinweistexte nach und nach umstellen oder es auch beim Defaulttext belassen.

<NO_JS_WARNING>        := <noscript>kein Javascript - Standard-Meldung ... Hinweis-Link</noscript>
<NO_JS_WARNING $text>  := <noscript>Javascript benötigt - Einschränkung: $text ... Hinweis-Link</noscript>

Seitenanfang

statische Links

Links mit immer gleichen Texten habe ich auch. Diese fallen in die ganz einfache Kategorie, wie das oben erwähnte Beispiel mit den statischen Texten. Einziger Unterschied: im ersetzten Tag ist ein Link.

So fallen immer wieder die Links zum Springen an den Seitenanfang an oder der Link "Hinweis zu den Links" auf die Impressumseite an.
Etwas seltener ist der Link "zurück zur letzten Seite", der aber nur mit Javascript funktioniert. Mit Hilfe des NOSCRIPT-Tags erhalten Besucher ohne eingeschalteten Javascript eine entsprechende Meldung.

<GOTOP>                 :=
   <IMG SRC="/axel/images/gotop.gif" BORDER=0 height=12 width=12 alt="">
   <A HREF="#top">Seitenanfang</A><BR><BR>
 
<LNK_HAFTUNG>           :=
   <NOBR><IMG SRC="/axel/images/bul_01_a.gif" alt="">
   <A HREF="/axel/impressum.htm">Hinweis zu den Links</A><BR></NOBR>
 
<LNK_BACK>              :=
   <SCRIPT TYPE="text/javascript" LANGUAGE="JAVASCRIPT">
   document.write('<IMG SRC="/axel/images/bul_01_b.gif" alt="">
   <IMG SRC="/axel/images/bul_01_b.gif" alt="">
   <A HREF="javascript:history.back()">zurück</A>');
   </SCRIPT>
   <NOSCRIPT><B>Hinweis:</B><BR>
   Bitte benutzen Sie die zurück-Schaltfläche Ihres Browsers,
   um zur letzten Seite zurückzukehren.</NOSCRIPT>

Anmerkung:
Der zu ersetzende Text muss im Tagfile in einer einzelnen Zeile stehen. Der Übersichtlichkeit halber ist er hier umgebrochen und eingerückt.

Seitenanfang

Bildergalerie

Ich verwende bei meinen Fotoseiten keine reine Galerien, sondern die Fotos sind zwischen diversen Texten eingebettet.
z.B. Fotos| Bodensee
Daher habe ich keine Bildergalerie in PHP programmiert, sondern mir Tags für das Einfügen von anklickbaren Fotos geschrieben.

Demo:

Bild 1	Bild 2
Bild 3

In der Content-Datei sieht es sehr einfach aus - so ist es geschrieben:

<SHOWIMAGE_START>
    <SHOWIMAGE "images/fotos_200208_bodensee,125-2593_img.jpg,Rorschach,Bild 1">
    <SHOWIMAGE "images/fotos_200208_bodensee,125-2599_img.jpg,Rorschach,Bild 2">
<SHOWIMAGE_NEWLINE>
    <SHOWIMAGE "images/fotos_200208_bodensee,126-2612_img.jpg,Rorschach,Bild 3">
<SHOWIMAGE_ENDE>

Für die Darstellung zeichne ich eine Tabelle - in die Tabellenzellen. Die Tabelle wird mit <SHOWIMAGE_START> geöffnet und <SHOWIMAGE_ENDE> geschlossen. OK-OK, ich weiss, das dies nicht konsequent ist, an dieser Stelle keinen schliessenden Tag zu nehmen. Aber alle Tags der Bildergalerie haben dasselbe Prefix, was das Ganze lesbar hält.

Dass <SHOWIMAGE_NEWLINE> einen Zeilenumbruch erzeugt, ist leicht zu erraten.

Fehlt noch das Tag <SHOWIMAGE ..> mit seinen Parametern. Ich übergebe den Pfad zu den Grafiken, den Namen der Grafikdatei und 2 Texte (einmal eine Grafik anklicken, dann seht ihr diese).
Für die Miniaturansicht eines Fotos habe ich die Konvention, dass dieses "index_[Bildname]" heisst. Auf diese Weise spare ich einen Parameter ein und habe auch nur eine Pfadangabe.
Eine weitere Konvention ist, dass alle Miniaturansichten dieselbe Grösse haben (100 x 75 Pixel), damit das Zeichnen der Tabelle einfacher wird. Ansonsten bräuchte es noch weitere Parameter pro Bild. Die Darstellung des Schattens wird dann auch noch einmal komplizierter.

Hier mal die Tags:

<SHOWIMAGE_START>    := <BR><table border=0 cellpadding=0 cellspacing=0><tr>
<SHOWIMAGE_NEWLINE>  := </tr><tr>
<SHOWIMAGE_ENDE>     := </tr></table>
 
<SHOWIMAGE "$directory,$picname,$pretitle,$description">  :=
   <td align="left" class="clickimage" valign="top">
   <SCRIPT TYPE="text/javascript" LANGUAGE="JAVASCRIPT">
     document.write('
     <A HREF="javascript:zoom(\'$home/$directory/$picname\',
     \'$description\',\'$pretitle\');"
     title="Anklicken zum Vergrössern" class="image">');
   </SCRIPT>
   <NOSCRIPT>
     <A HREF="$home/$directory/$picname" target="_blank" class="image">
   </NOSCRIPT>
   <img src="$home/$directory/index_$picname" border="0" width="100" height="75" alt="">
   </A><BR><img src="$home/images/img_up.gif"><BR>$description
   </td>

Anmerkung:
Der zu ersetzende Text muss im Tagfile in einer einzelnen Zeile stehen. Der Übersichtlichkeit halber ist er hier umgebrochen und eingerückt.

Beim SHOWIMAGE-Tag wird es etwas länger, daher mal eine Aufschlüsselung:

• Es wird ein <td> geöffnet und am Ende wieder mit </td> geschlossen.
• Dazwischen gibt es für das generieren des Links einen Script- und einen Noscript-Bereich. Ist Javascript eingeschalten, so wird eine Javascript-Funktion aufgerufen, die ein Popup-Fenster mit der Grafik anzeigt. Das entsprechende Javascript muss in der Seite eingebunden sein oder aber das Laden der js-Datei muss im Header veranlasst werden.
  Ist Javascript ausgeschalten, ist das Ziel des Links die vergrösserte Grafik selbst mit target="_blank" (in einem neuen Browserfenster).
• Unabhängig von ein- oder ausgeschaltetem Javascript wird die Vorschaugrafik namens $home/$directory/index_$picname eingefügt und der A-Tag geschlossen.
• Als Ergänzung ein paar CSS-Angaben... Die Klasse clickimage ist auf meine Grösse von 100x75 angepasst: Es wird ein Rand von 10 Pixel nach rechts und unten sowie die Grösse 110 x 85 gesetzt. Die Hintergrundgrafik stellt den Schatten dar und ist so gezeichnet, dass scheinbar ein weisser Rand von 1 Pixel entsteht.
  .clickimage { color: #A0A0A0; font-size: 11px; height:85px; width:110px;
  padding-right: 10px; padding-bottom: 10px;
  background-image:url(/images/bg_clickimage.gif);}
  

Seitenanfang

Accesskeys

Die Menüpunkte in der Haupt- und Metanavigation sind mit Accesskeys ausgestattet. Die Definition der Accesskeys erfolgt in der Menüdatei (*.mnu). Dort ist es möglich, eine weitere Spalte hinzuzufügen. Sei es um eine Grafik für Navigation oder als gestalterisches Mittel zu verwenden, das Zielfenster des Links oder einen Accesskey.

Anmerkungen:

• Ich setze den Default-DELIMITER von "&" auf ein anderes Zeichen, weil ich Links mit URL-Parametern habe. Diese werden mit eben diesem &-Zeichen getrennt - an der Stelle parst PHPCMS nicht so, wie ich es mir wünsche.
• Das Leerzeichen in "$ home" in der nachfolgenden Ausgabe wird in der Menüdatei zusammengeschrieben.

DELIMITER: |
MENU: MAIN
CLASS|  MNAME|          AKEY|   LINK|                                   TEXT|
00.01|  Startseite|     a|      $ home/index.htm|                       Startseite von Axels Homepage|
00.02|  über mich|      m|      $ home/page_about/about.htm|            Wer ist denn der Axel Hahn?|
00.03|  Kiste|          i|      $ home/page_kiste/kiste.htm|            Kramkiste|
00.04|  PC + Co.|       C|      $ home/page_compi/pckiste.htm|          Computer-Krimskrams|
00.05|  Kontakt|        K|      $ home/page_kontakt/kontakt.htm|        So bin ich zu erreichen|
00.06|  Suche|          u|      $ home/suche.htm|                       Volltextsuche durch Axels Seiten|

Und dann kann man die neu definierte Spalte AKEY in der Menütemplate-Datei ansprechen:

{MAIN.PRE}
{MAIN.NORMAL}<a href="{LINK}" title="interner Link: {TEXT}" accesskey="{AKEY}">{MNAME}
{MAIN.AKTIV}<STRONG><a href="{LINK}" title="interner Link: {TEXT}" accesskey="{AKEY}">{MNAME}</a></STRONG>
{MAIN.PAST}

Der Accesskey ist nun im Link drin. Der Ausgabetext wird noch mit Javascript unterstrichen und in den Title-Tag geschrieben. (s. Link zu clagnut.com in der Kontextspalte). Man könnte den Buchstaben auch per Menütemplate als sichtbaren Text ausgeben.

Zuguterletzt noch eine Anmerkung: auf dieselbe Weise lassen sich weitere Spalten mit irgendwelchen zu einem Menüpunkt gehörenden Informationen einbauen. Nur mal als Idee wären genannt:

• Linktarget
  Wenn Sie neben internen Links im Menü auch externe Seiten verlinken wollen, kann man nur diese mit dem target-Attribut _blank verlinken lassen.
  
  
• Grafik je Rubrik
  Wenn man auf seiner Seite an einer definierten Stelle (z.B. eine Header-Grafik zwischen Menü und Inhalt) haben will, würde ich eine Spalte mit einem Prefix für jede Rubrik setzen. Sowas wie eine eindeutige ID. Im Content-Template wird die Hauptrubrik verwiesen mit

  {MENU NAME="MAIN" MENTEMP="HEADERGRAFIK"}

  Auszug aus der Template-Datei
  
  ... und in in der .mtpl-Datei wird die Grafik eingefügt mit

  {HEADERGRAFIK.AKTIV}<img src="headerimage_{ID}_oben.png" alt="{TEXT}">

  Auszug aus der Menütemplate-Datei
  
  Klar könnte man für die Headergrafik auch den Dateinamen komplett in die Menüdatei legen, aber wenn man rubrikspezifisch eine zweite Grafik braucht, oder per CSS eine zugehörige Klasse ansprechen will, ist man sehr flexibel und nicht auf eine einzlne Verwendung eingeschränkt.

Seitenanfang

Youtube-Video einbinden

Es wird auf diversen Video-Portalen der Quellcode angeboten, um ein Video in die eigene Webseite einzubinden. Dieser Code unterscheidet sich von Video zu Video durch eine ID. Diese Video-ID ist an 2 Stellen eingebaut. Klingt ideal für einen Tag.

<VIDEO_YOUTUBE "$id"> :=
  <object width="425" height="355">
    <param name="movie" value="http://www.youtube.com/v/$id&hl=en&rel=0&color1=0xe1600f&color2=0xfebd01"></param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.youtube.com/v/$id&hl=en&rel=0&color1=0xe1600f&color2=0xfebd01"
      type="application/x-shockwave-flash" wmode="transparent" width="425" height="355">
    </embed>
  </object>

Anmerkung:
Der zu ersetzende Text muss im Tagfile in einer einzelnen Zeile stehen. Der Übersichtlichkeit halber ist er hier umgebrochen und eingerückt.

Die ID holt man aus der Adresszeile - es ist bei youtube der Parameter "v", z.B.

http://www.youtube.com/watch?v=E2X19497xAk&feature=related

Dann braucht man statt des Rattenschwanzes mit OBJECT und EMBED-Tags im Content nur noch schreiben:

<VIDEO_YOUTUBE "E2X19497xAk">

Derselbe Mechanismus wird auch von anderen Videoportalen, wie clipfish.de oder myvideo.de genutzt - um deren Videos einzubinden, muss man jeweils deren Vorgabe-Quellcode einsetzen und deren ID mit $id in der Tag-Datei ersetzen.

Seitenanfang

Datum als Kalenderblatt

Wieder eine ganz einfache Sache: Einem Tag werden Tag, Monat und Jahr als Parameter übergeben. Das Tag zeichnet den HTML-Code ringsum: in einem Div mit der Klasse "date" sind für Tag, Monat und Jahr je ein div mit jeweils einer eignenen Klasse verschachtelt.

<DATE "$d,$m,$y"> :=<div class="date">
			<div class="month">$m</div>
			<div class="day">$d</div>
			<div class="year">$y</div>
		</div>

Für die Farben sorgt CSS.
Zur Klasse "date". Mit Hilfe "float: left" und "display: inline" wird die Kalenderbox links des nachfolgenden Textes angezeigt und kann umflossen werden. Das "margin: 0 8px 4px 0" gibt die Abstände nach rechts und unten vor. Dazu kommt ein weisser Hintergrund und ein Rahmen.
Die einzelnen Klassen für die Kalenderdaten Tag, Monat und Jahr enthalten die Formatierungsanweisungen, die übersteuert werden sollen.

.date {
   border: 1px solid #eee; background:#fff; color:#ccc;
   float: left; display: inline;
   padding: 0px; margin: 0 8px 4px 0;
   text-align: center; font-size: 70%;
}
.date div.day{
   font-size: 300%; color:#a0a4c0; margin: 0px 4px; padding: 0;
}
.date div.month{}
.date div.year{
   clear: both; background:#eee; color:#bbb;
}

Beispiel:
Ein Kalenderblatt mit umfliessenden Text. Ich habe zur Visualisierung des Textumfluss ein Div mit eingefärbten Hintergrund gesetzt.

<DATE "14,Dez,2010">
	<div style="width: 300px; margin-left: 20px; background: #f8f9fc;">
		Lorem ipsum dolor sit amet, consetetur (...)
	</div>

... erzeugt:


Seitenanfang