Commit 6815c07c authored by Boris Schauer's avatar Boris Schauer
Browse files

[TASK] Improve width of cols and media size

parent 1e106664
<div class="container">
<h2 class="">{feature.header}</h2>
<div class="row">
<div class="col-md-8">
<h2 class="">{feature.header}</h2>
<div class="col-md-6">
<f:if condition="{feature.typo3releaseminorversion.version}">
<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>
<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>
</f:if>
<f:format.html>{feature.description}</f:format.html>
<f:if condition="{feature.link}">
<p><f:link.typolink parameter="{feature.link}" class="btn btn-primary mr-3" target="_blank">Documentation</f:link.typolink></p>
<p>
<f:link.typolink parameter="{feature.link}" class="btn btn-primary mr-3" target="_blank">Documentation</f:link.typolink>
</p>
</f:if>
</div>
<div class="col-md-4 mb-4 mb-md-0">
<div class="col-md-6 mb-4 mb-md-0">
<f:for each="{feature.images}" as="media" iteration="i">
<div class="media-item">
<f:switch expression="{media.originalResource.type}">
<f:case value="3">
<f:media class="audio-embed-item" file="{media}" width="{dimensions.width}" height="{dimensions.height}" alt="{media.alternative}" title="{media.title}" />
<f:media class="audio-embed-item mb-2" file="{media}" width="{dimensions.width}" height="{dimensions.height}" alt="{media.alternative}" title="{media.title}" />
</f:case>
<f:case value="4">
<div class="embed-responsive embed-responsive-16by9">
<f:media class="embed-responsive-item" file="{media}" alt="{media.alternative}" title="{media.title}" />
<div class="embed-responsive embed-responsive-16by9 mb-2">
<f:media class="embed-responsive-item" file="{media}" alt="{media.alternative}" title="{media.title}" />
</div>
</f:case>
<f:defaultCase>
<f:variable name="breakpoints" value="{
0:{media:'max-width', size:375, maxWidth:375, cropVariant:'mobile'},
1:{media:'max-width', size:480, maxWidth:480, cropVariant:'mobile'},
2:{media:'max-width', size:767, maxWidth:510, cropVariant:'tablet'},
3:{media:'max-width', size:991, maxWidth:300, cropVariant:'tablet'},
4:{media:'max-width', size:1199, maxWidth:360, cropVariant:'default'},
5:{media:'min-width', size:1200, maxWidth:360, cropVariant:'default'}
}" />
<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'}
}" />
<f:render partial="ContentElements/Media/Rendering/PictureSrcsetCols" section="ImageRender" arguments="{file: media, breakpoints: breakpoints}" />
<f:render partial="ContentElements/Media/Rendering/PictureSrcsetCols" section="ImageRender" arguments="{file: media, breakpoints: breakpoints}" />
</div>
</f:defaultCase>
</f:switch>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment