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:

Marvin Sengera

Hey! Ich bin Marvin Sengera, Inhaber der Internetagentur "Binärfabrik" aus Paderborn. Ich habe mein Bachelorstudium Informatik mit Schwerpunkt Industriespionage an der Hochschule Hamm Lippstadt abgeschlossen und absolviere derzeit meinen Master in Fachrichtung "Technical Entrepreneurship and Innovation". Ich beschäftige mich rund um die Themen Informatik, Innovation & Unternehmensgründung.

Das könnte dich auch interessieren …

4 Antworten

  1. Rudolf sagt:

    Also ich hab das mit dem Layout so gemacht, jedoch nimmt er mir das Layout von fileadmin nicht an?

  2. Dana sagt:

    Ich habe versucht, das Beschneiden der Bilder wie hier beschrieben zu lösen.
    Leider werden nur die Dummy Images korrekt gecropt.
    Was mache ich falsch?
    Viele Grüße, Dana

Schreibe einen Kommentar