[TYPO3-german] Onepager + Ext:backgroundimage

[André Sheydin]

Hallo zusammen,

ich benutze TS, um mehrere Seiten untereinander als Onepager darzustellen. Im Moment nehme ich pro Seite jeweils das erste Medienelement und zeige es als Hintergrund an. Nun gibt es aber eine 7.6 kompatible Version von Background Image <https://typo3.org/extensions/repository/view/backgroundimage>, die ich integriere möchte, um jeweils die Parameter des Hintergundes steuern zu können. Doch Einbindung gelingt mir an der Stelle nicht, an welcher die IMG_RESOURCE und TEXT Elemente aus der Tabelle der jeweiligen Seite geholt werden sollten.

Das Onepager TS:

lib.sectionContent = HMENU
lib.sectionContent {
	special = rootline
	special.range = 1|-1
	1 = TMENU
	1 {
		NO = 1
		NO {
			doNotLinkIt = 1
			stdWrap {
				cObject = COA
				cObject {
					10 = COA
					10 {
						5 = TEXT
						5.noTrimWrap = |<section ||

						10 < temp.titleSectionId
						10.wrap = id="|"

						# Hier wird der Hintergrund eingebunden
						20 = FILES
						20 {
							references {
								table = pages
								uid.field = uid
								fieldName = media
							}
							maxItems = 1
							renderObj = IMG_RESOURCE
							renderObj {
								file.import.data = file:current:uid
								file.treatIdAsReference = 1
								stdWrap.wrap = style="background-image: url('|')"
							}
						}

						30 < lib.layoutswitch

						40 = TEXT
						40.value = >

					}


					15 = TEXT
					15 {
						wrap = <h1 class="sectiontitle">|</h1>
						field = title
					}

					20 = CONTENT
					20 {
						wrap = <div class="container">|</div>
						table = tt_content
						select {
							pidInList.field = uid
							# damit es mit gridelements funktioniert:
							andWhere.dataWrap = tx_gridelements_container=0
							orderBy = sorting
						}
						renderObj =< tt_content
					}

					30 = TEXT
					30 {
						wrap = </section>
					}
				}
			}
		}
		CUR = 1
		CUR < .NO
	}
	2 < .1
}



Das TS der Extension sieht wie folgt aus:

page.cssInline.440 = COA
page.cssInline.440 {
    if.isTrue.data = levelfield:-1, tx_backgroundimage_active
    stdWrap {
        required = 1
        wrap = {$plugin.backgroundimage.target}{|}
    }
    10 = IMG_RESOURCE
    10 {
        stdWrap {
            required = 1
            wrap = background-image:url(/|);
        }
        file {
            import {
                data = levelfield:-1, tx_backgroundimage_image
                listNum = 0
            }
            treatIdAsReference = 1
        }
    }
    20 = TEXT
    20 {
        required = 1
        wrap = background-repeat:|;
        data = levelfield:-1, tx_backgroundimage_repeat
    }
    30 = TEXT
    30 {
        required = 1
        wrap = background-color:|;
        data = levelfield:-1, tx_backgroundimage_color
    }
    40 = TEXT
    40 {
        required = 1
        wrap = background-position:|;
        data = levelfield:-1, tx_backgroundimage_position
    }
    50 = TEXT
    50 {
        required = 1
        wrap = background-size:|;
        data = levelfield:-1, tx_backgroundimage_size
    }
    60 = TEXT
    60 {
        required = 1
        wrap = background-attachment:|;
        data = levelfield:-1, tx_backgroundimage_attachment
    }
}

[globalVar = LIT:1 = {$plugin.backgroundimage.slide}]
page.cssInline.440 {
    if.isTrue.data = levelfield:-1, tx_backgroundimage_active, slide
    10.file.import.data = levelfield:-1, tx_backgroundimage_image, slide
    20.data = levelfield:-1, tx_backgroundimage_repeat, slide
    30.data = levelfield:-1, tx_backgroundimage_color, slide
    40.data = levelfield:-1, tx_backgroundimage_position, slide
    50.data = levelfield:-1, tx_backgroundimage_size, slide
    60.data = levelfield:-1, tx_backgroundimage_attachment, slide
}
[end]

Ich würde mich freuen, wenn ihr mir helfen würdet.

Da ich kein Experte bin, schreibe ich hier lieber nicht, was ich schon erfolglos ausprobiert hatte.

Vielen Dank!

Beste Grüße, André