DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
Examples¶
This is a collection of examples provided by github issues. Thanks for contributing and sharing.
Responsive Header IMG with pure CSS¶
Contributed by Martin Zarth (www.zarthwork.de). The header files are integrated inwards the page relations in three different sizes. Additional CSS for the image container has been set to:
.bgimg {
width: 100%;
height: 600px;
display: block;
}
The Integration is done by TS inlineCSS like so:
page.cssInline {
// needed to let dataWrap
// recognize curly brackets
1 = LOAD_REGISTER
1.curl1 = {
1.curl2 = }
// <source>
10 = FILES
10 {
// get the reference from pages > media
references {
table = pages
uid.data = page:uid
fieldName = media
}
renderObj = IMG_RESOURCE
renderObj {
// import file
file.import.data = file:current:uid
file.treatIdAsReference = 1
stdWrap.dataWrap.cObject = CASE
stdWrap.dataWrap.cObject {
// get files by sorting num
key.data = register:FILE_NUM_CURRENT
// sm
0 = TEXT
0.value = background-image: url(|);
0.postCObject = TEXT
0.postCObject.value = background-position: left {fp:xp_positive}% top {fp:yp_positive}%;
0.postCObject.if.isTrue.data = fp:xp
0.wrap = .bgimg {register:curl1} | {register:curl2}
// md
1 < .0
1.outerWrap = @media only screen and (min-width: 600px) {register:curl1} | {register:curl2}
// lg
2 < .0
2.outerWrap = @media only screen and (min-width:1024px) {register:curl1} | {register:curl2}
}
stdWrap.wrap = /|
}
begin = 0
maxItems = 3
stdWrap.outerWrap (
/* background-image with focus point*/
|
/* */
)
}
}