TYPO3 : How to create a header image that will be inherited by sub pages

Question

I have to set up a TypoScript-configuration for a header image with the following requirements:

The editor should be able to define a header image for a page using the "edit page-properties->resources->media" dialogue. If a page doesn`t have a header image, the parent pages should be scanned for header images and the first header image found on the way up to the page-tree root should be used.

Editors should also be able to add content elements to a certain "Page Header" section. This content elements can either be slider/menus or images. If a content element of the type "image" or "text with image" is added, only the image itself and no other additional code should be rendered. The content elements added to the page-header section should have priority. So if a page contains a content element in the page-header section and also has an image in the resources->media field, the image from the media-field of that page or any other page on a higher level in the page tree will be ignored and the content element/image from the page-header section will be rendered.

Fallback: if there is no content in the page-header section and also no images can be found in the media field of the page or other pages in it`s rootline, a default image which is defined via a TypoScript constant should be rendered to prevent that the header section will be left empty.

Sacha Vorbeck Sacha Vorbeck · Accepted Answer · 2016-09-11T12:53:30

This TypoScript uses override, slide and a nested COA object to render a header image in a way that meets the given requirements:

lib.fallBackHeaderImage = IMAGE
lib.fallBackHeaderImage {
    file {
        import.cObject = TEXT
        import.cObject.value = {$portal.context.headerImage.filename}
        maxW = 1124
        maxH = 342
    }
}

lib.headerImage = IMAGE
lib.headerImage {
    file {
        import {
            data = levelmedia:-1, slide
            listNum = 0
        }
        treatIdAsReference = 1
        maxW = 1124
        maxH = 342
    }
}

lib.headerContent < styles.content.getLeft
lib.headerContent {
    renderObj < tt_content
    renderObj {
        image >
        image = FILES
        image {
            references {
                table = tt_content
                fieldName = image
                uid.data = uid
            }
            renderObj = IMAGE
            renderObj {
                file {
                    import.data = file:current:originalUid // file:current:uid
                    maxW = 1124
                    maxH = 342
                }
            }
        }
        textpic >
        textpic < .image
    }
}

lib.pageHeader = COA
lib.pageHeader {
    // 10 reserved for prepend content
    20 = COA
    20 {
        10 = COA
        10 {
            10 < lib.fallBackHeaderImage
            stdWrap {
                override {
                    required = 1
                    cObject < lib.headerImage
                }
            }
        }
        stdWrap {
            override {
                required = 1
                cObject < lib.headerContent
            }
        }
    }
    // 30 reserved for appended content
}

TYPO3 : How to create a header image that will be inherited by sub pages

1 Answers