FCE - verschachteltes - mappen - Fragen über Fragen

  • timmy2007 timmy2007
    Jedi-Meister
    0 x
    426 Beiträge
    0 Hilfreiche Beiträge
    29. 12. 2011, 10:37

    Ich möchte gerne folgenden HTML Code in TemplaVoila als FCE mappen:

    1. <!-- Posts -->
    2.  
    3. <div>
    4. <ul class="blocks-thumbs thumbs-rollover">
    5. <li>
    6. <a href="single.html" class="thumb" title="An image"><img src="img/dummies/282x150.gif" alt="Post" /></a>
    7. <div class="excerpt">
    8. <a href="single.html" class="header">Lorem ipsum dolor</a>
    9. <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
    10. </div>
    11. <a href="single.html" class="link-button"><span>Read more &#8594;</span></a>
    12.  
    13. </li>
    14. <li>
    15. <a href="single.html" class="thumb" title="An image"><img src="img/dummies/282x150.gif" alt="Post" /></a>
    16. <div class="excerpt">
    17. <a href="single.html" class="header">Lorem ipsum dolor</a>
    18. <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
    19. </div>
    20. <a href="single.html" class="link-button"><span>Read more &#8594;</span></a>
    21.  
    22. </li>
    23. <li>
    24. <a href="single.html" class="thumb" title="An image"><img src="img/dummies/282x150.gif" alt="Post" /></a>
    25. <div class="excerpt">
    26. <a href="single.html" class="header">Lorem ipsum dolor</a>
    27. <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
    28. </div>
    29. <a href="single.html" class="link-button"><span>Read more &#8594;</span></a>
    30.  
    31. </li>
    32. </ul>
    33. </div>
    34. <!-- ENDS posts -->

    Die Schwierigkeiten für mich liegen beim Mapping der Links, die dort zu sehen sind. Das Bild, die Überschrift und der "Read more" Button sind zu dem selben Artikel als Link im Quelltext zu sehen.

    In Typo3 würde ich aber es so wollen, das die Links zu den eigentlichen Artikel führen sollen, die dann von den Redakteuren eingegeben werden. Oder gibt es noch eine andere Option, dass dieser "Aufmacher" Text automatisch zu einen längeren Artikel führen kann?

    Zusätzlich finde ich es schwierig, den o.a. Quelltext zu mappen und ich weiss im Moment nicht, wie ich damit anfangen soll. Wer kann mir einen Tipp geben?


  • 1
  • timmy2007 timmy2007
    Jedi-Meister
    0 x
    426 Beiträge
    0 Hilfreiche Beiträge
    11. 01. 2012, 08:32

    Hat jemand eine Idee?

  • LuP LuP
    Jedi-Meister
    0 x
    496 Beiträge
    1 Hilfreiche Beiträge
    11. 01. 2012, 12:07

    Hallo,

    anbei mein Vorschlag.

    [b]Template:[/b]

    1. <div>
    2. <ul class="blocks-thumbs thumbs-rollover">
    3. <li>
    4. <img src="img/dummies/282x150.gif" alt="Post" />
    5. <div class="excerpt">
    6. <a href="my_link.html" class="header">[header]</a>
    7. <p>[abstract]</p>
    8. </div>
    9. </li>
    10. </ul>
    11. </div>

    [b]Mapping:[/b]
    div als ROOT container mappen (mode: OUTER)
    ul als section mappen (mode: INNER)
    li als container mappen (mode: OUTER)
    Dann noch alle Elemente im letzten Container mappen.

    Wenn alle Links zum gleichem Ziel verweisen, wäre nur einmal mappen nötig (z.B beim Header) und für weitere verlinkten Elemente per typolink direkt im DS zu setzen. Damit wären die a-Tags um das Bild und um Read more überflüssig.

    Ansatz für [b]DS:[/b]

    1. <field_abstract type="array">
    2. <tx_templavoila type="array">
    3. <title>Abstract</title>
    4. <description>Map this to p tag</description>
    5. <sample_data type="array">
    6. <numIndex index="0">[Abstract]</numIndex>
    7. </sample_data>
    8. <eType>rte</eType>
    9. <TypoScript><![CDATA[
    10. 10 = TEXT
    11. 10.current = 1
    12. 10.parseFunc = < lib.parseFunc_RTE
    13. 20 = HTML
    14. 20.value = <span>Read more</span>
    15. 20.typolink.parameter.field = field_link
    16. 20.wrap = |
    17. ]]></TypoScript>
    18. <proc type="array">
    19. <HSC type="integer">0</HSC>
    20. </proc>
    21. </tx_templavoila>
    22. <TCEforms type="array">
    23. <!-- ... -->
    24. </TCEforms>
    25. </field_abstract>
    26.  
    27. <field_link type="array">
    28. <type>attr</type>
    29. <tx_templavoila type="array">
    30. <title>Link</title>
    31. <description>Map to a:href attribut</description>
    32. <sample_data type="array">
    33. <numIndex index="0">[Link]</numIndex>
    34. </sample_data>
    35. <eType>link</eType>
    36. <tags>a:attr:href</tags>
    37. <TypoScript>
    38. 10 = TEXT
    39. 10.typolink.parameter.current = 1
    40. 10.typolink.returnLast = url
    41. </TypoScript>
    42. <proc type="array">
    43. <HSC type="integer">1</HSC>
    44. </proc>
    45. </tx_templavoila>
    46. <TCEforms type="array">
    47. <!-- ... -->
    48. </TCEforms>
    49. </field_link>

    VG,
    LuP

  • timmy2007 timmy2007
    Jedi-Meister
    0 x
    426 Beiträge
    0 Hilfreiche Beiträge
    11. 01. 2012, 16:52

    [quote="LuP"]
    Hallo,

    anbei mein Vorschlag.

    [b]Template:[/b]

    1. <div>
    2. <ul class="blocks-thumbs thumbs-rollover">
    3. <li>
    4. <img src="img/dummies/282x150.gif" alt="Post" />
    5. <div class="excerpt">
    6. <a href="my_link.html" class="header">[header]</a>
    7. <p>[abstract]</p>
    8. </div>
    9. </li>
    10. </ul>
    11. </div>

    [b]Mapping:[/b]
    div als ROOT container mappen (mode: OUTER)
    ul als section mappen (mode: INNER)
    li als container mappen (mode: OUTER)
    Dann noch alle Elemente im letzten Container mappen.

    Wenn alle Links zum gleichem Ziel verweisen, wäre nur einmal mappen nötig (z.B beim Header) und für weitere verlinkten Elemente per typolink direkt im DS zu setzen. Damit wären die a-Tags um das Bild und um Read more überflüssig.

    Ansatz für [b]DS:[/b]

    1. <field_abstract type="array">
    2. <tx_templavoila type="array">
    3. <title>Abstract</title>
    4. <description>Map this to p tag</description>
    5. <sample_data type="array">
    6. <numIndex index="0">[Abstract]</numIndex>
    7. </sample_data>
    8. <eType>rte</eType>
    9. <TypoScript><![CDATA[
    10. 10 = TEXT
    11. 10.current = 1
    12. 10.parseFunc = < lib.parseFunc_RTE
    13. 20 = HTML
    14. 20.value = <span>Read more</span>
    15. 20.typolink.parameter.field = field_link
    16. 20.wrap = |
    17. ]]></TypoScript>
    18. <proc type="array">
    19. <HSC type="integer">0</HSC>
    20. </proc>
    21. </tx_templavoila>
    22. <TCEforms type="array">
    23. <!-- ... -->
    24. </TCEforms>
    25. </field_abstract>
    26.  
    27. <field_link type="array">
    28. <type>attr</type>
    29. <tx_templavoila type="array">
    30. <title>Link</title>
    31. <description>Map to a:href attribut</description>
    32. <sample_data type="array">
    33. <numIndex index="0">[Link]</numIndex>
    34. </sample_data>
    35. <eType>link</eType>
    36. <tags>a:attr:href</tags>
    37. <TypoScript>
    38. 10 = TEXT
    39. 10.typolink.parameter.current = 1
    40. 10.typolink.returnLast = url
    41. </TypoScript>
    42. <proc type="array">
    43. <HSC type="integer">1</HSC>
    44. </proc>
    45. </tx_templavoila>
    46. <TCEforms type="array">
    47. <!-- ... -->
    48. </TCEforms>
    49. </field_link>

    VG,
    LuP

    [/quote]

    Du meinst also, ich sollte Header, Readmore und das Bild nicht mappen? Oder doch? Und ich müßte ja meine komplette HTML Struktur mappen, nicht wahr? Ist Dein Mapping-Beispiel vollständig?

  • LuP LuP
    Jedi-Meister
    0 x
    496 Beiträge
    1 Hilfreiche Beiträge
    11. 01. 2012, 18:06

    mappen sollst Du die ganzen Elemente schon. Zum Mapping kommen also noch hinzu:

    - field_image zum img-Tag
    - field_header zum h2-Tag (hierzu habe ich im Template das h2-Tag vergessen, es müsste heißen <a - href="my_link.html" class="header"><h2>[header]</h2></a>)
    - field_link zum a:href Attribut
    - field_abstract zum p-Tag

    Nur beim Link wird nur der Header vom a-Tag umgeschlossen. Die restlichen Verlinkungen erfolgen im TypoScript vom DS (s. mein Beispiel zu DS).

    Read more würde ich im Template ganz weg lassen. Man kann im field_abstract ein Read more Link anbringen und per TypoScript anhand typoLink mit dem field_link verknüpfen (s. auch mein Beispiel zu DS hierzu). Das gleiche Prinzip gilt auch für das Bild, um das field_image mit dem field_link zu verlinken, allerdings dann noch mit stdWrap.

    1. 10 = IMAGE
    2. #...
    3. 10.stdWrap.typolink.parameter.field = field_link

    VG,
    LuP

  • 1