Extensions und Erweiterungen mit Typo3 7.6

Aus Debacher-Wiki
Wechseln zu:Navigation, Suche

Für viele Extensions hat der Wechsel von css_styled_content hin zu fluid_content Auswirkungen. Viele Beschreibungen im Netz funktionieren nicht mehr.

magnific-popup

Hat man Medien auf einer Seite integriert, so kann man das Häkchen Bei Klick vergrößern aktivieren. Der Effekt ist aber recht schlicht, es öffnet sich nur ein Fenster.

Typo3-76-extensions1.png

Für diesen Zweck gibt es viele Extension, die schönere Effekte erzeugen. Aber man braucht eigentlich keine Extension, sondern nur ein geeignetes Javascript. Ich benutze hier MagnifiPopup von http://dimsemenov.com/plugins/magnific-popup/ .

Die Javascript und Css-Elemente habe ich einfach in meine Ordner für das eigene Layout gelegt.

Dann habe ich in meinem Sysordner Typoscript Templates ein neues Element magnific-popup angelegt und in das Root-Template eingebunden.

page.footerData.20 = TEXT
 page.footerData.20.value (
 
    <script src="{$resDir}/Public/JavaScript/jquery.magnific-popup.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
    $('a[rel*="lightbox"]').magnificPopup({
      type: 'image',
      tLoading: 'Lade Bild...',
      tClose: 'Schließen (Esc)',
      image: {
        titleSrc: function(item) {
          var title = item.el.attr('title');
          var description = item.el.attr('alt');
          return ((title)?title:'') + ((description)?'<small>'+ description +'</small>':'');
        }
      },
      gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0, 1],
        tCounter: '%curr% von %total%',
        tPrev: 'Zurück (Linke Pfeiltaste)',
        tNext: 'Vorwärts (Rechte Pfeiltaste)'
      },      
      mainClass: 'mfp-with-zoom', // this class is for CSS animation below
      zoom: {
        enabled: true, // By default it's false, so don't forget to enable it
        duration: 300, // duration of the effect, in milliseconds
        //   easing: 'ease-in-out', // CSS transition easing function
      }      
    });
  });
  </script>
  )
 
 lib.fluidContent.settings.media.popup {
   JSwindow = 0
   directImageLink = 1
   linkParams.ATagParams.dataWrap = class="lightbox" rel="lightbox{field:uid}" title="{file:current:title}"  
 }
 
 plugin.tx_news.settings.detail.media.image.lightbox.enabled = 1

Der erste Teil des Javascript ist schon auf der Layout-Seite beschrieben und hat mit dem Responsive-Menü zu tun. Ich habe diesen Bereich hier mit ausgelagert. Die Funktionsweise des Javascript für das Popup ist ähnlich wie für das Menü. Es werden bestimmte Klassen im Layout gesucht und dann manipuliert das Javascript diese Einstellungen.

Dazu benötigt man dann noch etwas Typoscript, welches die Klassenbezeichnung lightbox um die Grafiken herum erstellt, also den dataWrap bearbeitet. Die letzte Zeile aktiviert das Popup auch für Bilder in der News-Anzeige, da fehlt nämlich die entsprechende Einstellmöglichkeit im Backend.

indexed_search

Diese Extension möchte ich auf der Seite Suche einsetzen. Es handelt sich hierbei um einen Systemextension, die nur aktiviert werden muss. Außerdem muss sie in der Rubrik Enthält im Template der Root-Seite hinzugefügt werden. Um Änderungen an dem Aussehen der Elemente vornehmen zu können habe ich die Template Unterverzeichnis des Ordners Private in mein vorhandenes Verzeichnis kopiert.

cd netttemplate/Resources/
mkdir indexed_search
cd indexed_search
cp -a ../../../../typo3/sysext/indexed_search/Resources/Private/* .

Was wieder relativ typisch für Typo3 ist, ist die Tatsache, dass es noch eine Systemextension indexed_search_mysql gibt, die die Suche verbessern soll. Mehr Informationen habe ich nicht finden können, außer das diese Extension bei Version 8.x in indexed_search integriert wurde. Also habe ich auch diese Extension aktiviert, mehr muss oder kann man mit ihr anscheinend nicht machen.

Für die weiteren Einstellungen habe ich mir dann auf der Seite Typoscript-Templates ein neues Template-Element mit dem Namen indexed_search angelegt.

Typo3-76-extensions2.png

Im Feld Konstanten stehen die folgenden Zeilen, die nur die Kopie des Layouts aktivieren:

plugin.tx_indexedsearch.view.templateRootPath = {$resDir}/indexed_search/Private/Templates/
plugin.tx_indexedsearch.view.partialRootPath = {$resDir}/indexed_search/Private/Partials/
plugin.tx_indexedsearch.view.layoutRootPath = {$resDir}/indexed_search/Private/Layouts/

Im Feld Setup stehen dann ein paar Einstellungen

plugin.tx_indexedsearch {
  # Anzeige der Regeln unter dem einfachen Formular
    settings.displayRules = 0
  # erweiterte Suche abschalten
    settings.displayAdvancedSearchLink = 1
  # show the number of results
    settings.displayResultNumber = 0
}

Damit werden dann einige Einstellungen aus typo3/sysext/indexed_search/Configuration/TypoScript/setup.txt überschrieben.

Auf der Seite Suche muss dann noch das Plugin für die Suche eingebunden werden.

Typo3-76-extensions3.png

Mich nervt etwas, dass beim Suchergebnis soviele Details mit angezeigt werden. Das lässt sich nur im zugehörigen Partial ändern, indem man den ganzen markierten Bereich entfernt und nur die Zeile

<p class="tx-indexedsearch-description">{row.description -> f:format.raw()}</p>

stehen lässt.

Typo3-76-extensions12.png

Real-URL

Nach der bisherigen Konfiguration lautet der Link auf die Startseite http://meine-domain.de/index.php?id=7, das ist nicht besonders sprechend. Die Extension RealURL ist genau dafür da hieraus eine sprechendere Version zu machen. Leider ist diese Extension deutlich aufwändiger zu konfigurieren als die bisherige Extension simulatestatic. Aber was solls, die alte Extension ist aus dem typo3 heraus geflogen.

RealURL muss installiert und aktiviert werden, es taucht dann eine zugehörige Funktion links im Backend auf.

Im Root-Template muss im Setup-Feld folgender Code ergänzt werden, um die Extension wirklich zu aktivieren.

config {
 prefixLocalAnchors = 1
 simulateStaticDocuments = 0
 tx_realurl_enable = 1
 absRelPath = /
 absRefPrefix = /
 disablePrefixComment = 1
}

Damit wird dann schon einmal ein Link der Art http://meine-domain.de/ausgangsseite/startseite/ erzeugt. Daran gefällt mir nicht, dass das Verzeichnis ausgangsseite mit auftaucht, da dieses bei allen Seiten auftauchen müsste. Das lässt sich aber in den Seiteneigenschaften der Ausgangsseite ändern.

Typo3-76-extensions4.png

Klickt man hier das Häkchen bei Nicht ins sprechende URL aufnehmen an, so taucht das Verzeichnis nicht mehr in der URL auf. Nun lautet die URL der Startseite http://meine-domain.de/startseite/. Statt des schließenden Slahes hätte ich gern ein .html im Link. Das ist mit etwas Aufwand für alle Seiten erreichbar.

Hierzu muss man in die Funktion Erweiterungen -> Installierte Erweiterungen und dann auf die Erweiterung RealURL. Hier klickt man auf das Zahnrad (Konfigurieren).

Typo3-76-extensions5.png

Manche Extensions verfügen über derartige Konfigurationseinstellungen.

Typo3-76-extensions6.png

Bevor man diese Einstellung abspeichert, wichtig ist das PHP source im Feld Enable automatic configuration, sollte man darauf achten, dass es im Verzeichnis typo3conf der Installation weder eine Datei realurl_autoconf.php noch realurl_conf.php gibt. Falls es eine dieser Dateien gibt, so wird sie gelöscht. Nach dem Speichern der Konfiguration und dem Aufruf einer beliebigen Seite im Frontend ist eine Datei realurl_autoconf.php im Verzeichnis vorhanden.

In dieser Datei werden zwei Änderungen vorgenommen:

 'defaultToHTMLsuffixOnPrev' => 1,
  'acceptHTMLsuffix' => '.html',

Danach wird dann diese Datei zur eigentlichen Konfigurationsdatei gemacht:

cp -a realurl_autoconf.php realurl_conf.php

Sollte sich trotz dieser Veränderungen der Link auf die Startseite nicht ändern, so muss man über die Funktion Sprechende URLs die Einstellungen unter URL-Daten löschen, auch wenn Typo3 davor warnt.

Typo3-76-extensions7.png

Danach ist die Startseite dann unter der URL http://meine-domain.de/startseite.html erreichbar und verlinkt.

news

Die bisherige Standard-Extension tt_news für die Verwaltung von News gilt als veraltet, obwohl sie noch verfügbar ist. Deshalb setzte ich für neue Projekte auf die Nachfolge-Extension news, zumal die Konfiguration sehr ähnlich ist.

Die Extension muss über die Funktion Erweiterungen installiert und aktiviert werden. Zusätzlich muss ihre Konfiguration im Root-Template mit aufgenommen werden. Für die individuelle Konfiguration der Extension habe ich ihre Rsourcen wieder mit in meinen Verzeichnispfad kopiert.

cd fileadmin/nettemplate/Resources/
mkdir news
cd news
cp -a ../../../../typo3conf/ext/news/Resources/*  .

Dann habe ich im Sysordner Typoscript-Templates eine neues Template Element angelegt und news genannt. Das Element hat folgenden Inhalt.

Konstanten:

plugin.tx_news.view.templateRootPath = {$resDir}/news/Private/Templates/
plugin.tx_news.view.partialRootPath = {$resDir}/news/Private/Partials/
plugin.tx_news.view.layoutRootPath = {$resDir}/news/Private/Layouts/
plugin.tx_news.settings.cssFile = {$resDir}/news/Public/Css/news-basic.css

Setup

plugin.tx_news.settings.detail.showSocialShareButtons = 0
plugin.tx_news.settings.detail.media.image.lightbox.enabled = 1

Das Template Element habe ich dann ins Root-Template mit eingebunden.

Typo3-76-extensions8.png

Dann muss im Seitenbaum das Plugin für News noch entsprechend eingebunden werden. Dazu benötigt man in der Regel drei Seiten:

  • Seite für die Liste der News (Nachrichten)
    • verborgene Seite für die Detailansicht (Einzelansicht)
    • Seite für das Archiv (Archiv)

Die Detailansicht und das Archiv wird man in der Regel als Unterseite anlegen.

Nun muss das Plugin noch auf den drei Seiten eingebunden und etwas konfiguriert werden. Dabei geht es vor allem um die Adressen der zugehörigen Seiten. Im Reiter Einstellungen wählt man den Ausgangspunkt, also den Sysordner Nachrichten aus. Im Reiter Weitere Einstellungen die Seiten für die Einzelansicht.

Typo3-76-extensions9.png

Die Einträge für die Listenansicht und den Zurück-Link muss man dann auf den entsprechenden Unterseiten eintragen. Die Seite Einzelansicht sollte nicht in Menüs angezeigt werden.

Nun kann man noch dem Sysordner News deutlich machen, dass er Nachrichten beinhaltet. Dazu geht man über die Seiteneigenschaften des Sysordners auf Verhalten und gibt dort an, dass er als Inhalt Nachrichten trägt.

Typo3-76-extensions10.png