GMENU und die Ressourcen-Problematik unter Typo3 6.2

In den 4er Versionen von Typo3 war die Ansprache von Bildern aus den Seitenressourcen (Field Media) etabliert und funktionierte. Mit Einführung des File Abstraction Layers (FAL) in den 6er Versionen änderte sich alles und der Zugriff wie damals mit Typoscript programmiert funktionierte nicht mehr.

Besonders für die grafischen Menüs in Typo3 ist dieser Zugriff aber notwendig. Leider gibt es dazu nicht viele Posts und offensichtlich auch unterschiedliche Ansätze. Wir haben unter Typo3 6.2.19 nun mit dieser Variante ein GMENU eines unserer Kunden erfolgreich wiederbelebt. Hier ist der relevante Teil:

Unter Typo3 4.5.

  1 = GMENU
  1 {
  noBlur = 1
  wrap = |
  NO = 1
  1.NO {
  XY=133,80
    10 = IMAGE
    10 {
          file {
          import.field = media
          import = uploads/media/
          import.listNum = 0
          required = 1
        }
}
}

Unter Typo3 6.2.19

    1 = GMENU
    1 {
        # Ebene 1 als Bilderliste
        # Normalzustand
      expAll = 1
      noBlur = 1
      wrap = |
      NO = 1
      NO {
       XY = 133,80
       10 = IMAGE
       10 {
         file {
            format = png
            import.cObject = FILES
            import.cObject {
              references {
                 table = pages
                 fieldName = media         
               }
              renderObj = IMG_RESOURCE
              renderObj {
               required = 1
               file.import.data = file:current:publicUrl         
              }
           }
         }
       }
       ATagTitle.field = title
     } # ende NO

 

Hier sind noch einige Links, die Erhellendes zum Thema beitragen:

www.debacher.de/ublog/2015/03/typo3-6-2-und-grafisches-menue/
wiki.typo3.org/File_Abstraction_Layer
wiki.typo3.org/File_Abstraction_Layer
www.typo3.net/tsref/gifbuilder/gifbuilder/

Übersetzung bzw. Lokalisierung im RTE anzeigen

Die eine oder andere hat scih sicher schon mal über die automatischen title-Belegungen im Link-Browser des RTE geärgert. Standardmäßig werden dort nämlich die englischen Hinweise eingetragen. Mühsam dies per Hand zu ändern.

Der LFEditor könnte weiterhelfen, tut es aber nicht ohne «Nachhilfe». Die jeweiligen Dateien müssen zuerst angepasst werden. Die Übersetzungen werden aber erst wirksam, wenn mann in der Seiten-Konfiguration (TSConfig) diesen wesentlichen Befehl einträgt:

RTE.default.defaultContentLanguage = de

Voilà.

Update auf Typo3 6.2.19 Powermail 2.25.0 > Parsley Validierung Fehler

Bei Updaten der LTS Version kann es in Kombination mit Powermail 2.25.0 zu Problemen mit der Parsley Validierung kommen. Die äußern sich in einem Javascript Fehler in der parsley.min.js.

Der Fehler läßt sich durch Ersetzen der betreffenden parsley.min.js durch eine aktuellere Version  (2.3.5) im  Verzeichnis EXT/powermail/Resources/Public/JavaScripts/Libraries beseitigen. 

Hier kann man die aktuelle parsley.min.js downloaden.

Klasse zu tt_news Images hinzufügen

Man braucht eine Klasse, um das «Aussehen» von Inhaltselementen mittels CSS nachvollziehbar anzupassen. In tt_news sind beispielsweise die Images nicht immer optimal eingerichtet. Da diese Images via Marker im Template aufgerufen werden und man aus Vorsicht und Konsistenz nicht unbedingt im PHP der Extension Dateien arbeiten möchte, gibt es einen einfachen Weg eine Klasse via Typoscritp hinzuzufügen. Man muss nur ins Setup für tt_news folgende Zeile integrieren:

plugin.tt_news.displayList.image.params=class="beliebigerKlassenname" für die Bilder in der Übersicht bzw. Liste bzw.

plugin.tt_news.singleView.image.params=class="beliebigerKlassenname" für die Bilder in der Detail- bzw. Einzelansicht

Realurl SR Language Menu und die realurl_conf.php

Wenn man bei mehrsprachigen (multilingualen) Website mit den Extensions realurl und sr_language_menu arbeitet gibt es eine Kleinigkeit, die in den meisten Dokumentationen nicht explizit erwähnt wird und dazu führt, dass die Verlinkungenüber das SR Languagemenü nicht erbeiten: die Anpassung der realurl_conf.php die im Verzeichnis typo3conf abgelegt ist. Hier muss man im Bereich «preVars» folgende Ergänzung vornehmen und je nach Anzahl der Sprachversionen erweiteren bzw. verkürzen:

$TYPO3_CONF_VARS['EXTCONF']['realurl'] = array(
    '_DEFAULT' => array(
        'init' => array(
            'enableCHashCache' => 1,
            'appendMissingSlash' => 'ifNotFile',
            'enableUrlDecodeCache' => 1,
            'enableUrlEncodeCache' => 1,
            'postVarSet_failureMode' => '',
        ),
        'redirects' => array(),
        'preVars' => array(
            array(
                'GETvar' => 'no_cache',
                    'valueMap' => array(
                        'nc' => 1,
                    ),
                    'noMatch' => 'bypass',
                ),
                array(
                    'GETvar' => 'L',
                    'valueMap' => array(
                        'de' => '0',        // Default Sprache          
                        'en' => '1',       //weitere Sprache entsprechend ID Websitesprache der Rootseite
                        'fr' => '2',       //weitere Sprach …
                    ),
                    'valueDefault' => 'de',
                    'noMatch' => 'bypass',
                ),
 

Probleme und Auffälligkeiten beim Upgrade von 4.5. LTS auf 6.2. LTS

1
«The requested page didn’t have a proper connection to the tree-root!»
Sollte die 6.2.er Installation diese Fehlermeldung bei Aufruf des Frontends kommen und wurde die Site vor dem Upgrade mit TemplaVoilà betrieben, dann lohnt ein Blick ins Install-Tool bzw. die LocalConfiguration.php:

Das Feld $TYPO3_CONF_VARS[‘FE’][‘addRootLineFields’] sollte leer sein. Ggf. also die alten TemplaVoil-Einträge löschen.

2

Bei Fatal error: Call to undefined method TYPO3\CMS\Core\Utility\GeneralUtility::readLLXMLfile() in …

Diesen Code

function includeLocalLang() {
$llFile = t3lib_extMgm::extPath(wt_gallery).'locallang.xml';
$LOCAL_LANG = t3lib_div::readLLXMLfile($llFile, $GLOBALS['LANG']->lang);
return $LOCAL_LANG;
}

durch diesen ersetzen

function includeLocalLang() { $llFile = t3lib_extMgm::extPath(wt_gallery).'locallang.xml'; $version = class_exists('t3lib_utility_VersionNumber') ? t3lib_utility_VersionNumber::convertVersionNumberToInteger(TYPO3_version) : t3lib_div::int_from_ver(TYPO3_version); if ($version >= 4007000) { $LOCAL_LANG = t3lib_l10n_parser_Llxml::getParsedData($llFile, $GLOBALS['LANG']->lang); } else { $LOCAL_LANG = t3lib_div::readLLXMLfile($llFile, $GLOBALS['LANG']->lang); } return $LOCAL_LANG; }

Siehe auch hier.

Tooltip Sprachanpassung bei rtehtmlarea

>Die Tooltips beim häufig eingesetzten Rich-Text-Editor htmlarea sind standardmäßig englisch. Möchte man automatisch die richtige Sprache ausgeben muss die locallang.xml angepasst werden. Das ist normalerweise kein Ding, aber bei diesem RTE ist die schon sehr versteckt abgelegt. Nämlich genau hier: ../ typo3/sysext/rtehtmlarea/res/accessibilityicons/locallang.xml

Achtung: Wenn die Default-Language DE ist müssen die Defaultwerte (standard: englisch natürlich als languageKey «en» umbenannt und unter languageKey «Default» die deutschen Tooltips eingegeben werden.

Hier kann ist eine fertige Anpassung mit Deutsch als Default zum Downloaden (nicht vergessen Dateinamen in locallang.xml zu ändern).

Responsive Design und Steuerung der Bilder über die Content-Element-Eingabe

Um Bilder trotz der generellen img {width: 100%} Angabe mit den Content-Element-Einstellungen steuern zu können, müssen die Werte für width und height auf «auto» geschaltet werden.

img, embed, object, video {
          max-width: 100%;
           height: auto !important;
           width: auto !important;
        }

Bilder und Bildergalerien in Listen nebeneinander darstellen

Um Bildergalerien unter TYPO3 schnell und einfach zu verarbeiten, muss man die Listendarstellung korrigieren

DIV.csc-textpic DIV.csc-textpic-imagewrap UL { list-style: none; margin: 0; padding: 0; }
DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI { float: left; margin: 0; padding: 0; }

DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image { float: left; }
DDIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DT { float: none; }
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD { float: none; }
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD IMG { border: none; }

Abhängige Pflichtfelder in Powermail und Checkboxen sowie Radiobuttons

Betrifft Typo3 4.5.30 und Powermail 1.6.10 (wahrscheinlich auch die neueren Versionen)

Um Pflichtfelder abhängig von Einträgen in andere Felder zu machen, existiert dieser Code

[globalVar = GP:tx_powermail_pi1|uid#=]
plugin.tx_powermail_pi1.validate.uid#.required = 0
[else]
plugin.tx_powermail_pi1.validate.uid#.required = 1
[end]

Bei Checkboxen und Radiobuttons muss aber die jeweilige Box oder der jeweilige Button angesprochen werden, Powermail schreibt dann z.B. uid100_0. Das wird so gemacht:
[globalVar = GP:tx_powermail_pi1|uid100|0 = Nein]

Powermail 1.6.10 Special Characters

Nach Eingabe von «&», dem bekannten HTML ampersand, in Textfelder eines Powermail Formulars wird auf der Bestätigungsseite wieder ein &.

Das liegt an einem Bug in Powermail. Es betriff die Dateien

• pi1/class.tx_powermail_html.php, Zeile 1175
• lib/class.tx_powermail_markers.php, Zeile 110 and 116

Dort muss der Aufruf htmlspecialchars entfernt werden. Dann funktioniert es einwandfrei. Gefunden wurde das von Marcus Weigel hier.

Breadcrumb Menü mit Erläuterung

 

lib.breadcrumb = COA lib.breadcrumb {

 

10 = HMENU 10 { special = rootline special.range = 0|-1 # "not in menu pages" should show up in the breadcrumbs menu includeNotInMenu = 1 1 = TMENU # no unneccessary scripting. 1.noBlur = 1 # Current item should be unlinked 1.CUR = 1 1.target = _self 1.wrap = <div class="breadcrumb-class"> | </div>

 

1.NO { stdWrap.field = title ATagTitle.field = nav_title // title linkWrap = ||*|  > |*| }

 

# Current menu item is unlinked 1.CUR { stdWrap.field = title linkWrap = ||*|  > |*| doNotLinkIt = 1 } }

 

}

 

 

404-Fehler mit FELogin (fe_login)

Sollte der Redirect bei der bekannten Frontend-Login-Extension zu einem 404-Fehler führen und sind alle Einstellungen im Backend nach eingehender Prüfung korrekt, handelt es sich um eine fehlerhafte Version von fe_login. Kevin hat hier eine umfassende Fehleranalyse und -korrektur aufgezeigt, die eine PHP-Codeänderung in einer Extensiondatei vorschlägt. Komfortabler geht es mit dem Tipp von Julian weiter unten per Typoscript im Setup:

config.absRefPrefix = /

Da diese Einträge schon einige Jahre her sind, haben wir sie hier noch einmal wiederholt.

Powermail 2.2X.X

Für den Fall, dass jemand das Porblem hat, die locallang.xlf mit Typoscript zu überschreiben (wie wir) und trotzdem einen Schreibfehler korrigieren möchte, liegt hier die betreffende locallang.xlf:

.../typo3conf/l10n/de/powermail/Resources/Private/Language

Unbedingt den Cache löschen (mit den Install-Tool).
 

Anker-Links für's Smartphone

Das wird nichts mehr: Inhaltsübersichten und Nachoben-Buttons sind für Android und iPhone obsolet. Sie funktionieren einfach nicht und Workarounds außerhalb der Javascript-Welt (die sich bei E-Mailings sowieso nicht empfiehlt) gibt's keine.

Hier findet man eine ganz gute Zusammenfassung.

iPhone

Zur Vermeidung der mit der iPhone Funktion für Links oder «vermutete» Links, Telefonnummern- und Datumseinträge einhergehenden Textauszeichnung, hat sich bei uns folgende Lösung am besten bewährt:

Der Tag
<p>Wir sehen uns am 25.09.2014 von 15:30 bis 18:45 Uhr.</p>
wurde ab Wort «am»  als automatischer Link auf dem iPhone angezeigt.

Um den automatischen Link aufzuheben, haben wir hinter jedem ersten Buchstaben oder jeder ersten Ziffer im Text das HTML Zeichen «&zwnj;» eingefügt.

&zwnj;  = zero-width non-joiner. Das Sonderzeichen ist ein «Bindehemmer» bzw. ein «nicht breitenloser Nichtverbinder» und dient dazu, automatische Buchstabenverbindungen also auch die Bildung von automatischen Links, zu verhindern. 

Der Tag sieht dann folgendermaßen aus:
<p>Wir sehen uns a&zwnj;m 2&zwnj;5.09.2014 v&zwnj;on 1&zwnj;5:30 b&zwnj;is 1&zwnj;8:45 U&zwnj;hr</p>

Das Problem ist gelöst.

Media Queries für E-Mail-Clients

Die "progressive Verbesserung" hat Einzug ins E-Mail-Design gehalten. Wesentlicher Faktor sind funktionsfähige Media Queries, die Aaltes von Neuem trennen. Mit der folgenden kann man klare Regeln nur für Webkit-basierte E-Mail-Clients vorgeben:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Styles hier */
}

Gecko-basierte (wie Firefox) Clients lassen sich so ansprechen:

@-moz-document url-prefix() {
/* Styles hier */
}

Nach oben

Responsive Mailings für Outlook (2003 - 2010) formatieren:

Bei responsive E-Mail Layouts besteht immer das Problem, das Outlook und Googlemail die Mailing Layouts anders darstellen, als alle anderen E-Mail-Clients.

Mit diesem Hack kann geregelt werden, wie z.B. tables bei Outlook dargestellt werden, ohne das es eine Auswirkung auf alle andere E-Mail Clients hat.
Innerhalb vom folgenden Hack, kann alles eingefügt werden, was man möchte. Z.B. table, tr, td oder sogar auch das komplette Mailing welches innerhalb angepasst wird.

<!--[if mso]>
Text
<![endif]-->.

Wichtig ist, dass wenn dieser Kommentar z.B. hinter einem table einfügt wird, der table erst geschlossen werden muss, bevor ein neuer eröffnet wird.
Bsp:
<table bgcolor="red">
<!--[if mso]></table><table bgcolor="green"><![endif]-->


Wenn komplette Texte, Befehle und Formatierungen mit dem oben aufgeführten Verfahren ausgetauscht werden, können die betreffenden Textstellen für Outlook aus kommentiert werden. Somit wird vermieden, dass Texte nicht doppelt dargestellt werden.

Dies funktioniert mit folgendem Hack:
<!--[if !mso]><!-->
Text
<!--<![endif]-->

Responsive Column bei E-Mailing Designs austricksen (links/rechts)

Wenn bei einem responsiven E-Mailing Layout zwei tables nebeneinander gestellt sind, rutscht bei einem kleineren Screen der table, der auf der rechten Seite angezeigt wird, automatisch  nach unten.

Damit sich der table auf der linken Seite nach unten schiebt, muss folgendes in der Programmierung geändert werden.

Ein Beispiel:

CSS:
@media screen and (max-width: 600px)
    {
    table[class="responsive-table"]{width:97% !important;}
    table[class="responsive-column"]{width:97% !important;}
    }

HTML:
<!--START Outer Table-->
<table width="600" class="responsive-table">
<tr>
<td width="100%">

<!--START Inner Table-->
<table width="100%" class="responsive-table">
<tr>
<td width="600">

<table align="left" style="vertical-align:top;" width="130px" class="responsive-column">
<tr>
<td>Box1</td>
</tr>
</table>
<table align ="right" style="vertical-align:top;" width="450px" class="responsive-column">
<tr>
<td>Box2</td>
</tr>
</table>

<!--End Inner Table-->
</tr>
</td>
</table>
<!--End Outer Table-->
</tr>
</td>
</table>


Wird:
HTML:

<!--START Outer Table-->
<table width="600" class="responsive-table">
<tr>
<td width="100%">

<!--START Inner Table-->
<table width="100%" class="responsive-table">
<tr>
<td width="600">

<table align ="right" style="vertical-align:top;" width="450px" class="responsive-column">
<tr>
<td>Box2</td>
</tr>
</table>
<table align="left" style="vertical-align:top;" width="130px" class="responsive-column">
<tr>
<td>Box1</td>
</tr>
</table>

<!--End Inner Table-->
</tr>
</td>
</table>
<!--End Outer Table-->
</tr>
</td>
</table>

Die Positionierung der beiden tables (links <--> rechts) muss getauscht werden. In diesem Beispiel also die table mit der td «Box1»  muss unter den table mit der td «Box2» gesetzt werden.

Flexslider 2 Issues

Wir haben in der letzen Zeit häufiger den Flexslider verwendet. Grund: super! Responsive, eigentlöich einfach zu verarbeiten … eigentlich. Nun wir haben dabei einige Puntke zusammengetragen, die auch andere interessieren.

Flexslieder und Jquery: Nehmt Jquery 2.2.4 (z:B. diese Version <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>)und auf keinen Fall die neueste Fassung zz. 3.1.0

… wird fortgesetzt

Umlaut in Javascript Meldungen

Umlaute sind immer ein zähens Ringen, auch wenn das Charset richtig eingestellt ist. Hier ein schneller Weg Buttons und Alert-Meldungen in Javascript anzupassen:

Ä : \u00c4, ä : \u00e4, Ö : \u00d6, ö : \u00f6, Ü : \u00dc, ü : \u00fc, ß : \u00df

PIWIK Intergration «per Hand»

Piwik lässt relativ einfach entegrieren. Dafür gibt es auf der piwik.org-Site einen vorgefertigten Code-Snippet, das mit Vorsicht zu verwenden ist. Damit es funktioniert muss man nämlich an den zwei Stellen, die durch die Originaldaten zu ersetzen sind Acht geben.

So sieht der Code bei PIWIK aus

<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//{$PIWIK_URL}";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', {$IDSITE}]]);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Piwik Code -->

Die blau markierten Stellen müssen nach der indiviuellen Anpassung so aussehen:

var u="http://meine-piwik-installation.de";

_paq.push(['setSiteId', '0']);

(Die «0» muss durch Eure Site Nr (stellt Eure Piwik Installation zur Verfügung) ersetzt werden).

Letzer Tipp: Genau hinsehen.