Druckansicht mit TYPO3

Vorraussetzungen

Bevor Sie eine Druckansicht erstellen, sollten Sie sich ein wenig mit der Template Erstellung in TYPO3 auskennen. Hierzu können Sie den Abschnitt Template Erstellung auf dieser Seite lesen.



Realisierung einer Druckansicht mit TYPO3

Damit ein Besucher der Webseite die Webseite besser ausdrucken kann ist es gut, wenn es eine extra Ansicht zum Drucken gibt. In diesem Abschnitt möchte ich erklären wie das Basistemplate Schritt für Schritt zu erweitern ist um eines Druckansicht einzubauen.


Im ersten Schritt ist ein weiteres Template zu entwerfen, das sich optimal drucken lässt, dabei sollte auf Grafiken möglichst verzichtet werden.


Das Basistemplate für die Druckansicht hat folgenden Aufbau:
 

<html>
<head>
<title>Seitentitel</title>
<link rel="stylesheet" type="text/css" href="print-style.css" />
</head>
<body>
<!-- ###DOCUMENT_BODY### START-->
<div id="Page">
<div id="TopLayer">###TOPGFX###</div>
<div id="ContentLayer">
<!-- ###CONTENT### START-->PrintContent
<!-- ###CONTENT### END-->
</div>
</div>
<!-- ###DOCUMENT_BODY### END-->
</body>


Der Subpart "CONTENT" soll später durch den Inhalt ersetzt werden. Der Marker "TOPGFX" soll durch eine Grafik ersetzt werden, die oberhalb des Inhalts erscheint.


Das verwendete Stylesheet "print-style.css" hat folgenden Aufbau:

   body {
color: black;
background-color: rgb(255,255,255);
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0;
text-align: center; /* Zentrierung im Internet Explorer */
}

div#Page {
text-align: left; /* Seiteninhalt wieder links ausrichten */
width: 800px;
padding: 0.5em;
background-color: rgb(255, 255, 255);
}

div#ContentLayer {
margin-left: 0px;
padding: 0 1em;
border: 1px dashed silver;
}

div#ContentLayer h1 {
font-size: 1.5em;
margin: 0 0 1em;
}

div#ContentLayer h2 {
font-size: 1.2em;
margin: 0 0 1em;
}

div#ContentLayer p {
font-size:1em;
margin: 1em 0;
}

Drucktemplate dem Haupttemplate als Ressourcen hinzufügen

Im nächsten Schritt müssen die Dateien für die Druckansicht (template, stylesheet und kopfgrafik) als Ressourcen zu dem normalen Template hinzugefügt werden. Dadurch können die Dateien im Templatedatensatz genutzt werden.

 

Um dies zu erreichen ist zunächst die Templatekonfiguration im Backend über "Web -> Template" zu öffnen.

Nun ist das korrekte Template auszuwählen (in diesem Fall das Template der Startseite).


Dann ist in den Modus "Info/Modify" (oben rechts) zu wechseln, falls dieser noch nicht aktiv ist.


Als nächstes ist das Template zum ändern zu öffnen indem man auf "Click here to modify the hole template Record" klickt. Nun ist die Konfiguration des gesamten Templates sichtbar. Zu den Ressourcen sollten nun die Dateien "print-template.html", "print-style.css" und "toplayer-print.gif" hinzugefügt werden. Danach sollten die Ressourcen inetwa so aussehen:

TypoScript Setup der Druckansicht

Nachdem nun alle Ressourcen im Templatedatensatz verfügbar sind, müssen wir TYPO3 noch beibringen das es für jede Seite eine Druckansicht gibt. Um dies zu erreichen muss der Setupcode des Templates um ein paar Zeilen TypoScript Code erweitert werden.

 print = PAGE 
print.typeNum = 98
print.stylesheet = print-style.css
print.10 = TEMPLATE
print.10 { template = FILE
template.file = print-template.html
workOnSubpart = DOCUMENT_BODY
subparts {
CONTENT < styles.content.get
} marks{
TOPGFX = IMAGE
TOPGFX.file = toplayer-print.gif
}
}


Zunächst wird ein neues PAGE Objekt Namens "print" eingefügt.
Dieses PAGE Objekt hat die typeNum 98, das heisst es ist aktiv, wenn der Type 98 einer Seite angefordert wird. Bei einer Standardanfrage an ein Seite die nicht der Druckansicht entspricht ist der type = 1.

 

Nachdem der Templatedatensatz gespeichert wurde kann über die Variable type=98 die Druckansicht aufgerufen werden. Der Aufruf von index.php?type=98  zeigt also die Druckasicht unserer Startseite.

 

 

HTML Template erweitern

Theoretisch gibt es bereits jetzt für jede Seite eine Druckansicht. Damit ein Besucher diese auch nutzen kann, muss dafür gesorgt werden, dass die Druckansicht einer jeden Seite verlinkt wird.

 

Wenn du bereits ein wenig Erfahrung mit Templates gesammelt hast wird dir vielleicht schon selbst eine Lösung einfallen. Wenn nicht haben wir hier eine vorbereitet.

 

Zunächst müssen wir das standard Template öffnen und einen Marker einfügen der z.b. ###PRINTVIEW### heisst. Dieser Marker soll später per TypoScript mit einem Drucklink für die aktuelle Seite überschrieben werden.

Um dies zu erreichen ist der TypoScript Setupcode des HTML Templates zu erweitern. Im Bereich wo die Marker ersetzt werden, sind folgenden Zeilen hinzuzufügen:

 PRINTVIEW = TEXT 
PRINTVIEW {
value = Druckansicht
typolink.parameter.data = page:uid
typolink.additionalParams.insertData=1
typolink.additionalParams =&type=98

}


Dadurch wird der Marker ###PRINTVIEW### durch einen Link ersetzt der auf die jeweilige Druckversion der Seite verweist.

Dabei ist darauf zu achten dass du diesen Abschnitt in dem Bereich einfügst wo die Marker ersetzt werden also zwischen

page.20.marks{

und dem abschliesenden


}

für diesen Bereich.

 

Wenn statt eines Textlinks ein Bild, z.B. ein Icon verwendet werden soll kann folgender TypoScript Setupcode verwendet werden:

  PRINTVIEW = IMAGE
PRINTVIEW.file = print.gif
PRINTVIEW.imageLinkWrap = 1
PRINTVIEW.imageLinkWrap {
enable = 1
typolink {
parameter.data = page:uid
additionalParams.insertData=1
additionalParams =&type=98
}
}

Navigation