Suche
Teilen
startseite » forum

[Frage] Counter für CE mit bestimmten cType

  • mimii mimii
    Jedi-Ratsmitglied
    0 x
    616 Beiträge
    1 Hilfreiche Beiträge
    27. 03. 2018, 11:06

    Hallo ins Forum,

    ich möchte nach jedem zweiten Contentelemnt vom cType "card" ein <div> als Trenner einfügen. Das HTML soll so aussehen:
    [code]<div class="card-deck">
    <div class="card">..... </div>
    <div class="card">..... </div>
    <div class="w-100 d-none d-md-block"></div>
    <div class="card">..... </div>
    <div class="card">..... </div>
    </div>
    [/code]
    Das <div class="card"> ist als eigenes CE vom cType "card" angelegt. Kann ich in fluid nun
    - zählen wieviele cards in einem "card-deck" enthalten sind
    - eine Schleife legen, so dass nach jeder zweiten "card" mein Trenn-DIV geschrieben wird

    Danke für n tipp und Gruß
    mimii

  • 1
  • pstranghoener pstrangho...
    Die Macht
    0 x
    534 Beiträge
    26 Hilfreiche Beiträge
    05. 04. 2018, 09:46

    Hallo mimii, so müsste es funktionieren :)

    <f:for each="{items}" as="item" key="itemNumber" iteration="iterator">
    <f:if condition="{iterator.cycle} % 3">
    <f:then>
    <div class="card">..... </div>
    </f:then>
    <f:else>
    <div class="w-100 d-none d-md-block"></div> <!-- jedes dritte element -->
    </f:else>
    </f:if>
    </f:for>

    Gruß Philipp

  • 0 x
    3273 Beiträge
    157 Hilfreiche Beiträge
    13. 04. 2018, 10:14

    Hallo mimii,

    Deine Elemente kommen ja in etwas aus styles.content.get (bzw. ähnlichem CONTENT-Objekt). D.h. Du kommst das IMHO nicht per Fluid weiter, sondern müsstest eher per TS agieren.

    Mit einen Register im PAGE-Objekt und entsprechend bedingtem Hochzählen/Reset beim Rendering der einzelnen CEs im CONTENT-Objekt sollte sich ein Weg finden lassen.
    Hab keinen konkreten Code, da selbst noch nicht verwendet. Aber von den Gedanken her könnte es werden.

    Viele Grüße
    Julian

    Kleiner Hinweis:
    das Forum hier ist leider nicht mehr so frequentiert :-(
    Für schnellere Hilfe und mehr Leser, guck mal
    - auf stackoverflow ( https://stackoverflow.com/questions/tagged/typo3 )
    - oder in die slack-Channels ( https://typo3.org/community/meet/chat-slack )

  • Teisinger Teisinger
    Jedi-Ratsmitglied
    0 x
    502 Beiträge
    38 Hilfreiche Beiträge
    13. 04. 2018, 17:47

    als Trenner?
    geht doch mit purem CSS:

    :nth-child()
    http://maddesigns.de/nth-child-pseudo-selektor-css3-adventskalender-tag-13-550.html

    und ::before

    .card-deck::nth-child(3n+3)::before {}

    https://github.com/groundstack-org

  • 1
Präsentiert von