Extensions und Erweiterungen mit Typo3 8.7

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-87-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.contentElement.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.

Interessanterweise gibt es hier einen Unterschied zu 7.6 in den Bezeichnungen, lib.fluidContent.settings.media.popup funktioniert nicht mehr richtig.

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-87-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
  # zeige Anzahl der Treffer
    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.

Außerdem im Template aktiviert werden:

page.config.index_enable = 1 

Typo3-87-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-87-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-87-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-87-extensions5.png

Manche Extensions verfügen über derartige Konfigurationseinstellungen.

Typo3-87-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-87-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-87-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-87-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 Nachrichten 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-87-extensions10.png

Das Ordner-Symbol wird dann blau.

form

Diese Extension finde ich richtig interessant, auch wenn sie anscheinend noch einige Probleme hat. Es handelt sich um eine Systemextension, die also normalerweise installiert ist. Auf der Root-Seite muss man dann nur unter Enthält das zugehörige Template Form(form) einbinden.

Im Menü gibt es ein Element Formulare, welches mir bisher noch nie aufgefallen war.

Typo3-87-form1.png

Wählt man diesen Menüpunkt an, so kann man anfangs nur ein neues Formular anlegen. Später findet man an dieser Stelle auch alle angelegten Formulare und kann sie von dort aus bearbeiten.

Typo3-87-form2.png

Klickt man auf Neues Formular erstellen, so öffnet sich ein kleines Fensterchen, in dem man erst einmal einen Namen für das Formular festlegt. Dann muss man mehrfach auf Weiter klicken.

Man landet dann im eigentlichen Formulareditor.

Typo3-87-form3.png

In der rechten Spalte sieht man immer die Eigenschaften des aktuellen Objektes, momentan als das als Page bezeichnete gesamte Formular. Im mittleren Bereich kann man über einen Klick auf Create new element neue Inhaltselemente hinzufügen.

Typo3-87-form4.png

Die Auswahl an Elementen ist schon recht groß. In der Regel wird man aber meist die Typen Text oder Textarea brauchen.

Typo3-87-form5.png

Bei den Eigenschaften kann man angeben, ob das Feld unentbehrlich ist, Required field. Zusätzlich kann man für jedes Feld Validatoren angeben, das hat aber bei mir nur mit Email richtig funktioniert.

Die Felder kann man bequem mit der Maus in der Reihenfolge verschieben.

Mit einem Klick auf das Icon mit dem Auge kann man sich eine Vorschau auf das Aussehen des Formulares anzeigen lassen.

Typo3-87-form5.png

Wenn alles erstellt ist, dann klickt man auf Settings, um die Eigenschaften des Formulares zu bearbeiten.

Interessant sind vor allem die Finisher:

  • Email an Empfänger
  • Email an Absender
  • Redirect to a page

Hiermit werden die Mails generiert.

Bei den Angaben kann man Bezug nehmen auf die Felder im Formular. Im Screenshot also auf die angegebene Mailadresse und den Namen des Absenders.

Bei mir gab es ein Problem, wenn die Seitenweiterleitung vor dem Mailversand auftauchte. Dieser Finisher sollte also wohl immer am Ende stehen.

Am Ende speichert man das Formular ab.

Ich habe leider keine Möglichkeit gefunden in der grafischen Oberfläche für die Checkboc die Default-Einstellung zu setzen. Das habe ich dann direkt in der erzeugten Datei fileadmin/user_upload/Bestellformular.yaml gemacht.

      -
       defaultValue: '1'
       type: Checkbox
       identifier: checkbox-1
       label: 'Antwort erwünscht'


Das Formular kann man dann auf eine oder mehrere Seiten einbinden. Dazu erstellt man ein neues Inhaltselement und wählt im Reiter Formulare den Eintrag Mail-Formular aus.

Dann kann man im Tab Plug-In die vorher gemachte Formulardefinition auswählen.






Weitere