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

    }

}