Hallo
Mich beschäftigt seit einigen Tagen ein Problem. Und zwar möchte ich mittels TypoScript Content-Elemente ausgeben. Soweit alles gut.
Jedoch möchte ich nur z.B. jedes 2. Content-Element bei einem Marker ausgeben.
Ich stelle mir das so vor: der Benutzer füllt eine Seite mit Content-Elementen ab. Immer das 2. Content-Element wird auf einem speziellen Marker ausgegeben.
Ich möchte jedoch nicht mit Spalten (colPos) arbeiten.
Hat jemand einen Vorschlag, wie ich das realisieren kann?
webby schrieb
Ich möchte jedoch nicht mit Spalten (colPos) arbeiten.
Das dürfte aber der richtige Weg sein, wenn Du mit dem traditionellen Templating arbeitest. Auf irgendeine Weise musst Du dem inhalt ja mitteilen, wo er sich hinsetzen soll.
Vielleicht ist TemplaVoilà für Deinen Fall auch eine Lösung. Da ist die Platzierung etwas flexibler bzw. redakteursfreundlicher - hat dafür aber an anderer Stelle seine Eigenheiten.
Viele Grüße
Julian
Schade klappt es nicht etwas dynamischer.
Einen möglichen Lösungsansatz habe ich nun:
renderObj.stdWrap.outerWrap.cObject = CASE
renderObj.stdWrap.outerWrap.cObject {
key.data = cObj:parentRecordNumber
default = TEXT
default.value = <span style="visibility: hidden; display: none;">|</span>
1 = TEXT
1.value = <div class="contentblock">|</div>
4 = TEXT
4.value = <div class="contentblock">|</div>
7 = TEXT
7.value = <div class="contentblock">|</div>
}
Mit "cObj:parentRecordNumber" weis ich, welche Nummer das Content-Element hat.
Bei
1 = TEXT
1.value = <div class="contentblock">|</div>
Pack ich ein DIV um das 1. 4. und 7. Content-Element.
Alle anderen möchte ich aber ausblenden. Das hab ich im Bereich
default = TEXT
default.value = <span style="visibility: hidden; display: none;">|</span>
umgesetzt.
Wie man sieht, blende ich die anderen Elemente nur mit CSS aus. Ist natürlich nicht optimal.
Gibt es eine Möglichkeit, beim default-Case den Inhalt zu löschen? Alle anderen Inhalte sollen gar nicht weiter verarbeitet werden.
default.value <
funktioniert da nicht, da ich mich in einem Wrap befinde.
Weitere Ideen? Irgendeine Möglichkeit die Content-Elemente welche auf den Default-Case zutreffen zu löschen / nicht auszugeben?
Für mich klingt das sehr merkwürdig, Dein Ansatz. Es ist Content vorhanden, der im BE nicht als versteckt gekennzeichnet ist, im FE aber nicht angezeigt werden soll? Das gibt für mich keinen Sinn. Warum ist der Content dann existent?
Kann es sein, dass Du Dich in Deinen Gedanken verrannt hast? Beschreib doch mal, was Du letztlich erreichen willst, was/wie der Content verarbeitet/präsentiert werden soll. Sollte zu allem eine passende Lösung geben.
Nun gut, es soll bei der Ausgabe drei Spalten geben mit Content. Der Benutzer soll x Content-Elemente pro Page abfüllen.
Ich möchte die Content-Elemente auf die drei Spalten aufteilen. Bei z.B. sechs Content-Elementen gibt es somit zwei Zeilen mit je drei Spalten. Bei sieben Elementen, fällt das 7. Element wiederum in die erste Spalte jedoch in der 4. reihe.
Vorerst habe ich einfach um jedes Content-Element ein DIV gepackt, und dieses mit CSS links gefloated (float: left). Soweit war alles gut, jedoch werden die Content-Elemente verschieden hoch, das gibt dann zwischen den Zeilen unschöne Abstände.
Also am besten die Content-Elemente in drei Spalten "auffüllen".
Damit der Anwender nun nicht die Spalte colPos) bestimmen muss, möchte ich, die Content-Elemente selektiert ausgeben. Also bei einem Marker nur jedes 1. 4. und 7. bei einem anderen Marker nur jedes 2. 5. und 8.
Mit fest zugewiesenen Spalten (colPos) kann der Anwender nun leider alle Content-Elemente in der ersten Spalte abfüllen.
Dies möchte ich mit dem automatischen aufteilen verhindern.
Da die Anzahl der Content-Elemente von 3-9 variieren kann, ist eine fixe Auswahl mittels
select {
...
begin = 0
max = 3
}
usw. auch nicht sinnvoll. Da es ja mal 3, 5, 8 oder auch 9 Content-Elemente geben kann.
Ich hoffe damit konnte ich die Problemstellung etwas klarer machen.
Sorry für den Doppelpost.
Aber nach einigen Stunden versuchen usw. habe ich nun die Lösung. Die möchte ich natürlich nicht für mich behalten. Vielleicht kann jemand anders davon noch profitieren.
# Nur 1 4 7 Content-Element an renderObj zuweisen
renderObj = CASE
renderObj {
key.data = cObj:parentRecordNumber
default = renderObj
default <
1 = renderObj
1 < tt_content
1.image.20.maxW = 320
1.stdWrap.wrap = <div class="contentblock">|</div>
4 = renderObj
4 < tt_content
4.image.20.maxW = 320
4.stdWrap.wrap = <div class="contentblock">|</div>
7 = renderObj
7 < tt_content
7.image.20.maxW = 320
7.stdWrap.wrap = <div class="contentblock">|</div>
}
Wie man sieht, wird ein DIV per wrap drum rum gelegt. Zudem ist die max. Bildbreite auf 320 Pixel beschränkt. Grössere Bilder werden skaliert.
Das Ganze ist zwar etwas "krank" jedoch funktioniert es. Hat mir selbst keine Ruhe gegeben bis ich eine mögliche Lösung gefunden habe.
Hallo.
webby schrieb
Vorerst habe ich einfach um jedes Content-Element ein DIV gepackt, und dieses mit CSS links gefloated (float: left). Soweit war alles gut, jedoch werden die Content-Elemente verschieden hoch, das gibt dann zwischen den Zeilen unschöne Abstände.
Das ist doch mal eine Information, auf der besser aufgebaut werden kann für eine Lösung des Problems. Denn damit ist Problem "nur", dass das Floating korrekt läuft.
Deine Lösung ist schon etwas merkwürdig - aber gut, sie geht. Ein anderer Ansatz wäre, dass Du in Abhängikeit der Position/Anzahl ein Element hinzuwrapst, dass das Floating aufhebt und damit die Zeilen beendet. Dafür wäre die optionSplit-Funktion ein kürzerer Weg, der zudem wahrscheinlich für eine (fast) unendliche Anzahl von CEs funktionieren würde.
Viele Grüße
Julian
Hallo
So etwas hatte ich bereits umgesetzt. Jedoch ergibt sich dann jeweils einen Abstand zwischen den DIV's.
In etwa so:
XXXX XXXX XXXX
XXXX XXXX XXXX
XXXX XXXX
XXXX
XXXX XXXX XXXX
XXXX XXXX
XXXX
Die DIVs oder Content-Elemente der 2. Zeile sollten aber aufrücken zu den CE's in der 1. Zeile.
Meines Wissesn ist das nur mit CSS nicht möglich. Ausser eben ich fülle die Blöcke spaltenweise ab.
Eigentlich sollte das klappen:
<div style="width: 300px">
<div style="width:100px;float:left;background-color:#ff0;"> <br />
</div>
<div style="width:100px;float:left;background-color:#0ff;"> <br />
<br />
</div>
<div style="width:100px;float:left;background-color:#f0f;"> </div>
<hr style="clear: left; height: 1px; width: 1px; line-height:1px; visibility: hidden; border:none; font-size:1px;" />
<div style="width:100px;float:left;background-color:#333;"><br />
<br />
<br />
<br />
</div>
<div style="width:100px;float:left;background-color:#3f0;"> </div>
<div style="width:100px;float:left;background-color:#f30;"><br />
<br />
</div>
<hr style="clear: left; height: 1px; width: 1px; line-height:1px; visibility: hidden; border:none;" />
<div style="width:100px;float:left;background-color:#660;"> </div>
</div>
Das <hr>-Tag ist jetzt nur mal quick&dirty formatiert. Das lässt sich auch ganz unsichtbar hinbekommen.
Danke für den Hinweis. Jedoch führt genau dieses DIV-Konstrukt zu den Problemen die ich am Anfang hatte. Habe deine Boxen mal mit etwas Dummy-Inhalt abgefüllt:
<div style="width: 300px">
<div style="width:100px;float:left;background-color:#ff0;">
1. CE ABC abc 123 Inhalt ABC abc 123 Inhalt
</div>
<div style="width:100px;float:left;background-color:#0ff;">
2. CE ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt
</div>
<div style="width:100px;float:left;background-color:#f0f;">
3. CE ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt
</div>
<hr style="clear: left; height: 1px; width: 1px; line-height:1px; visibility: hidden; border:none; font-size:1px;" />
<div style="width:100px;float:left;background-color:#333;">
4. CE ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt
</div>
<div style="width:100px;float:left;background-color:#3f0;">
5. CE ABC abc 123 Inhalt ABC abc 123 Inhalt
</div>
<div style="width:100px;float:left;background-color:#f30;">
6. CE ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt ABC abc 123 Inhalt
</div>
</div>
Bringt 6 Boxen. Floating ist auch gut. Jedoch werden die Boxen verschieden lang, genau wie die Content-Elemente. Was daraus ergeben sich hässliche Abstände zwischen Element 1 und Element 4.
Ganz am Anfang der Realisation habe ich genau denselben Fehler gemacht. Während dem Erstellen des DIV-Layouts habe ich für die Boxen eine fixe höhe genommen. Sah soweit alles gut aus.
Jedoch sind die Inhalte natürlich nicht gleich hoch, und da begannen die Probleme die mich zur Lösung beim 6. Post führten.
Nun fülle ich die Elemente Spaltenweise ab, somit gibt es zwischen Element 1 und Element 4 keinen Abstand mehr wenn Element 2 z.B. viel höher ist als Element 1.
Und genau dieser Effekt war nicht gewünscht ;-)
Ok, dann hatte ich die ASCII-Art-Darstellung falsch verstanden. Dachte, es ging Dir um die 5. Zeile dort. :o