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

    }

}