Typo3 7: die Backend Login Box modifizieren

27. April 2016

Um der Backend Login Box ein eigenes Logo zu geben und dieses via CSS zu verändern, geht man folgendermaßen vor:

zunächst im Backend unter Erweiterungen -> Typo3 Backend -> Konfigurieren ein Logo definieren (und falls gewünscht eine Highlightfarbe).

Dann in ext_tables.php einer Erweiterung folgenden Code hinzufügen:

  1. $TBE_STYLES['inDocStyles_TBEstyle']='
  2. .typo3-login-logo {
  3. background: #000000;
  4. }
  5. ';

Do the following to set a custom logo in the backend login box and to change that logo via CSS:

Extensions -> Typo3 Backend -> configure: define a logo

Then add the following to the ext_tables.php of an extension:

  1. $TBE_STYLES['inDocStyles_TBEstyle']='
  2. .typo3-login-logo {
  3. background: #000000;
  4. }
  5. ';

typo3 7: Vorschaubild eines Vimeo Videos

25. April 2016

Es gibt ja im Backend die Möglichkeit, Videos hochzuladen. Um eine Videogalerie aus beliebig vielen Vimeo Videos zu erstellen, brauchte ich nun für jedes Video ein Vorschaubild. Praktischerweise gibt es von Typo3 selbst einen VimeoHelper! Den kann man einfach so in einem eigenen ViewHelper benutzen:

  1. /**
  2. * @param \TYPO3\CMS\Extbase\Domain\Model\FileReference $video
  3. * @return string
  4. */
  5. public function render($video) {
  6. $helper = new \TYPO3\CMS\Core\Resource\OnlineMedia\Helpers\VimeoHelper();
  7. $tmp = $helper->getPreviewImage($video->getOriginalResource()->getOriginalFile());
  8. return $tmp;
  9. }

Wahnsinn!

typo3 7: Neues tt_content layout hinzufügen und stylen

11. April 2016

Ich arbeite zum ersten Mal mit der 7er Version von Typo3 und musste heute für bestimmte Spezialseiten die Ausgabe von tt_content etwas ändern. Und zwar sollte textmedia aka “Text & Medien” (früher textpic aka “Text & Bild”, wenn ich das recht verstanden habe) ein neues Layout bekommen und dieses sollte auch etwas anders aussehen als die normale Darstellung, das Medienelement muss nach links und braucht auch diverse Bootstrap Klassen um richtig auszuschauen.

Erstaunlicherweise war das mit Typo3 gar nicht so schwer umzusetzen. Zunächst mal habe ich im setup folgendes TypoScript hinzugefügt, um das Layout Dropdown um einen Eintrag zu erweitern:

  1. TCEFORM.tt_content.layout.addItems.10 = Layout Spezialseite

Das klappt wunderbar und ich kann bei meinem tt_content Element nun diese Option auswählen. Um nun die Darstellung zu ändern, gehe ich zunächst in meine Typo3 source und hole mir die Dateien sysext/fluid_styled_content/Resources/Private/Templates/Textmedia.html und sysext/fluid_styled_content/Resources/Private/Partials/MediaGallery.html. Diese kopiere ich in meine extbase Extension in extensionname/Resources/Private/Templates/Content/Textmedia.html bzw. extensionname/Resources/Private/Templates/Content/Partials/Textmedia.html

Der Pfad ist dabei nicht so wichtig, denn der muss ohnehin selbst im setup definiert werden:

  1. lib.fluidContent {
  2. templateRootPaths.10 = EXT:extensionname/Resources/Private/Templates/Content/
  3. partialRootPaths.10 = EXT:extensionname/Resources/Private/Templates/Content/Partials/
  4. }

Und, man höre und staune, nach einem gründlichen löschen aller Caches nimmt typo3 nun tatsächlich meine Textmedia.html her. In dieser habe ich Zugriff auf die Variable {data.layout} und kann so mein Layout mit der Nummer 10 abfragen. Meine Textmedia.html sieht nun in etwa so aus:

  1. <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
  2. <div id="c{data.uid}" class="layout-{data.layout}">
  3. <f:if condition="{data.layout} == 10">
  4. <f:then>
  5. <div class="row">
  6. <div class="col-xs-12 col-sm-6">
  7. <f:render partial="MediaGallery" arguments="{_all}" />
  8. </div>
  9. <div class="col-xs-12 col-sm-6">
  10. <f:format.html>{data.bodytext}</f:format.html>
  11. </div>
  12. </div>
  13. </f:then>
  14. <f:else>
  15. ....
  16. </f:else>
  17. </f:if>
  18. </div>

In f:else habe ich einfach das reinkopiert, was vorher schon da war und im f:then mache ich einfach was ich beim Layout10 haben will. In der MediaGallery.html habe ich auch Zugriff auf diese Variable und kann das dementsprechend auch so anpassen wie ich das brauche.