4.8| News System für Typo3 – tx_news einrichten

In diesem Tutorial erkläre ich, wie man die Newsextension tx_news installieren und einrichten kann. Im Introductionpackage von Typo3 ist nicht tt_news sondern tx_news installiert. Laut der Community soll der Support zu tt_news bald auslaufen.

Die Installation von tx_news ist ähnlich wie die bei tt_news. Nach der Installation im Extensionmanager legen wir im Seitenbaum ein neuen Ordner mit dem Namen (z.B.) „News“ an. Darin legen wir eine Seite (z.B.) „Aktuelles“ an.

Als nächstes legen wir den Newsordner in Typo3 als Newsordner fest. Dafür klicken wir auf den „News“ Ordner mit „Rechtsklick -> Bearbeiten ->Verhalten -> Benutze als Container Nachrichten“. Unter der Seite Aktuelles legen wir weitere Seiten für die Detailansicht und die Singleansicht an.

Die Ansicht „Detail“ blenden wir in der Navi aus. (Detailansicht -> Rechtsklick -> Bearbeiten -> Zugriff -> In Menüs ausblenden“.

Um die News auf der Aktuelles Seite ausgeben zu lassen Klicken wir auf die Seite Aktuelles und fügen das PlugIn „Nachrichtensystem“ ein. Hier können wir unter dem Reiter PlugIn die Ausgabe einstellen. In diesem Beispiel habe ich z.B. die Listenansicht ausgewählt. Unter dem Menüpunkt „Weitere Einstellungen“ kann man Seitenid´s für die Einzelansicht wählen.

Um ein Archiv anzulegen, legen wir eine Seite „Archiv“ im Typo3 Seitenbaum an. Hier klicken wir auf „Archivierte -> Archiv anlegen“. Bei den „Weiteren Einstellungen“ können wir wieder die Seitenid für die Listenansicht auswählen.

Das Template von tx_news

Damit die Änderungen beim nächsten Update nicht überschrieben werden, sollten alle Template-Ordner kopiert und in einem eigenen Pfad geändert werden.

Die Originaldateien (im Introduction Package) liegen im „/typo3conf/ext/news/Resources/Private/“ Ordner. Den Pfad können wir im Typoscript beeinflussen.

Folgendes kommt dann ins Setup:

plugin.tx_news {
        view {
                templateRootPath = fileadmin/templates/ext/news/Templates/
                partialRootPath = fileadmin/templates/ext/news/Partials/
                layoutRootPath = fileadmin/templates/ext/news/Layouts/
        }
}

(Unter /typo3/typo3conf/ext/news/Configuration/TypoScript sind weitere Einstellungen)

Single-Ansicht:

Template/News/Detail.html

List-Ansicht:

Partials/List/Item.html

fileadmin/default/TypoScript/Extension/TxNews

Sortierung

Um die Sortierung der Nachrichten “freizuschalten” müssen wir ins Typoscript Setup folgendes eintragen:

plugin.tx_news.settings.orderByAllowed = 
author,uid,title,teaser,author,tstamp,crdate,datetime,categories.title

Um die Bildgröße des Teasers zu beeinflussen müssen wir folgendes ins Typoscript eintragen.

plugin.tx_news{
settings{
list{
      media {
        # limit image sizes (px)
        image {
          maxWidth = 220
        }
      }
}
}
}

Die Crop-Funktion funktioniert so leider nicht. Dafür muss in der Partials/List/Item.html die entsprechenden Werte eingetragen werden. Dies lösen wir über folgenden Viewhelper:

<f:if condition="{mediaElement.type} == 0">
<f:image src="uploads/tx_news/{mediaElement.image}"
 title="{mediaElement.title}" alt="{mediaElement.alt}"
width="{settings.list.media.image.maxWidth}" //z.B. "250c" (c steht für crop)
height="{settings.list.media.image.maxHeight}" /> //z.B. "250"
</f:if>

Und in der „Partials/List/Item.html“ diesen Viewhelper:

<f:if condition="{newsItem.teaser}">
            <f:then>
                <f:format.html>
<f:format.crop maxCharacters="{settings.cropMaxCharacters}" //z.B. 160
respectWordBoundaries="1">{newsItem.teaser}</f:format.crop>
</f:format.html>
            </f:then>
            <f:else>
                <f:format.html>
<f:format.crop maxCharacters="{settings.cropMaxCharacters}" //z.B. 160
 respectWordBoundaries="1">{newsItem.bodytext}</f:format.crop>
</f:format.html>
            </f:else>
        </f:if>

Die Bildgröße der Single Ansicht lässt sich in „Partials\Detail\MediaImage.html“ ändern.

Lighbtox einfügen

Für die Lightbox verwende ich die Extension „t3colorbox“.

Wir müssen in der Datei „Partials\Detail\MediaImage.html“ folgende Zeilen ändern ändern (class=”t3colorbox” data-rel=”news-single” hinzufügen)

<a class="t3colorbox" data-rel="news-single" title="{mediaElement.caption}"
 href="{f:uri.image(src:'uploads/tx_news/{mediaElement.content}' maxWidth:'800')}">

Pagination

Um eine Pagination hinzuzufügen müssen wir folgende Zeilen Typoscript im Setup ergänzen:

plugin.tx_news{
settings{
list{
paginate {
itemsPerPage=3
insertBelow=TRUE
lessPages=TRUE
#forcedNumberOfLinks=3
pagesBefore=1
pagesAfter=1
}
}
}
}

Typo3 CMS 6.1 FLUID Template programmieren:

• 4.11| Typo3 CMS 6 Backend auf deutsch umsetellen
• 4.10| Logo mit Link zur Startseite einfügen – Typo3 Fluid
• 4.9| Ein Kontaktformular in Typo3 anlegen – Typo3 Fluid
• 4.8| News System für Typo3 – tx_news einrichten
• 4.7| RealUrl – Suchmaschinenfreundliche Links für Typo3 – SEO
• 4.6| Eine erweiterte Suchfunktion auf MySQL Basis für Typo3
• 4.5| Typo3 Updaten – Wie Update ich Typo3 richtig?
• 4.4| Inhaltsblöcke vererben – Typo3 Template mit FLUID
• 4.3| Objekt: TEXT – Textblöcke in Typoscript Typo3 FLUID
• 4.2| Menüs, Untermenüs und Navigation erstellen – Typo3 Fluid
• 4.1| Rechte, Linke Spalte und Rand ausgeben – Mehrspaltiges Layout
• 3.7| ViewHelper: Inline Notation – If Abfragen in einer Zeile – Typo3 Fluid
• 3.6| ViewHelper: Comment – Kommentieren von Code
• 3.5| ViewHelper: if – If Abfragen im Tempalte
• 3.4| ViewHelper: Hyperlinks – Externe und Interne Links einbauen
• 3.3| ViewHelper: cObject – Typoscript Objekte im Template anzeigen
• 3.2| ViewHelper: Format – Daten für das Frontend aufbereiten
• 3.1| ViewHelper: Image – Bilder einfügen
• 2.1| Layouts, Templates und Partials – Typo3 FLUID Template
• 2.0| Der Einstieg in FLUID
• 1.2| FLUID Template aufteilen – Struktur erstellen
• 1.1| TypoScript Basics – Typo3 Template mit FLUID programmieren