Schnellnavigation:

Kategorien

Schlagwortwolke

api typoscript seo rte extension backend css templavoila facebook sprachen extensions gifbuilder datenbank google fce redaktion php menü hyphen ie6 formular security constants slide webfonts silbentrennung twitter typo3-camp tceform t3c tca tag t3blog sql sprachmenü tcadefaults suchmaschine suchtipps typo3camp
« Juni 2023»
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  

Letzte Nachrichten

DSGVO
26.05.2018 18:39
Trackingtools und Datenschutzerklärung
14.03.2014 23:07
1:n und n:1 Relationen in Extbase
06.12.2013 12:04
Erste Abmahnungen wegen Google Analytics
04.10.2013 12:11

Kopieren Sie diesen Link in Ihren RSS-Reader

RSS 0.91Nachrichten
Kommentare
RSS 2.0Nachrichten
Kommentare

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: gifbuilder
Filter zurücksetzen

31August2010

niceText funktioniert nicht

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

Zurück

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 
Kategorien: Typoscript  Kommentare 0
Tags: gifbuilder, TYPO3, Webdesign, SEO

Zurück

30August2010

Bilder mit Lupe

Ziel ist, normale Inhaltsbilder von Typo3 mit einer Lupe oder einem Pluszeichen zu versehen, das darauf hindeutet, dass die Bilder vergrößert werden können. Die gleiche Technik kann aber auch verwendet werden, um die Bilder z. B. mit abgerundeten Kanten oder Schatten zu versehen.

Grundtechnik: Bilder mit Wasserzeichen

Die einfachste Möglichkeit ist es, das IMAGE-Objekt der Contentelemente mit einer Maske zu versehen:

  1. tt_content.image.20.1.file.m.bgImg = fileadmin/....
  2. tt_content.image.20.1.file.m.mask = fileadmin/....
  3.  

Nachteil dieser Technik ist, dass die Bilder dazu alle eine vorgebene Größe haben müssen – Maske wie Hintergrund werden brutal auf die Größe der Bilder gezoomt. Das ist für Wasserzeichen u. U. ganz sinnvoll, aber um Bilder mit einer Lupe zu versehen ist dieser Ansatz ungeeignet.

GIFBUILDER verwenden

Prinzipiell können die Bilder über GIFBUILDER manipuliert werden, wie hier im GIFBUILDER-Artikel des typo3-Wikis wunderbar beschrieben. So können erstaunliche Effekte erreicht werden, wie z. B. transparente Flächen oder Texte mit Schatten auf Bildern. Ein Beispiel:

  1. lib.test = IMAGE
  2. lib.test {
  3.     file = GIFBUILDER
  4.     file {
  5.         XY = 1024,768
  6.         format = jpg
  7.         quality = 88
  8.         10 = IMAGE
  9.         10.file = fileadmin/backimage.jpg
  10.  
  11.         15 = IMAGE
  12.         15.offset = 420,18
  13.         15.file = fileadmin/overlay.png
  14.         15.mask = fileadmin/mask.png
  15.     }
  16. }

Leider hat diese Technik einen großen Nachteil: damit imageLinkWrap funktioniert, darf “file” kein GIFBUILDER-Objekt sein. Heisst im Klartext: man kann auf derartig manipulierte Grafiken keinen Link setzen, weder die Klickvergrößerung noch einen individuellen. Damit funktionieren auch die üblichen Lightbox-Skripte nicht mehr.

Falls das nicht benötigt wird, ist es aber die ideale Technik.

Tipp: Damit die Qualität der Bilder stimmt, muss im Install-Tool png_truecolor aktiviert werden, ausserdem muss die GDLIB 2 verwendet werden.

Lösung des Problems:

Sie erfolgt letztlich doch über die oben erwähnten Masken, allerdings mit einem recht aufwändigen Umweg. Grundlage meiner Lösung ist dieser Artikel im TYPO3wizard-Forum (meinen besten Dank an Andy!). Im Prinzip werden einfach Masken eingesetzt, diese werden allerdings mit Hilfe von IMG_RESSOURCE und GIFBUILDER mit einem Hintergrund in der Größe der Bilder versehen, so dass die Lupe selbst nicht mitzoomt sondern an einem ganz konkreten Platz positioniert werden kann.

  1. tt_content{
  2.   image.20.1.file >
  3.   image.20.1.file {
  4.       import.current = 1
  5.       width.field = imagewidth
  6.       m.mask.import.cObject = IMG_RESOURCE
  7.       m.mask.import.cObject.file = GIFBUILDER
  8.       m.mask.import.cObject.file {
  9.           # Hier wird die dynamische Maske mit der gleichen Größe wie das aktuelle
  10.           # Bild erstellt. Die 10 ist der Bezug auf das folgende IMAGE-Objekt
  11.           XY = [10.w],[10.h]
  12.           format = png
  13.           # Da der "XY" Parameter keinen stdWrap hat, finden wir die Größe durch
  14.           # erneutes Laden des Bilds heraus
  15.           10 = IMAGE
  16.           10.file {
  17.               import.current = 1
  18.               width.field = imagewidth
  19.               maxW = {$styles.content.imgtext.maxW}
  20.               maxW.override.data = register:maxImageWidth
  21.               maxWInText = {$styles.content.imgtext.maxWInText}
  22.               maxWInText.override.data = register:maxImageWidthInText
  23.           }
  24.           # Erstellen einer weißen Box die die ganze Größe einnimmt
  25.           20 = BOX
  26.           20.dimensions = 0,0,[10.w],[10.h]
  27.           20.color = #FFFFFF
  28.           # Positionierung der Lupe rechts unten
  29.           60 = IMAGE
  30.           60.file = fileadmin/img/mask2.png
  31.           60.align = r,b
  32.       }
  33.       # Nun muss noch der Hintergrund erstellt werden, Ablauf im Prinzip wie oben:
  34.       m.bgImg.import.cObject = IMG_RESOURCE
  35.       m.bgImg.import.cObject.file = GIFBUILDER
  36.       m.bgImg.import.cObject.file {
  37.           # wieder eine Maske mit der gleichen Größe wie das Bild erstellen
  38.           XY = [10.w],[10.h]
  39.           format = png
  40.           # und dazu das Bild erneut laden
  41.           10 = IMAGE
  42.           10.file {
  43.               import.current = 1
  44.               width.field = imagewidth
  45.               maxW = {$styles.content.imgtext.maxW}
  46.               maxW.override.data = register:maxImageWidth
  47.               maxWInText = {$styles.content.imgtext.maxWInText}
  48.               maxWInText.override.data = register:maxImageWidthInText
  49.           }
  50.           # wieder eine Box in der Größe des Bildes
  51.           15 = BOX
  52.           15.dimensions = 0,0,[10.w],[10.h]
  53.           15.color = #FFFFFF
  54.           # und darauf die Maske der Lupe platzieren
  55.           60 = IMAGE
  56.           60.file = fileadmin/img/plus2.png
  57.           60.align = r,b
  58.       }
  59.   }
  60. }

Möglich, dass es auch einfacher geht … aber diese Lösung tut was sie soll. Links, Alt- und Title-Attribute funktionieren.

Kategorien: Typoscript  Kommentare 0
Tags: gifbuilder, wasserzeichen

Zurück