ShowFeature.html 2.87 KB
Newer Older
Christian Knauf's avatar
Christian Knauf committed
1
<div class="container">
2
    <h2 class="">{feature.header}</h2>
Christian Knauf's avatar
Christian Knauf committed
3
    <div class="row">
4
        <div class="col-md-6">
5
            <f:if condition="{feature.typo3releaseminorversion.version}">
6
7
8
9
10
                <p class="alert alert-info text-center">Introduced in version {feature.typo3releaseminorversion.version}
                    <f:if condition="{settings.showFeatureArea}">
                        <f:link.typolink parameter="{feature.featureArea.page}">Feature Area</f:link.typolink>
                    </f:if>
                </p>
11
            </f:if>
Christian Knauf's avatar
Christian Knauf committed
12
            <f:format.html>{feature.description}</f:format.html>
13
            <f:if condition="{feature.link}">
14
15
16
                <p>
                    <f:link.typolink parameter="{feature.link}" class="btn btn-primary mr-3" target="_blank">Documentation</f:link.typolink>
                </p>
17
            </f:if>
Christian Knauf's avatar
Christian Knauf committed
18
        </div>
19
        <div class="col-md-6 mb-4 mb-md-0">
20
            <f:for each="{feature.images}" as="media" iteration="i">
21
                <div class="media-item">
22
23
                    <f:switch expression="{media.originalResource.type}">
                        <f:case value="3">
24
                            <f:media class="audio-embed-item mb-2" file="{media}" width="{dimensions.width}" height="{dimensions.height}" alt="{media.alternative}" title="{media.title}" />
25
26
                        </f:case>
                        <f:case value="4">
27
28
                            <div class="embed-responsive embed-responsive-16by9 mb-2">
                                <f:media class="embed-responsive-item" file="{media}" alt="{media.alternative}" title="{media.title}" />
29
30
31
                            </div>
                        </f:case>
                        <f:defaultCase>
32
33
34
35
36
37
38
39
40
                            <div class="mb-2">
                                <f:variable name="breakpoints" value="{
                                        0:{media:'max-width', size:375, maxWidth:375, cropVariant:'mobile'},
                                        1:{media:'max-width', size:480, maxWidth:510, cropVariant:'mobile'},
                                        2:{media:'max-width', size:767, maxWidth:209, cropVariant:'tablet'},
                                        3:{media:'max-width', size:991, maxWidth:239, cropVariant:'tablet'},
                                        4:{media:'max-width', size:1199, maxWidth:450, cropVariant:'default'},
                                        5:{media:'min-width', size:1200, maxWidth:570, cropVariant:'default'}
                                    }" />
Harry Glatz's avatar
Harry Glatz committed
41

42
43
                                <f:render partial="ContentElements/Media/Rendering/PictureSrcsetCols" section="ImageRender" arguments="{file: media, breakpoints: breakpoints}" />
                            </div>
44
45
46
                        </f:defaultCase>
                    </f:switch>
                </div>
Christian Knauf's avatar
Christian Knauf committed
47
48
49
            </f:for>
        </div>
    </div>
50
</div>