Skip to content

GitLab

Commit 5db40076 authored by Sebastian Kotte's avatar Sebastian Kotte
Browse files

[Task] add videos to roadmap feature - responsive css

parent d80bc44c
Hide whitespace changes
Inline Side-by-side
Showing with 33 additions and 29 deletions
Resources/Private/Partials/Feature/ShowFeature.html
View file @ 5db40076
......@@ -10,30 +10,32 @@
<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">
<f:for each="{feature.images}" as="media">
<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:case>
<f:case value="4">
<f:media class="video-embed-item" file="{media}" width="{dimensions.width}" height="{dimensions.height}" alt="{media.alternative}" title="{media.title}" />
</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'}
}" />
<f:render partial="ContentElements/Media/Rendering/PictureSrcsetCols" section="ImageRender" arguments="{file: media, breakpoints: breakpoints}" />
</f:defaultCase>
</f:switch>
<div class="col-md-4 mb-4 mb-md-0">
<f:for each="{feature.images}" as="media" iteration="i">
<div class="media-item mb-1">
<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: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>
</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'}
}" />
<f:render partial="ContentElements/Media/Rendering/PictureSrcsetCols" section="ImageRender" arguments="{file: media, breakpoints: breakpoints}" />
</f:defaultCase>
</f:switch>
</div>
</f:for>
</div>
</div>
......
Resources/Private/Partials/Feature/ShowFeatureArea.html
View file @ 5db40076
<div class="container">
<div class="row">
<div class="col-8">
<div class="{f:if(condition:'{featureArea.images}', then: 'col-md-8', else: 'col-12')}">
<h1 class="">{featureArea.title}</h1>
<f:format.html>{featureArea.description}</f:format.html>
<f:if condition="{settings.featurearea}==''">
<p><f:link.typolink parameter="{featureArea.page}" class="btn btn-primary mr-3">Features</f:link.typolink></p>
</f:if>
</div>
<div class="col-4">
<f:for each="{featureArea.images}" as="image">
<f:image image="{image}" width="400"/>
</f:for>
</div>
<f:if condition="{featureArea.images}">
<div class="col-md-4">
<f:for each="{featureArea.images}" as="image">
<f:image class="img-fluid mb-4" image="{image}" width="600"/>
</f:for>
</div>
</f:if>
</div>
</div>
\ No newline at end of file
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