nicht angemeldet
Inhaltselemente in Typo3 positionieren
Die folgende Frage bezieht sich auf Typo3:
Kürzlich habe ich mir händisch eine Webseite erstellt. Diese Webseite hat natürlich auch eine Startseite. Die Inhaltselemente die sich im Content DIV-Container der Webseite befinden habe ich entsprechend mit CSS positioniert bzw. formatiert.
Ich hab nun versucht die vorher händisch erstellte Webseite mit Hilfe von Typo3 nachzubauen. Diesbezüglich bin ich jetzt soweit, dass Typo3 mir automatisch genau das gleiche Grundgerüst (die jeweiligen DIV-Container und der <head>-Bereich der Seite) generiert, dass ich vorher händisch erstellt habe.
Der nächste Schritt wäre es nun die Inhalte der verschiedenen Seiten in das Typo3 Projekt zu packen. Die CONTENT-DIV-Container der jeweiligen Seiten müssen also alle die für sie bestimmten Inhalte erhalten. Die Startseite des Typo3-Projektes (index.html) soll z.B. genauso aussehen wie die Startseite (index.html) der Webseite die ich vorher händisch erstellt habe. Vom Grundgerüst past das schon. Der DIV-Container der Startseite des Typo3 Projektes muss nurnoch den gleichen Inhalt erhalten, wie der Inhalt der im DIV-Container der händisch erstellten Seite bereits existiert. Der Inhalt der Startseite im Typo3 Projekt soll natürlich auch genauso formatiert werden, wie der Inhalt der Startseite in der händisch erstellten Seite.
Vorher hatte der CONTENT-DIV-Container der Startseite folgendes Aussehen:
Oben einer Überschrift. Unter dieser Überschrift ein Foto das nach links ausgerichtet ist. Rechts neben diesem Foto stand die Beschreibung des Fotos. Bei der Beschreibung des Fotos handelt es sich um einen recht kurzen Text. Diesen rechts neben dem Foto stehenden Text habe ich per CSS, ausgehend vom Foto, horizontal zentriert.
In Typo3 würde ich diesen Aufbau der Startseite (des DIV-Container der Startseite) nun gerne genauso umsetzen. Wenn ich nun allerdings das Inhaltselement "Bild mit Text" wähle, dann habe ich keine Möglichkeit die Beschriftung des Bildes rechts neben diesem zu notieren. Eine horizontale Zentrierung der Beschriftung ist erst recht nicht möglich.
Wie gehe ich denn vor, um genau dieses Layout zu erreichen? Geht das überhaupt über das Backend von Typo3?
-
Wie gehe ich denn vor, um genau dieses Layout zu erreichen? Geht das überhaupt über das Backend von Typo3?
Text mit Bild wird von css_styled_content erzeugt - das kennst du ja schon. Das gibt mit dem default-Setup (setup.txt)
Irgend ein <div class="csc-textpic-image" /> usw aus mit vielen divs und Definitonslisten.
Das kannst du so anpassen, dass es genau deinen Wunschcode ergibt.
Beispiel, 4 Bilder die mit Vorgabecode von css_styled_content ausgegeben werden:
<div class="csc-textpic csc-textpic-right csc-textpic-above"> <div class="csc-textpic-imagewrap" style="width:150px;"> <div class="csc-textpic-imagerow" style="width:150px;"> <dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:150px;"> <dt> <img src="typo3temp/pics/639990276a.jpg" width="150" height="113" alt="" /> </dt> </dl> </div> <div class="csc-textpic-imagerow" style="width:150px;"> <dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:150px;"> <dt> <img src="typo3temp/pics/19846ae34e.jpg" width="150" height="113" alt="" /> </dt> </dl> </div> <div class="csc-textpic-imagerow" style="width:150px;"> <dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:150px;"> <dt> <img src="typo3temp/pics/77aa1d1de5.jpg" width="150" height="200" alt="" /> </dt> </dl> </div> <div class="csc-textpic-imagerow" style="width:150px;"> <dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:150px;"> <dt> <img src="typo3temp/pics/3f8d012ed0.jpg" width="150" height="113" alt="" /> </dt> </dl> </div> </div> </div> <div class="csc-textpic-clear"> <!-- --> </div>-
Mir ist technisch noch nicht so 100% klar, was passiert, wenn ich ein Inhaltselement vom Typ "Text mit Bild" über das Backend hinzufüge. Ich versuchs mal zu beschreiben. Wäre nett wenn du mich berichtigst.
Ausgangssituation:
Anhand eines HTML-Templates und des zugehörigen TypoScripts (ich von mir geschrieben wurde) ist Typo3 dazu in der Lage das Grundgerüst meiner Webseiten (noch ohne Inhalte) zu generieren.
Verständnisproblem:
Ich füge das Inhaltselement "Text mit Bild" in meine Startseite hinzu. Hier geht es dann schon los mit meinem gefährlichen Halbwissen. So wie ich das bisher verstanden habe, werden die eigentlichen Inhalte dieses Inhaltselements (das Bild selbst, die Beschreibung des Bildes, der Text der das Bild in irgendeiner Form umfließt) in die Datenbank in die Tabelle tt_content gepackt. Nun müssen ja die Optionen (Bild links oder rechts ausgerichtet, Text soll das Bild umfließen oder nicht, Text über dem Bild oder unter dem Bild, Bild mit oder ohne Rahmen usw.) die ich für dieses Inhaltselement festgelegt habe, auch irgendwie gepeichert werden. Ist hierfür auch eine Datenbanktabelle vorgesehen?
Mal angenommen ich denke jetzt an den Punkt weiter, an welchem Typo3 den Quellcode generiert. Wie das Grundgerüst (der Kram noch ohne Inhalte) zustande kommt ist mir so halbwegs klar (hiefür ist mein HTML-Template in Verbindung mit meinem TypoScript zuständig). Wie der Inhalt generiert wird ist mir noch nicht so ganz klar. Ist es richtig, dass mit dem Hinzufügen des Inhaltselementes "Text mit Bild" auch automatisch TypoScript-Code generiert wird, der dafür sorgt, dass die in der DB gepeicherten Inhalte auch entsprechend in die Seite integriert werden. Falls ja, wo wird denn dieser TypoScript-Code hingeschrieben?
In diesem Zusammenhang steh ich dann auch wieder was css_styled_content angeht auf dem Schlauch. Wann kommt diese Datei denn ins Spiel. Momentan stell ich mir das ungefähr so vor: Anhand des, automatisch durch das einfügen des Inhaltelementes generierten TypoScript-Codes, weiß Typo3 in welcher DB-Tabelle die für die Startseite notwendigen Inhalte und in welcher DB-Tabelle die gewünschten Optionen für diese Inhalte zu finden sind. Nun müssen die Inhalte mit den gewünschtne Optionen ja irgendwie in den Quellcode gepackt werden. Hierzu wird dann auf die Datei css_styled_content zurückgegriffen. Die Datei css_styled_content enthält Codefragmente für alle möglichen Konstellation. In meinem Fall wird auf das Codefragment zurückgeriffen, welches für die Formatierung von Bild mit Text verantworlich ist. In dieses Codefragement wird nun einfach der in der DB gespeicherte Inhalt gepackt.
Wenn mir nun der Quellcode dieses Codefragments nicht passt dann schau ich einfach in die Konfigurationsdatei für css_styled_content und passe dort den Quellcode entsprechend an. Dabei stelle ich fest, dass alle Inhaltelemente vom Typ "Text mit Bild" in dem Codetemplate die CSS-Klasse <div class="csc-textpic-image" /> zugewiesen bekommen.
Nun will ich erreichen, dass auf der Startseite die Bildbeschreibung vertikal zentriert recht neben dem Bild angzeigt wird. Um das zu erreichen mache ich mir die Spezifität zunutze und überschreibe in meiner CSS-Datei die CSS-Datei die auf css_styled_content basiert.
Was ich hierbei wiederrum nicht verstehe ist, dass ja dann immer der Text vertikal neben dem Bild zentriert angezeigt wird. Ich will diese aber nur für die Startseite und nicht für alle Bilder mit Text erreichen die sonst irgendwo vorkommen.
-
Mal angenommen ich denke jetzt an den Punkt weiter, an welchem Typo3 den Quellcode generiert. Wie das Grundgerüst (der Kram noch ohne Inhalte) zustande kommt ist mir so halbwegs klar (hiefür ist mein HTML-Template in Verbindung mit meinem TypoScript zuständig). Wie der Inhalt generiert wird ist mir noch nicht so ganz klar. Ist es richtig, dass mit dem Hinzufügen des Inhaltselementes "Text mit Bild" auch automatisch TypoScript-Code generiert wird, der dafür sorgt, dass die in der DB gepeicherten Inhalte auch entsprechend in die Seite integriert werden. Falls ja, wo wird denn dieser TypoScript-Code hingeschrieben?
für die Ausgabe der Inhaltselemente usw. über die Tabelle tt_content ist einzig und allein die mitgelieferte Extension CSS-Styled-Content verantwortlich - nicht TYPO3 selbst.
In diesem Zusammenhang steh ich dann auch wieder was css_styled_content angeht auf dem Schlauch. Wann kommt diese Datei denn ins Spiel. Momentan stell ich mir das ungefähr so vor: Anhand des, automatisch durch das einfügen des Inhaltelementes generierten TypoScript-Codes, weiß Typo3 in welcher DB-Tabelle die für die Startseite notwendigen Inhalte und in welcher DB-Tabelle die gewünschten Optionen für diese Inhalte zu finden sind. Nun müssen die Inhalte mit den gewünschtne Optionen ja irgendwie in den Quellcode gepackt werden. Hierzu wird dann auf die Datei css_styled_content zurückgegriffen. Die Datei css_styled_content enthält Codefragmente für alle möglichen Konstellation. In meinem Fall wird auf das Codefragment zurückgeriffen, welches für die Formatierung von Bild mit Text verantworlich ist. In dieses Codefragement wird nun einfach der in der DB gespeicherte Inhalt gepackt.
Nein, die Codefragemente kommen erst beim der Ausgabe dazu, diese werden durch CSS-Styled-Content hinzugefügt und können über TS konfiguriert werden.
Nun will ich erreichen, dass auf der Startseite die Bildbeschreibung vertikal zentriert recht neben dem Bild angzeigt wird. Um das zu erreichen mache ich mir die Spezifität zunutze und überschreibe in meiner CSS-Datei die CSS-Datei die auf css_styled_content basiert.
Du kannst einerseits das CSS für die Startseite überschreiben (das ändert aber an dem Schrott-HTML nichts), andererseits aber mittels Extension-Template auf deiner Startseite oder mit TSFE:id die HTML Ausgabe so anpassen, wie du das möchtest.
Was ich hierbei wiederrum nicht verstehe ist, dass ja dann immer der Text vertikal neben dem Bild zentriert angezeigt wird. Ich will diese aber nur für die Startseite und nicht für alle Bilder mit Text erreichen die sonst irgendwo vorkommen.
Sie oben, mache eine Bedingung im TypoScript, die diese Manipulation NUR auf der Startseite vornimmt.
-
-
Text mit Bild wird von css_styled_content erzeugt - das kennst du ja schon. Das gibt mit dem default-Setup (setup.txt)
Irgend ein <div class="csc-textpic-image" /> usw aus mit vielen divs und Definitonslisten.
Das kannst du so anpassen, dass es genau deinen Wunschcode ergibt.
Ich hab mal in die setup.txt reingeschaut. Habe dort diesen Block gefunden:
# intext-right-nowrap 25 = TEXT 25\.value = <div class="csc-textpic csc-textpic-intext-left-nowrap###CLASSES###"> ###IMAGES### <div style="margin-left:{register:rowWidthPlusTextMargin}px;"> ###TEXT### </div> </div> <div class="csc-textpic-clear"> <!-- --> </div>Damit "Text mit Bild" richtig von meinem CSS formatiert wird hab ich mir im Typo3 Backend für die Startseite ein extension Template angelegt. Um den Kram aus css_styled_content zu überschreiben will ich in das extension Template folgendes packen:
tt_content.image.20.layout.25.value = <meine neuer HTML-Code>
<mein neuer HTML-Code> soll später so aussehen:
<img id="imageStartseite" src="###IMAGES###" alt="Foto Startseite"/> <div id="imageTextStartseite"> ###TEXT### </div>Nun steckt hinter dem Marker ###TEXT### leider mehr als die Beschreibung des Bildes. Hinter dem Marker ###IMAGES### steckt mehr als der Pfad zum Foto in der Datenbank.
Wie kann ich denn erreichen, dass hinter ###IMAGES### und ###TEXT### die richtigen Werte stecken?
Ich kenne solche Marker (###IMAGES### und ###TEXT###) bisher nur aus HTML-Vorlagen. Wußte nicht, dass man sie auch direkt im TypoScript-Code verwenden kann. Hab in setup.txt nach "marks." gesucht um zu sehen wo den Markern die Werte zugewiesen werden. Hab leider nichts gefunden. Kannst du mir sagen, in welcher Datei den Markern ihrer Werte zugewiesen werden?
-
Ich kenne solche Marker (###IMAGES### und ###TEXT###) bisher nur aus HTML-Vorlagen. Wußte nicht, dass man sie auch direkt im TypoScript-Code verwenden kann. Hab in setup.txt nach "marks." gesucht um zu sehen wo den Markern die Werte zugewiesen werden. Hab leider nichts gefunden. Kannst du mir sagen, in welcher Datei den Markern ihrer Werte zugewiesen werden?
Das macht css_styled_content selbst, hierzu solltest du deinen Blick ins pi1-Verzeichnis werfen.
###IMAGES### enthält manchmal auch mehrere Bilder, du kannst ja 10, 20 oder 30 Bilder auch in ein "Text mit Bild"-Element einfügen, dafür ist dann ein PHP-Script notwendig, um das Zeug entsprechend aufzuschlüsseln.
In deinem Fall solltest du aber nochmal setup.txt durchgraben und nach dl/dt/dd suchen, den Marker selbst wirst du nicht finden, aber die Konfiguration für die Ausgabe.
-
Das macht css_styled_content selbst, hierzu solltest du deinen Blick ins pi1-Verzeichnis werfen.
Hab mir die php-Datei im Verzeichnis "pi1" angeschaut. Ich stell mir das jetzt so vor: der TypoScriptCode der auch die Marker enthält wird in ein mehrdimentionalles Array gemappt. In der PHP-Datei erfolgt dann ein Zugriff auf die DB. Der Wert der aus der DB kommt wird dem mehrdimensionallen Array zugewiesen. Ist das so korrekt.
Wäre es eigentlich sinnvoll sich zunächst mit der Erstellung von eigenen Extension zu beschäftigen? So würde ich das Grundprinzip besser verstehen und könnte anschließend einfacher Änderungen an der RTE-Extension bzw. an der css_systled_content Extension durchführen? Mir ist gerade aufgefallen das sowohl die RTE Extension als auch die css_styled_content Extension beide den Order pi1 und bie den order static mit der setup.txt besitzen. Also scheinen Extension ja immer nach dem gleichen Schema aufgebaut zu sein.
###IMAGES### enthält manchmal auch mehrere Bilder, du kannst ja 10, 20 oder 30 Bilder auch in ein "Text mit Bild"-Element einfügen, dafür ist dann ein PHP-Script notwendig, um das Zeug entsprechend aufzuschlüsseln.
In deinem Fall solltest du aber nochmal setup.txt durchgraben und nach dl/dt/dd suchen, den Marker selbst wirst du nicht finden, aber die Konfiguration für die Ausgabe.
das heißt ich brauche nichts ander PHP-Datei zu ändern?
-
Mir ist gerade aufgefallen das sowohl die RTE Extension als auch die css_styled_content Extension beide den Order pi1 und bie den order static mit der setup.txt besitzen. Also scheinen Extension ja immer nach dem gleichen Schema aufgebaut zu sein.
Ja, weil beides Extensions sind - und TYPO3 das Framework darstellt. TYPO3 ist ansich kein CMS, es wird nur durch die mitgelieferten Extensions zu einem gemacht :)
das heißt ich brauche nichts ander PHP-Datei zu ändern?
Nein
-
-
In deinem Fall solltest du aber nochmal setup.txt durchgraben und nach dl/dt/dd suchen, den Marker selbst wirst du nicht finden, aber die Konfiguration für die Ausgabe.
Für die Ausgabe des Bildes erstellt mir Typo3 diesen Code:
<div class="csc-textpic-imagewrap"> <dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:96px;"> <dt> <img src="uploads/pics/3da1e79ac584ea0aa381f80e31c24ef3_02.png" width="96" height="128" alt=""/> </dt> </dl> </div>Du sagst ja, dass ich nach der Konfiguration suchen muß die in meinem Fall zu folgender Ausgabe führt:
uploads/pics/3da1e79ac584ea0aa381f80e31c24ef3_02.png
Demanch habe ich, wie du es mir geraten hast, nach "dl" und "dt" gesucht. Leider kann ich trotzdem nicht die Stelle ausfinding machen, die für die Ausgabe des Bildpfades veranwortlich ist. Ich weiß garnicht woran ich erkennen kann ob es sich um die richtige Stelle handeln könnte.
-
Du sagst ja, dass ich nach der Konfiguration suchen muß die in meinem Fall zu folgender Ausgabe führt:
uploads/pics/3da1e79ac584ea0aa381f80e31c24ef3_02.pngDas macht der PHP-Code - hier wird ein Thumbnail erzeugt und eingefügt, wenn das Bild 1:1 angezeigt werden kann (ohne verkleinert zu werden), steht auch der richtige Pfad zum bild da.
Demanch habe ich, wie du es mir geraten hast, nach "dl" und "dt" gesucht. Leider kann ich trotzdem nicht die Stelle ausfinding machen, die für die Ausgabe des Bildpfades veranwortlich ist. Ich weiß garnicht woran ich erkennen kann ob es sich um die richtige Stelle handeln könnte.
Wenn ich in meiner setup.txt nach dl suche (TYPO3 4.2.x), finde ich ab Zeile 1325 folgendes. Das sieht mir doch verdächtig stark nach dem von dir geposteten HTML aus, und das kannst du manipuliueren.
rendering {
dl {
imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"> | </div>
noRowsStdWrap.wrap =
oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </dl>
imgTagStdWrap.wrap = <dt> | </dt>
editIconsStdWrap.wrap = <dd> | </dd>
caption {
required = 1
wrap = <dd class="csc-textpic-caption"> | </dd>
}
}
} # diese schließende Klammer findet sich erst in Zeile 1353, dazwischen gibts noch Beispiele für die Bilddarstellung als unsortierte Liste oder als Div-Suppe. Welche Variante man wählt, findet sich unter "renderMode" in Zeile 1354.-
Um die von mir benötigte HTML-Ausgabe zu erzeugen habe ich folgendes in das extentsion-Template der Startseite gepackt:
tt_content.image.20 {
rendering.dl {
oneImageStdWrap.dataWrap >
imgTagStdWrap.wrap >
}
imageStdWrapNoWidth.wrap >
layout.26.value = ###IMAGES###
}Als HTML-Ausgabe erhalte ich nun das:
<img src="uploads/pics/3da1e79ac584ea0aa381f80e31c24ef3_02.png" width="96" height="128" alt="Bild auf Startseite" />Dieser Kram steckt dann wohl hinter ###IMAGES###. Nun würde ich aber gerne erreichen das die Ausgabe so aussieht:
<img id="imageStartseite" src="uploads/pics/3da1e79ac584ea0aa381f80e31c24ef3_02.png" alt="Bild auf Startseite"/>Ich muss also irgendwie erreichen, dass die Attribute "width" und "height" wegfallen und das darüber hinaus das Attribut "id" mit dem Wert "imageStartseite" hinzugefügt wird. Wenn ich dich richtig verstanden habe muss ich mir dazu ein PHP Skript bauen, dass mir ###IMAGES### entsprechend zerpflückt und anschießend nach dem gewünschten Prinzip wieder zusammenbaut?
Falls ich mir wirklich so ein PHP-Script bauen muß weiß ich garnicht wie ich loslegen soll. Hab bisher noch nicht viel in PHP gemacht. Ich weiß auch garnicht wo ich das fertige Skript ablegen muss (im Ordner pi1?) und wie ich erreichen kann das es im TypoScript Code aufgerufen wird? Vielleicht kannst du mir hier einen Denkanstoss geben?
-
Ich muss also irgendwie erreichen, dass die Attribute "width" und "height" wegfallen und das darüber hinaus das Attribut "id" mit dem Wert "imageStartseite" hinzugefügt wird. Wenn ich dich richtig verstanden habe muss ich mir dazu ein PHP Skript bauen, dass mir ###IMAGES### entsprechend zerpflückt und anschießend nach dem gewünschten Prinzip wieder zusammenbaut?
ja, genauer sagt ein Hook für für css_styled_content-Extension
Falls ich mir wirklich so ein PHP-Script bauen muß weiß ich garnicht wie ich loslegen soll. Hab bisher noch nicht viel in PHP gemacht. Ich weiß auch garnicht wo ich das fertige Skript ablegen muss (im Ordner pi1?) und wie ich erreichen kann das es im TypoScript Code aufgerufen wird? Vielleicht kannst du mir hier einen Denkanstoss geben?
Befasse dich in erster Linie mit objektorientierter PHP-Programmierung, dann befasse dich mit der Extension-Schnittstelle von TYPO3.
Wozu die ID? Wenn die Startseite anders aussieht, hast du ohnehin ein eigenes CSS - warum dann dem Bild eine eigene ID verpassen? Warum nutzt du nicht ein Bild aus den Seiteneigenschaften dafür - ich vermute es handelt sich um ein Teaser-/Emotionsbild für die Startseite
Und warum willst du Breite/Höhe weghaben (das lässt sich afaik mit TypoScript unterbinden - weiss aber grade nicht wo.
-
»» Falls ich mir wirklich so ein PHP-Script bauen muß weiß ich garnicht wie ich loslegen soll. Hab bisher noch nicht viel in PHP gemacht. Ich weiß auch garnicht wo ich das fertige Skript ablegen muss (im Ordner pi1?) und wie ich erreichen kann das es im TypoScript Code aufgerufen wird? Vielleicht kannst du mir hier einen Denkanstoss geben?
Befasse dich in erster Linie mit objektorientierter PHP-Programmierung, dann befasse dich mit der Extension-Schnittstelle von TYPO3.
Was objektorientierte-Programmierung angeht, damit hab ich etwas Erfahrung. Allerdings nur auf Java-Basis. Das wird ja bei PHP nicht so viel anders sein?
Was die Extension-API von Typo3 angeht. Damit hab ich mich noch garnicht beschäftigt. Wollte damit eigentlich noch etwas warten. Naja, komme wohl nicht drum herum mich direkt damit zu beschäftigen. Das erlernen von Typo3 ist schon ziemlich heftig ;-).
Kannst du mir vielleicht grob sagen, wie ich wie ein PHP-Skript zum zerlegen von ###IMAGES### aussehen könnte, in welches Verzeichnis ich es ablegen muß und wie ich dafür sorgen kann, dass es auch aufgerufen wird?
Wozu die ID? Wenn die Startseite anders aussieht, hast du ohnehin ein eigenes CSS - warum dann dem Bild eine eigene ID verpassen? Warum nutzt du nicht ein Bild aus den Seiteneigenschaften dafür - ich vermute es handelt sich um ein Teaser-/Emotionsbild für die Startseite
Mit Hilfe der ID will ich das Foto auf der Startseite entsprechend fogendermaßen formatieren (die CSS Datei stammt noch aus der Zeit als ich die Seite komplett händisch gemacht habe):
#imageStartseite { width: 125px; height: 160px; float: left; padding: 30px 20px 30px 0px; }In meiner händisch erstellten Internetpräsenz habe ich genau eine CSS-Datei (main.css). Diese CSS-Datei ist für die Formatierung aller HTML-Seiten zuständig. Auch für die Startseite die anders aussieht. Die Startseite hat im Prinzip den gleichen Aufbau wie die anderen Seite. Zumindest was die DIV-Container angeht. Die Inhaltelemente im CONTENT-DIV-Container sind dort halt anders plaziert. Deshalb verstehe ich folgende Aussage von dir nicht: "Wenn die Startseite anders aussieht, hast du ohnehin ein eigenes CSS".
Dann schreibst du: "Warum nutzt du nicht ein Bild aus den Seiteneigenschaften dafür - ich vermute es handelt sich um ein Teaser-/Emotionsbild für die Startseite". Hier verstehe ich garnicht was du mit Bild aus den Seiteneigentschaften meinst. Was ist überhaupt ein Teaser-/Emotionsbild?
Was die eigene ID für das Bild angeht: Wie soll ich denn ohne eigene ID erreichen, dass das Bild entsprechend positioniert wird.
Und warum willst du Breite/Höhe weghaben (das lässt sich afaik mit TypoScript unterbinden - weiss aber grade nicht wo.
Naja, wenn ich die Höhe und Breite drin lassen würde, dann würde die Formatierung ja innerhalb des HTML stattfinden. Die Zuweisung von Höhe und Breite müßte doch eigentlich im CSS umgesetzt werden. So oder ähnlich:
#imageStartseite { width: 125px; height: 160px; float: left; padding: 30px 20px 30px 0px; }-
Was objektorientierte-Programmierung angeht, damit hab ich etwas Erfahrung. Allerdings nur auf Java-Basis. Das wird ja bei PHP nicht so viel anders sein?
Ich hab' keinen Plan von Java :)
Kannst du mir vielleicht grob sagen, wie ich wie ein PHP-Skript zum zerlegen von ###IMAGES### aussehen könnte, in welches Verzeichnis ich es ablegen muß und wie ich dafür sorgen kann, dass es auch aufgerufen wird?
Ich würde das IMG-Element mit einem XML-Parser zerlegen und wieder zusammensetzen (SimpleXML z.B.).
Mit Hilfe der ID will ich das Foto auf der Startseite entsprechend fogendermaßen formatieren (die CSS Datei stammt noch aus der Zeit als ich die Seite komplett händisch gemacht habe):
#imageStartseite {
width: 125px;
height: 160px;
float: left;
padding: 30px 20px 30px 0px;
}> Deshalb verstehe ich folgende Aussage von dir nicht: "Wenn die Startseite anders aussieht, hast du ohnehin ein eigenes CSS". Entweder ein eigenes, zusätzliches CSS-File nur mit den Änderungen oder ein id für das body-Element auf deiner Startseite, dann tuts ein Selektor. Was spricht gegen body#startseite img {} oder vergleichbares - und warum Breite/Höhe ins CSS - irgendwo ist das ein Sonderfall. Aber ohne das Design zu kennen, wird das schwierig werden. > Dann schreibst du: "Warum nutzt du nicht ein Bild aus den Seiteneigenschaften dafür - ich vermute es handelt sich um ein Teaser-/Emotionsbild für die Startseite". Hier verstehe ich garnicht was du mit Bild aus den Seiteneigentschaften meinst. Was ist überhaupt ein Teaser-/Emotionsbild? <http://vmware.com/services/> <http://vmware.com/partners/> Das Hintergrundbild der Überschrift ist ein Emotionsbild - ob das jetzt zum Design oder zum Inhalt gehört, ist eine Streitfrage - tendentiell ist es aber Verzierung, kann aber auch Information transportieren. > Was die eigene ID für das Bild angeht: Wie soll ich denn ohne eigene ID erreichen, dass das Bild entsprechend positioniert wird. Siehe oben. > Naja, wenn ich die Höhe und Breite drin lassen würde, dann würde die Formatierung ja innerhalb des HTML stattfinden. Die Zuweisung von Höhe und Breite müßte doch eigentlich im CSS umgesetzt werden. So oder ähnlich: Siehe oben - da das Bild ohnehin fixe Abmessungen hat, ist das vertretbar.
-
-
-
-
Eine Kleinigkeit noch. Überflüssige Kommentare würde ich gerne entfernen:
<!-- CONTENT ELEMENT, uid:47/textpic [begin] -->
<!-- Image block: [begin] -->
<!-- Image block: [end] -->
<!-- CONTENT ELEMENT, uid:47/textpic [end] -->Ich hab mal in der Setup.txt nach "<!-- CONTENT ELEMENT" und "<!-- Image block:" gesucht. Leider wird nichts gefunden. Nun weiss ich garnicht wie ich die Stelle in der setup.txt finden kann, die für das Einfügen der Kommentare verantwortlich ist. Denmach weiß ich auch nicht wie ich die Kommentare entfernen kann. Kannst du mir hier auf die Sprünge helfen?
-
Ich hab mal in der Setup.txt nach "<!-- CONTENT ELEMENT" und "<!-- Image block:" gesucht. Leider wird nichts gefunden. Nun weiss ich garnicht wie ich die Stelle in der setup.txt finden kann, die für das Einfügen der Kommentare verantwortlich ist. Denmach weiß ich auch nicht wie ich die Kommentare entfernen kann. Kannst du mir hier auf die Sprünge helfen?
Das kommt nicht von css_styled_content sondern gehört zur Debug-Ausgabe von TYPO3 - eine Suche nach disablePrefixComment wird dir weiterhelfen.
-
-
Eine Sache brennt mir noch auf der Zunge.
In meiner alten noch händisch erstellten Seite existiert eine Seite die folgenden Aufbau im Content-DIV-Container hat:
<h2>Titel der Seite</h2> <p>Absatz 1</p> <h3>Überschrift 1</h3> <p>Absatz 2</p> <ul class="list"> <li><a href="">Link1</a></li> <li><a href="">Link2</a></li> <li><a href="">Link3</a></li> </ul> <p>Absatz 3</p> <h4>Unterüberschrift</h4> ... ... ...Nun will ich diese Struktor über Typo3 nachbauen. Dazu ein paar Fragen:
Sollte ich die Liste über den RTE einfügen oder sollte ich besser das Inhaltselement Aufzählung verwenden?
Ich muss ja irgendwie erreichen, dass "Titel der Seite" später mit <h2> ausgezeichnet wird bzw. das "Überschrift 1" mit <h3> ausgezeichnet wird. Wie wäre denn hier das Vorgehen? Arbeite ich, und demnach später auch der Redakteur, hierfür im normalen Modus des RTE oder im HTML-Modus. Mir ist momentan absolut nich klar wie ich im normalen RTE-Modus erreichen könnte, dass ein Elemente richtig ausgezeichnet wird. Hier kann ich doch nur die Größe der Schrift beeinflussen nicht aber den semantischen Sinn z.B. einen Text als Überschrift h1 ausweisen.
Sollte ich im RTE komplett auf Leerzeichen verzichten? Das Problem ist ja das aus einem Leerzeichen ein <br> resultiert und genau das möchte ich ja eigentlich vermeiden.
Sollte man die Linkfunktion des RTE überhaupt nutzen?
-
Sollte ich die Liste über den RTE einfügen oder sollte ich besser das Inhaltselement Aufzählung verwenden?
Das Inhaltselement "Liste" hat einen eigenen Parser mit dem sich (wenn man dran herumprogrammieren kann/will) mehr anstellen lässt. Prinzipiell zerteilt er den eingegebenen String an Zeilenumbrüchen und setzt um jetzt Zeile ein <li />-Element - dieses verhalten lässt sich beliebig anpassen.
Ich muss ja irgendwie erreichen, dass "Titel der Seite" später mit <h2> ausgezeichnet wird bzw. das "Überschrift 1" mit <h3> ausgezeichnet wird. Wie wäre denn hier das Vorgehen? Arbeite ich, und demnach später auch der Redakteur, hierfür im normalen Modus des RTE oder im HTML-Modus. Mir ist momentan absolut nich klar wie ich im normalen RTE-Modus erreichen könnte, dass ein Elemente richtig ausgezeichnet wird. Hier kann ich doch nur die Größe der Schrift beeinflussen nicht aber den semantischen Sinn z.B. einen Text als Überschrift h1 ausweisen.
Versuchs mit "Paragraph" - dort kannst du den "Absatztyp" auswählen (Paragraph, Heading 1, Heading 2 ..., Address, Preformated).
Sollte ich im RTE komplett auf Leerzeichen verzichten? Das Problem ist ja das aus einem Leerzeichen ein <br> resultiert und genau das möchte ich ja eigentlich vermeiden.
Ein Leerzeichen im RTE resultiert in eniem Leerzeichen in der Ausgabe. Eine "Leerzeile" ist etwas anders.
"Enter" sollte einen Absatz erzeugen (<p />). Shift+Enter erzeugt einen Umbruch (<br />). Wenn du eine "Leerzeile" haben willst, überlege zuerst ob es sich nicht um etwas anderes handelt. Eine Leerzeile ist durch <br /><br /> zu erreichen, meistens aber typographischer Unsinn - ein Absatz sieht zwar meistens so aus wie eine Leerzeile, kann aber auch nur 3 Zeilen hoch sein oder eine halbe und sollte aus dem Grund nicht als Leerzeile bezeichnet werden
Sollte man die Linkfunktion des RTE überhaupt nutzen?
Was spricht dagegen? Du kannst HTML auch händisch eingeben - ggf. solltest die Linkerzeugungsroutine aber anpassen - z.B. wenn du auswählbare Klassen haben möchtest, um deine Links im Fließtext zu Kennzeichen - z.B. eine Klasse für Links auf geschützte Bereiche.
-
»» »» Ich muss ja irgendwie erreichen, dass "Titel der Seite" später mit <h2> ausgezeichnet wird bzw. das "Überschrift 1" mit <h3> ausgezeichnet wird. Wie wäre denn hier das Vorgehen? Arbeite ich, und demnach später auch der Redakteur, hierfür im normalen Modus des RTE oder im HTML-Modus. Mir ist momentan absolut nich klar wie ich im normalen RTE-Modus erreichen könnte, dass ein Elemente richtig ausgezeichnet wird. Hier kann ich doch nur die Größe der Schrift beeinflussen nicht aber den semantischen Sinn z.B. einen Text als Überschrift h1 ausweisen.
Versuchs mit "Paragraph" - dort kannst du den "Absatztyp" auswählen (Paragraph, Heading 1, Heading 2 ..., Address, Preformated).
Wo kann ich den "Paragraph" finden? Ist das eine Schaltfläche im RTE?
-
Wo kann ich den "Paragraph" finden? Ist das eine Schaltfläche im RTE?
Ein Dropdown - auf diesem Screenshot ganz rechts.
-
mmm,
leider verliere ich gerade etwas den Überblick. Folgendes würde ich gerne verstehen:
1.) warum muß der RTE wie konfiguriert werden
2.) warum muß css_styled_content wie konfiguriert werden
3.) worauf muß ich achten um mit Typo3 eine barrierefreie Seite zu bauenIch such schon ne Ewigkeit in Google. Dort werden dann meistens irgendwelche Sachen bis in kleinste Detail erläutert. Mir fehlt hier allerdings noch das Grundverständnis. Vielleicht kannst du mir nochmal in einfachen Worten erklären wie die drei Punkte oben umzusetzen sind.
Das Problem momentan ist, dass ich nicht wirklich weiter komme.... eine konkrete Frage kann ich leider auch nicht stellen, da mir der Zusammenhang der drei Punkte oben noch nicht wirklich klar ist.
Ist das nirgendwo im Detail AUF DEUTSCH erklärt?
-
1.) warum muß der RTE wie konfiguriert werden
Muss er nicht - wenn dir die produzierte Ausgabe gefällt, lass es bleiben. Die Defaultausgabe ist in den meisten Fällen gut genug.
2.) warum muß css_styled_content wie konfiguriert werden
Wenn dir die produzierte Ausgabe gefällt, lass es :)
3.) worauf muß ich achten um mit Typo3 eine barrierefreie Seite zu bauen
Auf all das, worauf du sonst auch achten müsstest - mit TYPO3 selbst hat das nicht viel zu tun
Ist das nirgendwo im Detail AUF DEUTSCH erklärt?
98% der TYPO3-Enwickler wissen wahrscheinlich garnicht, dass man css_styled_content einfach per TypoScript manipulieren kann - du erwartest dir jetzt ernsthaft informationen (in deutscher Sprache) welche dir erkären, WARUM das eine schlaue Idee ist, unsinnigen Code in ordentlichen Code zu verwandeln?
HTML und CSS erstellen (hat nichts mit TYPO3 zu tun) und TYPO3 dazu bringen, diesen Code zu erzeugen. Wie bei jeder anderen Template-Engine oder jedem anderen CMS auch.
-
-
-
-
-
-
-
-
-
-
-
Im Code unten spiegelt <h1> die Überschrift der ganzen Internetpräsenz wieder. <h2> spiegelt die Überschrift der akuellen Seite der Internetpräsenz wieder. Aus diesem Grund habe ich den RTE so konfiguriert, dass nur Überschriften ab <h3> vom Redakteuer verwendet werden dürfen. Die Überschriften <h1> udn <h2> sollen automatisch gesetzt werden. Wie das automatische setzen von <h1> und <h2> in Typo3 funktioniert weiß ich nicht so richtig.
Unter "Template ==> root ==> Info/Modify ==> Sitetitle" habe ich den Titel der Seite festgelegt. Genau dieser Kram sollte jetzt zwischen <h1> und </h1> eingeblendet werden. Wie kann ich das hinbekommen?
Unter "Seite" wird ja die Seitenstruktur in Typo3 dargestellt. Die Elemente die unter root angezeigt werden, stellen später mein Menü dar. Mein Ziel ist es, dass der Text des selektierten Menüeintrags auch im Bereich zwischen <h2> und </h2> angezeigt wird. Wie kann ich das erreichen?
... ... <body> <h1 id="header"><span></span>Titel der Internetpräsenz</h1> <div id="content"> <h2>Titel der aktuellen Seite der Internetpräsenz</h2> <h3>Überschrift 1 (über RTE eingefügt)</h3> <h3>Überschrift 2 (über RTE eingefügt)</h3> <h4>Unterüberschrift 1 (über RTE eingefügt)</h4> <h4>Unterüberschrift 2 (über RTE eingefügt)</h4> <h3>Überschrift 3 (über RTE eingefügt)</h3> <h4>Unterüberschrift 1 (über RTE eingefügt)</h4> ... ... </div> ... ...-
Unter "Template ==> root ==> Info/Modify ==> Sitetitle" habe ich den Titel der Seite festgelegt. Genau dieser Kram sollte jetzt zwischen <h1> und </h1> eingeblendet werden. Wie kann ich das hinbekommen?
Momentan hab ich den Titel der Seite in der Designvorlage statisch untergebracht. Nun soll dieser aber aus "Template ==> root ==> Info/Modify ==> Sitetitle" ausgelesen werden. Folgendes klappt nicht:
subparts.SITETITLE = TEXT
subparts.SITETITLE.field = sitetitle
subparts.TITLE.wrap = <h1>|</h1>Demnach ist "sitetitle" also die falsche Bezeichnung. Wie kann ich denn per TS auf den Seitentitle zugreifen?
Unter "Seite" wird ja die Seitenstruktur in Typo3 dargestellt. Die Elemente die unter root angezeigt werden, stellen später mein Menü dar. Mein Ziel ist es, dass der Text des selektierten Menüeintrags auch im Bereich zwischen <h2> und </h2> angezeigt wird. Wie kann ich das erreichen?
Hab's hinbekommen. Hab mit Subparts gearbeitet und dann diesen Code verwendet:
subparts.TITLE = TEXT
subparts.TITLE.field = subtitle // title
subparts.TITLE.wrap = <h2>|</h2>Dadurch steht jetzt in der Menüleist "Startseite" und im Inhaltsbereich ein längerer Text den ich bei Subtitle eingetragen habe.
Nun will ich erreichen das die Überschriften aller Inhaltselemente auf <h3> festgelegt werden. Default ist ja <h1>. Das geht wohl mit dieser Zeile:
content.defaultHeaderType = 3
Diese Zeile hab ich in das Template von root gepackt. Klappt aber nicht. Die Inhaltselemente erhalten nach wie vor <h1> als Überschrift. Was mach ich denn hier falsch? Kann es sein, dass diese Zeile nicht ins Template gelegt werden muß, sondern das ich dafür eine Konstante definieren muß? Falls ja, wie kann ich denn solch eine Konstante definieren?
-
content.defaultHeaderType = 3
Wenn du in setup.txt von css_styled_content suchst, wirst du bei einer Suche nach h1 schnell zu lib.stdheader.10.1.fontTag kommen - das dortige sollte dich deinem Vorhaben näher bringen.
-
-
