Bilder nur als Image ausgeben

  • Senekha Senekha
    T3PO
    0 x
    12 Beiträge
    0 Hilfreiche Beiträge
    18. 01. 2011, 12:26

    Hallo Community

    Bei meinem Projekt möchte ich gerne mehrere Bilder, die je nach Seite, in der Spalte "Rand" definiert habe, als normale Auflistung ohne UL/LI und sonstige HTML/CSS drumherum ausgeben.

    1. <div id="bild">
    2. <!-- ###NIVO_SLIDER### start -->
    3. <div id="slider" class="nivoSlider">
    4. <img src="fileadmin/user_upload/900_300/1.jpg" alt="" />
    5. <img src="fileadmin/user_upload/900_300/2.jpg" alt="" />
    6. <img src="fileadmin/user_upload/900_300/3.jpg" alt="" />
    7. <img src="fileadmin/user_upload/900_300/4.jpg" alt="" />
    8. </div>
    9. <!-- ###NIVO_SLIDER### stop -->
    10. </div>

    Die Bilder sollen für den Image-SLider Nivo-SLider ([url=]http://nivo.dev7studios.com/[/url]) bereit gestellt werden.
    Bis jetzt ist es mir nicht gelungen die Bilder in dieser Form ohne umgebendes HTML auszugeben.
    Ständig die verschachtelten DIV´s mit class="csc-default" usw, oder eine leere Ausgabe im Subpart ###NIVO_SLIDER###.

    Habe dazu ein Sub-Template angelegt mit folgenden Anweisungen. Wobei mir klar ist das der 2. Teil ziemlich falsch ist.

    1. #Slider erstellen
    2. temp.slider = TEXT
    3. temp.slider {
    4. table = tt_content
    5. select.orderBy = sorting
    6. select.where = colPos = 3
    7.  
    8. }
    9. temp.slider.wrap = <div id="slider" class="nivoSlider">|</div>
    10.  
    11. #Bild auslesen
    12. tt_content = COA
    13. tt_content {
    14. 10 = IMAGE
    15. 10 {
    16. field = file
    17. wrap = |
    18. }
    19. }

    Später wird das ganze über Subpart eingebunden was keine Probleme macht.

    1. ....
    2. subparts {
    3. HAUPT_NAVI < temp.menu
    4.  
    5. INHALT_MITTE < temp.inhalt_mitte
    6. INHALT_RECHTS < temp.inhalt_rechts
    7. NIVO_SLIDER < temp.slider
    8.  
    9. FOOTER < temp.footer_menu
    10. }
    11. ....

    Ein Tip wie diese Ausgabe erzeugt werden kann wäre ziemlich Hilfreich.


  • 1
  • mort mort
    Padawan
    0 x
    36 Beiträge
    0 Hilfreiche Beiträge
    18. 01. 2011, 16:11

    Hi Senekha,

    du kannst zwischen drei vordefinierten renderMethods für Bilder wählen:
    dl, ul, div

    Standard ist dl, was dann eine definition-list um das Bild erzeugt.
    Diese Dinger sind notwendig um die Text/Bild-Positionierung abbilden zu können.

    Wenn du wirklich kein HTML drumrum haben willst, dann könntest du eine neue renderMethod erzeugen und dann alle Bilder so rendern lassen. Dann gehen dir natürlich die Text-/Bild-Positionierungoptionen verloren!

    Da dieses Problem schon öfter jemand hatte, ist glaube ich irgendwann in Version 4 eine neue renderMethod names "simple" eingeführt worden. Die könnte möglicherweise das machen, was du vorhast.

    Probier mal das hier:

    1. tt_content.image.20.renderMethod = simple

    Alternativ kannst du dir selbst eine renderMethod mit leeren Wraps schreiben:

    1. tt_content.image.20 {
    2. rendering {
    3. foobar {
    4. imageRowStdWrap.dataWrap = |
    5. noRowsStdWrap.wrap = |
    6. oneImageStdWrap.dataWrap = |
    7. imgTagStdWrap.wrap = |
    8. editIconsStdWrap.wrap = |
    9. caption.wrap = |
    10. }
    11. }
    12. renderMethod = foobar
    13. }

    Soooo. Ich habe ganz oft den Fall, dass ein Kunde einen Slider auf der Startseite hat und da dann auch die Bilder selber einpflegen will.
    Hier mal meine Version, mit dem gleichen Ansatz, den du auch nutzt:

    1. ##### SLIDER #####
    2. temp.slider = COA
    3. temp.slider {
    4. wrap = <div class="slide"> | </div>
    5. 10 = TEXT
    6. 10 {
    7. field = header
    8. wrap = <div class="description"><h2> | </h2>
    9. }
    10. 20 = TEXT
    11. 20 {
    12. field = bodytext
    13. wrap = <p> | </p></div>
    14. parseFunc < lib.parseFunc_RTE
    15. }
    16. 30 = IMAGE
    17. 30 {
    18. file.import.field = image
    19. file.import = uploads/pics/
    20. wrap = <div class="photo"> | </div>
    21. }
    22. }
    23.  
    24. page.10.marks.SLIDER = CONTENT
    25. page.10.marks.SLIDER {
    26. table = tt_content
    27. pidInList = 6
    28. orderBy = sorting
    29. where = colPos=1
    30. }
    31. renderObj < temp.slider
    32. }
    33. ###

    Die slider-Inhalte werden direkt auf der Startseite (id=6) in der rechten Spalte als "Text mit Bild" angelegt.
    Im COA bastel ich dann die Elemente "Header", "Bodytext" und "Image" wieder inklusive der vom Slider benötigten wraps zusammen.

    Du könntest das fast do übernehmen, müsstest nur die DOM-Struktur des Nivo-Sliders nachbauen.
    Diese Variante ist weniger mit Kanonen auf Spatzen geschossen als die gesamte renderMethod umzustellen.

    Gruß,
    mort`

  • 1