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*/
|
/* */
)
}
}