Schnellnavigation:

Kategorien

« August 2010»
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

Kopieren Sie diesen Link in Ihren RSS-Reader

RSS 0.91Nachrichten
RSS 2.0Nachrichten

In eigener Sache

Peter Linzenkirchner, Lisardo EDV Beratung in Augsburg. Freelance und Partner für Design- und Webagenturen in Augsburg und München. Pixelgenaue Templates, valides HTML, barrierearm. TYPO3-Projekte, Extension-Programmierung und mehr ... 

Zur Zeit wird gefiltert nach: August 31
Filter zurücksetzen

niceText funktioniert nicht

Problem: Nach einem Update oder einem Serverumzug werden Grafiken, die über den GIFBUILDER erstellt wurden (z. B. in GMENU) nur als leere Flächen dargestellt bzw. ohne Text. Ursache scheint die Angabe von niceText=1 zu sein.

Beispiel

  1. 1.NO {
  2.       wrap= <li>|</li>
  3.       XY=108,19
  4.       backColor=#b4b4b4
  5.  
  6.       # Text rendern
  7.       10=TEXT
  8.       10.text.field=title
  9.       10.fontColor=#000000
  10.       10.fontFile=fileadmin/fonts/verdana.ttf
  11.       10.niceText=1
  12.       10.offset=7,13
  13.     }

Normalerweise sollte das ausreichen, um graue Grafikflächen mit den Seitennamen zu erstellen; nach dem Update oder dem Umzug jedoch nicht mehr. Die Texte erscheinen erst wieder, wenn die Zeile

  1. 10.niceText=1

deaktiviert wird. Das führt aber zu nicht akzeptablen Verschlechterung der Darstellung.

Ursache ist eine Voreinstellung in TypoScript, die sich beim einem Wechsel von ImageMagick auf GraphicsMagick bzw. bei einer Versionsänderung von GraphicsMagick plötzlich auswirkt.

Lösung

eine einfache Lösung wäre, niceText durch antiAlias zu ersetzen:

  1. 10.antiAlias=1

Das sieht im Ergebnis allerdings etwas anders aus – nicht schlecht allerdings; nach meinem Empfinden ist es näher an der normalen Schriftdarstellung unter Windows als niceText. Wenn man allerdings wirklich die Darstellung von niceText braucht, ist das noch keine Lösung.

Die Optionen niceText und antiAlias spielen zusammen. Per Voreinstellung ist antiAlias immer eingeschaltet (antiAlias=1) auch wenn es nicht explizit angegeben wird. In den älteren Versionen von GraphicsMagic hat das keine Rolle gespielt, in den neueren scheint es aber so zu sein, dass ein aktiviertes antiAlias die Option niceText deaktivert und vice versa. Die Lösung sieht also so aus:

  1. 1.NO {
  2.       wrap= <li>|</li>
  3.       XY=108,19
  4.       backColor=#b4b4b4
  5.  
  6.       # Text rendern
  7.       10=TEXT
  8.       10.text.field=title
  9.       10.fontColor=#000000
  10.       10.fontFile=fileadmin/fonts/verdana.ttf
  11.       10.niceText=1
  12.       10.antiAlias=0
  13.       10.offset=7,13
  14.     }

Also grundsätzlich immer beides angeben.

Weiterführende Links

Kategorien: Typoscript  Kommentare 2
Tags: gifbuilder

Eine Extension kann Konfigurationsvariablen enthalten, die im Extensions-Manager eingestellt werden können/müssen. Dazu muss zunächste eine Datei mit dem Namen ext_conf_template.txt in der Root der Extension erstellt werden. Darin werden die Auswahl- bzw. Einstellungsmöglichkeiten definiert (hier ein Beispiel aus der captcha-Extension):

  1. # cat=basic; type=boolean; label=Use TTF: When set the captcha will get generated using TTF font rendering functions which will result in much more readable captchas
  2. useTTF=0
  3.  
  4. # cat=basic; type=integer; label=Image width: The width of the captcha image
  5. imgWidth=95

Diese Variablen werden im Extensions-Manager bei der Installation der Extension abgefragt und können dort eingestellt werden. Sie werden automatisch serialisiert in der localconf.php der TYPO3-Installation abgelegt.

Innerhalb einer Frontend-Extension kann nur auf diese Variablen so zugegriffen werden:

  1. $_EXTCONF=unserialize($_EXTCONF);
  2.  
  3. $useTTF=$_EXTCONF['useTTF'];
  4.  
  5. // usw.
  6.  

Von ausserhalb der Extension – wie das z. B. in der captcha.php der captcha-Extension nötig ist, kann so zugeriffen werden:

  1. // Pfade einstellung und localcon.php laden
  2. define('TYPO3_MODE','FE');
  3. define(PATH_this,dirname(__FILE__).'/');
  4. define(PATH_site,dirname(dirname(dirname(dirname(dirname(__FILE__))))).'/');
  5. define(PATH_typo3conf,PATH_site.'typo3conf/');
  6. require_once(PATH_typo3conf.'localconf.php');
  7. //
  8. $config=unserialize($TYPO3_CONF_VARS['EXT']['extConf']['captcha']);

Die captcha-Extension wirft in manchen Installationen folgenden Fehler:

TYPO3 Fatal Error: Extension key “lang” was NOT loaded! (t3lib_extMgm::extPath)

Das liegt daran, dass die captcha.php versucht, das halbe Backend nachzuladen, was aber überhaupt nicht erforderlich ist. Der einfachste Fix geht so, dass die ersten Zeilen der Extension, in denen verschiedene Klassen des Backends nachgeladen werden, durch andere ersetzt werden.

Diese Zeilen:

  1. define(PATH_t3lib,PATH_site.'t3lib/');
  2. define(PATH_tslib,PATH_site.'typo3/sysext/cms/tslib/');
  3. require_once(PATH_t3lib.'class.t3lib_div.php');
  4. require_once(PATH_t3lib.'class.t3lib_extmgm.php');
  5. require_once(PATH_t3lib.'config_default.php');

ersetzen durch diese:

  1. define(PATH_typo3conf,PATH_site.'typo3conf/');
  2. require_once(PATH_typo3conf.'localconf.php');
  3. $GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['captcha']=
  4.       unserialize($TYPO3_CONF_VARS['EXT']['extConf']['captcha']);

Damit wird das Nachladen vieler Klassen umgangen und die Konfiguration direkt aus der localconf.php übernommen.

 

 

31August2010

Grafische Header

Ziel ist die Verwendung von Grafiken in den normalen Headern der Inhaltselemente bzw. als Ersatz derselben. Dazu gibt es mehrere Möglichkeiten in unterschiedlichem Schwierigkeitsgrad, dabei mehr oder weniger barrierefrei.

Alle vorgestellten Lösungen sind nicht vollständig barrierefrei, da keine einzige beim normalen Browserzoom (also dem Textzoom und nicht dem Ganzseitenzoom) nicht skalieren. 

Headlines als Bilder ausgeben mit dem GIFBUILDER

Das ist sicher die einfachste Variante, die sich allerdings nur für einzeilige Headlines eignet. Bei mehrzeiligen Headlines (mit automatischem Umbruch) führt diese Technik zu abgeschnittenem Text, das kann aber mit einem Trick umgangen werden.

  1. Header1=IMAGE
  2. Header1 {
  3.   wrap= <h2>|</h2>
  4.   file=GIFBUILDER
  5.   file {
  6.   XY=[10.w]+5,26
  7.   transparentColor=#ffffff
  8.   backColor=#ffffff
  9.   10=TEXT
  10.   10.text.field=header
  11.   10.text.current=1
  12.   10.fontSize=18
  13.   10.offset=0,20
  14.   10.fontFile=fileadmin/fonts/irgendeineSchrift.ttf
  15.   10.fontColor=#587BA9
  16.   10.niceText=1
  17.   }
  18. }
  19.  
  20. lib.stdheader.10.1<Header1

Quelle: Header aus Font rendern

Vorteile: einfach und simpel einzubauen. Wenn im Browser die Bilder ausgeschaltet sind, wird die Headline in der Standardschrift gezeigt (aus dem Alt-Attribut). 
Nachteile: nur bedingt barrierefrei (Alt-Text wird vorgelesen, der Textfluss ist aber im Screenreader gestört – ich würde das Title-Attribut rauslassen, sonst wird der Text zweimal vorgelesen), ausserdem für SEO nicht ganz optimal. Nur bei einzeiligen Headlines möglich.

In den Kommentaren steht ein Beitrag von fips, mit dem jedes Wort der Headline eigens gerendert werden kann. So erfolgt der Zeilenumbruch wieder automatisch, da die Bilder einfach umbrechen (ungetestet):

  1. tempHeader.10.file.5=Schatten
  2. tempHeader=COA
  3.   tempHeader {
  4.   10=IMAGE
  5.   10 {
  6.     alttext.field=header
  7.     file=GIFBUILDER
  8.     file {
  9.       XY=[10.w],26
  10.       backColor=#ffffff
  11.       transparentColor=#ffffff
  12.       10=TEXT
  13.       10 {
  14.         text.field=header
  15.         text.current=1
  16.         text.listNum.splitChar=32
  17.         text.listNum=0
  18.         text.required=1
  19.         text.noTrimWrap=|| |
  20.         offset=0,20
  21.         align=left
  22.         #fontSize = {$header_fontsize}
  23.         fontSize=20
  24.         #fontFile = {$header_font}
  25.         fontFile=fileadmin/fonts/titania-regular.ttf
  26.         #fontColor = {$header_color}
  27.         fontColor=#0e6400
  28.         niceText=1
  29.         doNotStripHTML=1
  30.         .setCurrent.htmlSpecialChars=0.htmlSpecialChars= -1
  31.       }
  32.       5<.10
  33.       5 {
  34.         fontColor=#c1c1c1
  35.         offset=3,18
  36.       }
  37.     }
  38.     if.isTrue.field=header
  39.     if.isTrue.listNum=0
  40.     if.isTrue.listNum.splitChar=32
  41.   }
  42.   20<.10
  43.   20.file.10.text.listNum=1
  44.   20.file.5.text.listNum=1
  45.   20.if.isTrue.listNum=1
  46.   20.alttext.field>
  47.   30<.20
  48.   30.file.10.text.listNum=2
  49.   30.file.5.text.listNum=2
  50.   30.if.isTrue.listNum=2
  51.   40<.20
  52.   40.file.10.text.listNum=2
  53.   40.file.5.text.listNum=2
  54.   40.if.isTrue.listNum=2
  55.   #...usw - so viele Wörter, die man max. benötigt
  56. }

Beide Methoden haben das Problem, dass Links um die Headlines nicht funktionieren; der entsprechende TypoScript-Code muss noch ergänzt werden. Siehe im Beispiel weiter unten zu den mehrzeiligen Headlines.

Einzeilige Headlines mit einer Image-Replacement Methode

Hier wird das Bild als Hintergrund des h2-Tags geladen und der eigentliche Text der Headline mit CSS versteckt. Diese Methode nennt sich »Image Replacement«. Bei mehrzeiligen Headlines (mit automatischem Umbruch) führt diese Technik ebenfalls wieder zu abgeschnittenem Text.

  1. tempHeader=COA
  2.  
  3. tempHeader {
  4.   10=IMG_RESOURCE
  5.   10.stdWrap.wrap= <h2class="imageheader"style="background-image: url('|')">
  6.   10.file=GIFBUILDER
  7.   10.file {
  8.     10=TEXT
  9.     10 {
  10.         text= >
  11.         fontSize=18
  12.         offset=5,18
  13.         fontColor=#26383D
  14.         niceText=1
  15.     }
  16.     20=TEXT
  17.     20 {
  18.         text.current=1
  19.         fontSize=18
  20.         fontFile=fileadmin/fonts/Chalkboard.ttf
  21.         offset=23,20
  22.         fontColor=#CFA824
  23.         niceText=1
  24.     }
  25.  
  26.     XY=[10.w]+[20.w]+23,26
  27.     transparentColor=#ffffff
  28.     backColor=#ffffff
  29.   }
  30.  
  31.   20=TEXT
  32.   20.current=1
  33.   20.wrap= |</h2>
  34. }
  35.  
  36. lib.stdheader.10.5<tempHeader

Damit erhält man folgenden Output:

  1. <h2class="imageheader"style="background-image: url('typo3temp/GB/xxx.gif')>
  2.   Meine Headline
  3. </h2>

Damit die Sache auch ordentlich aussieht ist noch ein CSS-erforderlich:

  1. h2.imageheader {
  2.   overflow:hidden;
  3.   height:26px;
  4.   text-indent:999em;
  5.   white-space:nowrap;
  6.   background-repeat:no-repeat;
  7. }
  8. h2.imageheader a {display:block;}

Quelle: Grafische Überschriften mit TYPO3

Vorteile: Semantisch korrekt und weitgehend barrierefrei (bis auf die Tatsache, dass auch hier die Grafik nicht skaliert bei einem Textzoom im Browser). 
Nachteile: wie erwähnt nur bei einzeiligen Headlines möglich. Wird im Browser die Darstellung von Bildern deaktiviert bei gleichzeitig aktivem CSS, so ist keine Headline zu sehen, da kein Alt-Text zur Verfügung steht. Damit die Links auf den Headlines funktionieren, müssen sie zum Blockelement gemacht werden.

Auch in diesem Beispiel sind Links um die Headlines nicht berücksichtigt; das entsprechende TypoScript muss noch ergänzt werden, siehe unten.

Mehrzeilige Headlines mit Image-Replacement

Dazu ist es zuerst erforderlich, die extTables.php von Typo3 zu patchen:

  1. $TCA['tt_content']['columns']['header']['config']['type']='text';

Damit wird aus dem einzeiligen Text-Input ein Textfeld. Die Zeilenschaltungen werden dann mit Return einfach im Feld gesetzt.

  1. lib.stdheader {
  2.         stdWrap.dataWrap=
  3.         10 {
  4.                 1>
  5.         }
  6. }
  7.  
  8. lib.stdheader.10 {
  9.         1=IMG_RESOURCE
  10.         1 {
  11.                 file=GIFBUILDER
  12.                 file {
  13.                         XY=[10.w]+10,[10.h]+6
  14.                         backColor=#ffffff
  15.                         10=TEXT
  16.                         10 {
  17.                                 text.field=header
  18.                                 fontSize=32
  19.                                 fontFile=fileadmin/fonts/arial.ttf
  20.                                 fontColor=##454B45
  21.                                 offset=0,30
  22.                         }
  23.                 }
  24.                 stdWrap.innerWrap(
  25. <h1 style="background: url({$baseUrl}|) no-repeat;">
  26. )
  27.              
  28.                 stdWrap.outerWrap.cObject=COA
  29.                 stdWrap.outerWrap.cObject {
  30.                         5=LOAD_REGISTER
  31.                         5.headerlines.cObject=TEXT
  32.                         5.headerlines.cObject.data=field:header
  33.                         5.headerlines.cObject.br=1
  34.                         5.headerlines.cObject.htmlSpecialChars=1
  35.                         5.headerlines.cObject.innerWrap= <span><span>|</span></span>
  36.                         5.headerlines.cObject.innerWrap.typolink.parameter.field=header_link
  37.                         10=TEXT
  38.                         10.value= |
  39.                         10.dataWrap(
  40. |{register:headerlines}
  41.                         )
  42.                 }
  43.                 stdWrap.outerWrap.append=TEXT
  44.                 stdWrap.outerWrap.append.value= </h1>        
  45.         }
  46. }

Weiter ist folgender CSS-Code erforderlich:

  1. h1 {
  2.     position:relative;
  3.     display:block;
  4.     width:280px;
  5.     margin-bottom:13px;
  6. }
  7.  
  8. h1 span {
  9.     display:block;
  10.     margin-top:1px;
  11.     width:1px;
  12.     font-size:20px;
  13.     line-height:22px;
  14.     overflow:hidden;
  15. }
  16.  
  17. h1 span span {
  18.     display:block;
  19.     width:1000px;
  20. }

Quelle: jenses im Mittwaldforum: (etwas weiter unten im Thread » [HowTo] grafische Content Überschrift«)

Das Image-Replacement erfolgt hier über den span-Tag. Eventuell wäre es sinnvoll, diese Methode mit dem Image-Replacement des obigen Beispiels zu ergänzen, da dieses ohne zusätzliches Markup auskommt.

Vorteile: weitgehend barrierefrei, optimiert für Suchmaschinen, mehrzeilige Headlines möglich. 
Nachteile: Typo3-Core-Code muss gepatcht werden; bei ausgeschalteten Bildern erscheint kein Alttext.

Weiterführende Links:

Weiterführende Literatur:

Alexander Ebner & Patrick Schuster: Typo3 und TypoScript Kochbuch.

  • Corporate Identity bei Überschriften, S. 457
  • Grafiken mit mehrzeiligem Text, S. 458
  • Dynamisches Logo im Web 2.0 Stil, S. 451 
31August2010

Frontend Editing

Ausgehend von einem Artikel bei expertinnen-web.de habe ich mal versucht, das Frontend-Editing in einem meiner Projekte zu implementieren. Dabei hat sich schnell herausgestellt, dass man ein paar Schritte anders machen muss, wenn TemplaVoila anstatt Automake-Template verwendet wird.

Zuerst gehe ich ähnlich vor und erstelle die verschiedenen User und Gruppen:

User und Gruppen incl. User-TSconfig

Zunächst der normale Weg im Backend: Ich richte eine Backend-Gruppe namens “redaktion” ein und lege alle Rechte fest, die diese Gruppe haben soll. Dabei regle ich wie üblich über die Option “Zugriff” in der “Web”-Palette welche Rechte diese Gruppe bei einzelnen Seiten haben soll (lesen, editieren, löschen, neue Seiten anlegen etc. )

Über das Seiten-TSconfig (der root-Seite) lege ich fest, welche Rechte neu erstellte Seiten bekommen:

  1. # Eigentuemer
  2. TCEMAIN.permissions.userid = 5
  3. # Gruppe immer Redaktion:
  4. TCEMAIN.permissions.groupid = 1
  5. # Gruppe bekommt immer alle Rechte
  6. TCEMAIN.permissions.group = 31

Dadurch vermeide ich, dass die Mitglieder der Gruppe “redaktion” Seiten, die von einem Admin erstellt wurden, nicht sehen oder nicht bearbeiten können. Ob man das so haben will, muss man natürlich von Fall zu Fall entscheiden.

Die Gruppe “redaktion” bekommt nun ein User-TSconfig:

  1. admPanel {
  2.   #Frontend-Editieren generell freigeben, sowohl editieren wie Vorschau
  3.   enable.edit=1
  4.   enable.preview=1
  5.     #Buttons abhängig vom Admin-Panel - also umschaltbar
  6.   override.edit.displayIcons=0
  7.   override.preview.showHiddenPages=0
  8.   #Admin-Panel einschalten
  9.   hide=0
  10. }

Damit bekommt die Gruppe ein Adminpanel zu sehen, das aber nur eingeschränkte Möglichkeiten bietet. (Ich gehe hier einen anderen Weg als expertinnen-web.de: ich möchte, dass das Admin-Panel mit den Vorschaumöglichkeiten zur Verfügung steht.

Natürlich muss man im Haupt-Typoscript-Template das Frontendediting noch generell freischalten:

  1. page.config.admPanel = 1

Danach lege ich einen oder mehrere Backend-User an und weise ihnen die Gruppe “redaktion” zu.

Frontend-User und Backend-User zusammenbringen

Das geschieht über die Extension simulatebe. Die Extension zunächst installieren und danach in headerData einbinden:

  1. page.headerData.99 < plugin.tx_simulatebe_pi1

Da ich YAML verwende, sieht es bei mir so aus:

  1. temp.buildHeaderData {
  2.   10=TEXT
  3.   10.value= <link href="fileadmin/css/
  4.   20 = USER
  5.   20.userFunc = tx_flexformgetconstant_pi1->main
  6.   20.field = cssfile
  7.   30 = TEXT
  8.   30.value = "rel="stylesheet"type="text/css"/>
  9.   40=TEXT
  10.   40.value= <!--[if lte IE 7]>
  11.   50=TEXT
  12.   50.value= <link href="fileadmin/css/patches/
  13.   60 = USER
  14.   60.userFunc = tx_flexformgetconstant_pi1->main
  15.   60.field = iehacks
  16.   70 = TEXT
  17.   70.value = "rel="stylesheet"type="text/css"/>
  18.   80=TEXT
  19.   80.value= <![endif]-->
  20.  
  21.   99<plugin.tx_simulatebe_pi1
  22. }

Danach die passenden Frontend-User anlegen und über das neue Feld “Related Backend User” mit den passenden Backend-Usern verbinden. Jetzt können sich die Frontend-User als Backend-User über das Frontend-Login einloggen.

Einbau der Edit-Panels in eine TemplaVoila-Seite

Da ich TemplaVoila verwende und auch etwas andere Ziele verfolge, geht es jetzt anders weiter als bei den Web-Expertinnen. Prinzipiell müssen die gleichen Einstellungen gemacht werden, aber an anderen Stellen.

Zunächst öffne ich das “XML der Datenstruktur” meiner TemplaVoila-Seitenvorlage und füge dort das Editpanel für neu Inhaltsobjekte ein, und zwar in den XML-Tag, der die Inhaltselemente aufnimmt:

  1. <field_content type="array">
  2.             <tx_templavoila type="array">
  3.                 <title>Inhaltsbereich</title>
  4.                 <sample_data type="array">
  5.                     <numIndex index="0"></numIndex>
  6.                 </sample_data>
  7.                 <eType>ce</eType>
  8.                 <TypoScript><![CDATA[
  9. # Neue Inhaltselemente anlegen               
  10. 4=EDITPANEL
  11. 4 {
  12.     newRecordFromTable=tt_content
  13.         allow= new
  14. }
  15.  
  16. 10=RECORDS
  17. 10.source.current=1
  18. 10.tables=tt_content
  19. 10.wrap= <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
  20.                   ]]></TypoScript>

Entscheidend sind die Zeilen 4 =, damit erscheint ein Button, mit dem auf der Seite neue Inhaltselemente angelegt werden können.

Jetzt möchte ich noch die Toolbar zum Anlegen neuer Seiten im Kopf der Seite ausgeben. Dazu muss ich entweder einen eigenen Platzhalter in der TemplaVoila-Vorlage anlegen, oder eine vorhandene Definition erweitern. Ich erweitere meine Kopfdefinition:

  1. lib.kopf=COA
  2. lib.kopf {
  3.   # Editpanel für die Seite einbinden und formatieren:
  4.   5<styles.content.editPanelPage
  5.   5.10.allow>
  6.   5.10.allow=toolbar,move,hide
  7.   5.10.label.data=
  8.   5.10.label.wrap=
  9.  
  10.   # der Rest meiner Kopfausgabe
  11.   10=TEXT
  12.   10.value={$kopf.headline}
  13.   10.wrap= <h1>|</h1>
  14.   20=TEXT
  15.   # mit data und page, da TemplaVoila field selbst schon belegt.
  16.   20.data=page:title
  17.   20.wrap= <h2>|</h2>
  18. }

Formatierung der Toolbar und Icons:

Da ich die Standardausgabe nicht besonders schön finde, entferne ich einiges, z. B. die Labels. Dazu folgenden Code ins TypoScript-Setup des Haupttemplates eingeben:

  1. ################ Edit Panel ################
  2. tt_content.stdWrap.editPanel.label=
  3. # Label entfernen
  4. tt_content.stdWrap.editPanel.line=0
  5. # Linie unterhalb des Edit-Panels enfernen
  6.  

Ausserdem ergänze ich mein Stylesheet noch:

  1. table.typo3-editPanel { border:none;background-color:#fff;opacity: 0.3;-moz-opacity: 0.3;filter: Alpha(opacity=30);zoom:1;}
  2. table.typo3-editPanel TD.typo3-editPanel-controls {border:none;background-color:#fff;}

Nicht ganz W3C-konform, durch die Transparenz sind die Werkzeuge aber deutlich dezenter. Über das Adminpanel können die Werkzeuge zusätzlich an- und ausgeschaltet werden. Ausserdem steht eine Preview zur Verfügung, mit der die Ansicht aller Frontend-Benutzer simuliert werden kann.

Weiterführende Links:

Besuchen Sie mich auf Google+