"TYPO3 Code-Snippets"

Alle anzeigen / Alle verbergen

Antwort auf/zuklappen Eine Textbox wie ein Bild innerhalb eines ihr umfließenden Textes einfügen!?

Abhängig vom Datensatzlayout (siehe 20.15) wird das Feld "Unterer Abstand" missbraucht um dessen Inhalt als Breite der Textbox auszugeben (siehe 25). Mit 20.30 wird der "Unterer Abstand" eliminiert.

tt_content.stdWrap.innerWrap.cObject {
   default {
      20 {
         # Datensatz-Layout rendern
         15 = TEXT
         15.dataWrap = lay{field:layout}
         15.noTrimWrap = || |

         # Wenn layout = 1 das Feld "spaceAfter" nicht als "csc-space-after" rendern
         30.classStdWrap.noTrimWrap = |csc-space-after-| |
         30.classStdWrap.if {
            value = 1
            equals.data = field:layout
            negate = 1
         }
      }

      # Wenn layout = 1 das Feld "spaceAfter" als "style='width:...'" rendern
      25 = COA
      25 {
         10 = TEXT
         10.dataWrap = style='width:{field:spaceAfter}px;'
         10.noTrimWrap = || |
         10.if {
            value = 1
            equals.data = field:layout
         }
      }
   }
}

 

Das kommt dabei heraus: <div id="c1234" class="lay1" style="width:300px;">…</div>

Dann noch etwas CSS:

.lay1 {
    background: none repeat scroll 0 0 #f0f0f0;
    float: left;
    margin: 0 15px 15px 0;
    padding: 8px;
}

 

 

Kategorie: Typoscript, T3-Snippets
Antwort auf/zuklappen Wie kann ich in einem List-Menü dem li-Tag einen dynamischen Klassennamen zuordnen?

Lese dazu einem Beitrag in unseren News ⇒ News-Beitrag

Kategorie: TYPO3, Typoscript, T3-Snippets
Antwort auf/zuklappen Das Feld »Datensatz Layout« in der Klasse berücksichtigen (TYPO3 V4.7.x ff.)

Das Feld “Layout” im Content Element hat von Haus aus keinerlei Effekt (früher waren es die Klassen für Untertitel bei Überschriften)
Um dieses Feld doch zu nutzen, kann man es a) umbenennen oder b) die Auswahl erweitern:

In die Page-TSconfig ist so etwas einzutragen:

# Inhalt der Typ Select box bei content Elementen
TCEFORM.tt_content {
   layout{
      altLabels{
         0 = Normalausgabe
         1 = Sonderausgabe1
         2 = Sonderausgabe2
         3 = Sonderausgabe3
      }
      removeItems = 4,5,6,7,8,9,10
   }
}

 

Und im Root-Page-Setup erweitern wir die Klassifizierung in den neueren TYPO3-Versionen mit diesen Daten:

tt_content.stdWrap.innerWrap.cObject {
   // die doppelte id="c123" bei a-tag und div-tag, resp. das DIV-Tag eliminieren:
#   default.value  = <div id="c{field:uid}"
#   default.20.10.value = csc
   default.20 {
      # im Standard löschen wir das "csc-default"
      10.value =

      # eigene Routine um das Datensatzlayout mit einzubeziehen, Nr. 40 ist neu:
      40 = TEXT
      40 {
          cObject = CASE
          cObject {
             key.field = layout
             default = TEXT
             default.value =
             1 = TEXT
             1.value = layout1
             1.noTrimWrap = | | |
             2 < .1
             2.value = layout2
             3 < .1
             3.value = layout3
          }
      }
   }
...
}

 

Auf der HTML-Seite tritt das dann so in Erscheinung:

<div id="c2073" class="whitebox csc-space-before-30 layout3">
<div id="c1772" class="csc-space-before-50">
<div id="c1852" class="layout1">
<div id="c2094">
<div id="c2095">
<div id="c1957" class="csc-space-before-30">

Kategorie: TYPO3, Typoscript, T3-Snippets
Antwort auf/zuklappen "Read more..." soll auf Klick den Artikel aufklappen!?

das folgende Problem hat dired im Typo3forum gestellt.

 

Man möchte einen Anleser unter dem "… mehr lesen" oder "Read more …" steht erstellen und dann bei Klick darauf den Rest des Artikels aufklappen.

So geht es im Detail:

ins TYPO3-Setup:

// Zusätzliche Objekte im Datensatz Erscheinungsbild "Rahmen"
// Klapptext:

tt_content.stdWrap.innerWrap.cObject {
   # Klappbox auf normalem Hintergrund
   33 =< tt_content.stdWrap.innerWrap.cObject.default
   33.10.cObject.default.value (
      <p class="moreLink">
         … <a onclick="jQuery('#c{field:uid}').fadeToggle('fast');">mehr</a>
      </p>
      <div id="c{field:uid}" style="display:none;"
   )
   # und eine Klasse setzen:
   33.20.10.value = kupix_klapptext
}


page.headerData.666.value (
   <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
)

Die cObject-Nr. 33 oder die headerData-Nr. 666 können natürlich auch andere Nummern haben!


ins Page-TSconfig der Rootseite:

# Namen des cObjects festlegen:
TCEFORM.tt_content.section_frame.addItems {
   33 = Klapptext per jQuery
}

Kategorie: TYPO3, Typoscript, T3-Snippets
Frage gestellt von: dired
Antwort auf/zuklappen Bilder mit einem Wasserzeichen versehen OHNE Extension

// zuerst einen neuen Image-Effekt anlegen:
TCEFORM.tt_content.image_effects.addItems.31 = Wasserzeichen

Die "31" ist der neue Schlüssel (siehe unten in den if-Statements.

// in die Template-Constants:

wz {
   MaskImage = fileadmin/images/wasserzeichen.png
   MaskImagePosition = l,b
   TextWrap = |&copy; | kupix.de|
   DateFormat = date:Y
   FontSize = 14
   ZoomFontSize = 24
   Offset = -5
   ZoomOffset = -10
   Color = #000000
   TextPosition = right
   TextEnableNiceText = 0
   TextEnableAntiAlias = 1
}




// ins Template-Setup:
// Wasserzeichen in Bildern:

tt_content.image.20.1.file >
tt_content.image.20.1.file {
   import.current = 1
   width.field = imagewidth

   m.mask.import.cObject = IMG_RESOURCE
   m.mask.import.cObject.file = GIFBUILDER
   m.mask.import.cObject.file {
      XY = [10.w],[10.h]
      format = gif
      10 = IMAGE
      10.file {
         import.current = 1
         width.field = imagewidth
         maxW = {$styles.content.imgtext.maxW}
         maxW.override.data = register:maxImageWidth
         maxWInText = {$styles.content.imgtext.maxWInText}
         maxWInText.override.data = register:maxImageWidthInText
      }
      20 = BOX
      20.dimensions = 0,0,[10.w],[10.h]
      20.color = #ffffff

      30 = IMAGE
      30.file = {$wz.MaskImage}
      30.align = {$wz.MaskImagePosition}
      30.if.isTrue.field = image_zoom
      # 31 = new image-effect via page-TSConfig
      30.if.isTrue.if.value = 31
      30.if.isTrue.if.isTrue.field = image_effects

      40 = TEXT
      40.text.data = {$wz.DateFormat}
      40.text.noTrimWrap = {$wz.TextWrap}
      40.align = {$wz.TextPosition}
      40.offset = {$wz.Offset},[10.h]{$wz.Offset}
      40.fontSize = {$wz.FontSize}
      40.fontColor = {$wz.Color}
      40.niceText =  {$wz.TextEnableNiceText}
      40.antiAlias = {$wz.TextEnableAntiAlias}
      # 31 = new image-effect via page-TSConfig
      40.if.value = 31
      40.if.isTrue.field = image_effects
   }
   m.bgImg.import.cObject = IMG_RESOURCE
   m.bgImg.import.cObject.file = GIFBUILDER
   m.bgImg.import.cObject.file {
      XY = [10.w],[10.h]
      format = gif
      10 = BOX
      10.dimensions = 0,0,10,10
      10.color = {$wz.Color}
   }
}


und das hilft nur, wenn nicht zum Vergrößern der Bilder eine Lightbox eingesetzt wird:

tt_content.image.20 {
    1 {
        imageLinkWrap {
        enable = 1
        bodyTag = <body style="background:#FFF; margin: 0px; padding: 0px;">
        wrap = <a href="javascript:close();"> | </a>
        JSwindow = 1
        JSwindow.expand = 20,20
        JSwindow.newWindow = 1
        JSwindow {
            altUrl {
                cObject = IMG_RESOURCE
                cObject {
                    file = GIFBUILDER
                    file {
                        XY = [10.w],[10.h]
                        format = jpg
                        quality = 100
                        10 = IMAGE
                        10.file.import.current = 1
                        10.file.width = 800m
                        10.file.height = 600m

                        20 = TEXT
                        20.text.data = {$wz.DateFormat}
                        20.text.noTrimWrap = {$wz.TextWrap}
                        20.align = {$wz.TextPosition}
                        20.offset = {$wz.ZoomOffset},[10.h]{$wz.ZoomOffset}
                        20.fontSize = {$wz.ZoomFontSize}
                        20.fontColor = {$wz.Color}
                        20.niceText = {$wz.TextEnableNiceText}
                        20.antiAlias = {$wz.TextEnableAntiAlias}
                        # 31 = new image-effect via page-TSConfig
                        20.if.value = 31
                        20.if.isTrue.field = image_effects
                        }
                    }
                }
            }
        }
    }
}

 

Quelle: Den größten Teil des Codes habe ich aus der Extension df_imgwatermark.

Kategorie: TYPO3, Typoscript, T3-Snippets
Antwort auf/zuklappen Wie funktioniert das genau mit "substMarksSeparately"?

page.10 = TEMPLATE

# substMarksSeparately ist ein Objekt von TEMPLATE, daher muss das
# hier hin. Danke an Patrick alias king.darki vom www.typo3.net/forum
# für den entscheidenden Hinweis:

page.10.substMarksSeparately = 1

# Hier wird in einen Subpart der Marker ###MARKER### hinein gewrappt:
page.10.subparts {
   NORMAL < styles.content.get
   NORMAL.wrap = <div id="col3">###MARKER### | </div>
}

# und danach wird dieser Marker ersetzt durch Text oder Feldinhalte,
# wie man es sich wünscht

page.10.marks {
   MARKER = TEXT
   MARKER.field = subtitle // title
   MARKER.wrap = <h1>|</h1>
}

 

Kategorie: Typoscript, T3-Snippets
Antwort auf/zuklappen Spaghetti-Code durch Inline-Styles beim Positionieren der Überschriften!? Wie kann ich das entfernen?

Ab TYPO3 Version 4.7.x kann man unten Stehendes alles vergessen! Es ist alles im TYPO3-Kern integriert worden!

 

Man kann im Allgemeinteil eines Datensatzes (z.B. Text-Objekt auf einer Seite) die Überschrift positionieren (nicht, links, mitte oder rechts). Diese Formatierung wird in TYPO3 umgesetzt in z.B. diesen Code:

<h1 style="text-align:center" class="csc-firstheader">Überschrift</h1>

Dieses style="text-align:center" erzeugt wiederum den sogenannten Spaghetti-Code!

Durch folgenden Eintrag ins Template-Setup von TYPO3 kann man das beheben, der STYLE wir in einen zusätzlichen Klasseneintrag gewandelt:

lib.stdheader {
  # style= eliminieren wegen Spaghetti-Code!
# neues Register für csc-firstHeader
  1 = LOAD_REGISTER
  1.cscFirst = csc-firstHeader
  1.cscFirst.if.value=1
  1.cscFirst.if.equals.data = cObj:parentRecordNumber
  1.cscFirst.wrap = |

# auslesen der Position der Überschrift:
  2 >
  2 = LOAD_REGISTER
  2.headerStyle.field = header_position
  2.headerStyle.required = 1
  2.headerStyle.noTrimWrap = |align-||

  # Create class="csc-firstHeader align-right/-center/-left" attribute for <Hx> tags
  3 >
  3 = LOAD_REGISTER
  3.headerClass.stdWrap.dataWrap = {register:cscFirst} {register:headerStyle}
  3.headerClass.required = 1
  3.headerClass.noTrimWrap = | class="|"|
 
# entfernen von {register:headerStyle} aus den Überschriften:
  10.1.fontTag = <h1{register:headerClass}>|</h1>
  10.2.fontTag = <h2{register:headerClass}>|</h2>
  10.3.fontTag = <h3{register:headerClass}>|</h3>
  10.4.fontTag = <h4{register:headerClass}>|</h4>
  10.5.fontTag = <h5{register:headerClass}>|</h5>
}

 

ACHTUNG!!! Ab den Versionen 4.4.9 und 4.5.4 gibt es die Eigenschaft "fontTag" nicht mehr!!! Die letzten Befehle müssen geändert werden in:

# entfernen von {register:headerStyle} aus den Überschriften:
  10.1.dataWrap = <h1{register:headerClass}>|</h1>
  10.2.dataWrap = <h2{register:headerClass}>|</h2>
  10.3.dataWrap = <h3{register:headerClass}>|</h3>
  10.4.dataWrap = <h4{register:headerClass}>|</h4>
  10.5.dataWrap = <h5{register:headerClass}>|</h5>

Kategorie: Typoscript, T3-Snippets
Antwort auf/zuklappen Spaghetti-Code durch Inline-Styles beim TYPO3-Bild-Rendern!? Wie kann ich das entfernen?

Ab TYPO3 Version 4.7.x kann man unten Stehendes alles vergessen! Es ist alles im TYPO3-Kern integriert worden!

 

TYPO3 erzeugt Spaghetti-Code! Sobald Bilder als Inhalt eingestellt werden, werden im Standard DIVs (oder <DL> ...) erstellt, die als Inline-Style die Bild-Maße angeben:

<div class="..." style="width:250px;"> .... </div>

Das lässt sich ändern in (Klassenname ist willkürlich):

<div class="... autowidth"> .... </div>

erzielt wird das durch diese Einträge in das TYPO3-Template-Setup:

tt_content.image.20.rendering {
   dl.imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last autowidth"> | </div>
   ul.imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last autowidth"><ul> | </ul></div>
   div.imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last autowidth"> | </div>
   div {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow autowidth"> | </div>
      oneImageStdWrap.dataWrap = <div class="csc-textpic-image###CLASSES### autowidth"> | </div>
   }
}

Ins CSS gehört dann noch :

.autowidth { width:auto !important; }

 

 

Kategorie: Typoscript, T3-Snippets
Ansprechpartner: Kurt Kunig (http://www.kupix.de)
Frage gestellt von: u.a. Twitter -> maddesign