Responsive Images mit TYPO3 7.6 und Fluid Styled Content (FSC) unter Berücksichtigung mehrspaltiger Layouts

ImagesInside100PercentCol.html

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<f:if condition="{verticalPosition} == 'intext'">
	<f:then>
		<f:if condition="{columnCount} == '1'">
			<f:then>
				<f:comment>1 col</f:comment>
				<v:media.image 
					src="{column.media}" 
					width="400" 
					alt="{column.media.alternative}" 
					title="{column.media.title}" 
					class="u-image-full-width" 
					srcset="200,400,600" 
					treatIdAsReference="1" 
					additionalAttributes="{sizes: '
						(min-width: 90em) 460px, 
						(min-width: 64em) calc((100vw - 7.2em) *.35), 
						(min-width: 30em) calc((100vw - 4.8em) *.35), 
						calc(100vw - 2.4em)'}" />
			</f:then>
			<f:else>
				<f:comment>2 cols</f:comment>
				<v:media.image 
					src="{column.media}" 
					width="150" 
					alt="{column.media.alternative}" 
					title="{column.media.title}" 
					class="u-image-full-width" 
					srcset="100,150,200,300" 
					treatIdAsReference="1" 
					additionalAttributes="{sizes: '
						(min-width: 90em) 225px, 
						(min-width: 64em) calc((((100vw - 7.2em) *.35) - .6em) *.5), 
						(min-width: 30em) calc((((100vw - 4.8em) *.35) - .6em) *.5), 
						calc((100vw - 3em) *.50)'}" />
			</f:else>
		</f:if>
	</f:then>
	<f:else>
		<f:if condition="{columnCount} == '1'">
			<f:then>
				<f:comment>1 col</f:comment>
				<v:media.image 
					src="{column.media}" 
					width="600" 
					alt="{column.media.alternative}" 
					title="{column.media.title}" 
					class="u-image-full-width" 
					srcset="200,400,600,900,1200,1500,2000" 
					treatIdAsReference="1" 
					additionalAttributes="{sizes: '
						(min-width: 90em) 1310px, 
						(min-width: 64em) calc(100vw - 7.2em), 
						(min-width: 30em) calc(100vw - 4.8em), 
						calc(100vw - 2.4em)'}" />
			</f:then>
			<f:else>
				<f:if condition="{columnCount} == '5'">
					<f:then>
						<f:comment>5 cols</f:comment>
						<v:media.image 
							src="{column.media}" 
							width="300" 
							alt="{column.media.alternative}" 
							title="{column.media.title}" 
							class="u-image-full-width" 
							srcset="200,300,400,600" 
							treatIdAsReference="1" 
							additionalAttributes="{sizes: '
								(min-width: 90em) 255px, 
								(min-width: 64em) calc(100vw - 9.6em *.20), 
								(min-width: 48em) calc((100vw - 6.6em) *.25), 
								(min-width: 30em) calc((100vw - 6em) *.333333), 
								calc((100vw - 3em) *.50)'}" />
					</f:then>
					<f:else>
						<f:comment>2 cols</f:comment>
						<v:media.image 
							src="{column.media}" 
							width="400" 
							alt="{column.media.alternative}" 
							title="{column.media.title}" 
							class="u-image-full-width" 
							srcset="200,400,600,900,1200" 
							treatIdAsReference="1" 
							additionalAttributes="{sizes: '
								(min-width: 90em) 650px, 
								(min-width: 64em) calc(100vw - 7.8em *.50), 
								(min-width: 30em) calc((100vw - 5.4em) *.50), 
								calc((100vw - 3em) *.50)'}" />
					</f:else>
				</f:if>
			</f:else>
		</f:if>		
	</f:else>
</f:if>

ImagesInside25PercentCol.html

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<f:if condition="{verticalPosition} == 'intext'">
	<f:then>
		<f:comment>1 col</f:comment>
		<v:media.image 
			src="{column.media}" 
			width="200" 
			alt="{column.media.alternative}" 
			title="{column.media.title}" 
			class="u-image-full-width" 
			srcset="100,200,300,400" 
			treatIdAsReference="1" 
			additionalAttributes="{sizes: '
				(min-width: 90em) 105px, 
				(min-width: 80em) calc((((100vw - 4.8em) *.25) - 2.4em) *.35), 
				(min-width: 64em) calc((((100vw - 2.4em) *.333333) - 4.8em) *.35), 
				(min-width: 30em) calc((100vw - 4.8em) *.35), 
				calc(100vw - 2.4em)'}" />
	</f:then>
	<f:else>
		<f:if condition="{columnCount} == '1'">
			<f:then>
				<f:comment>1 col</f:comment>
				<v:media.image 
					src="{column.media}" 
					width="600" 
					alt="{column.media.alternative}" 
					title="{column.media.title}" 
					class="u-image-full-width" 
					srcset="200,400,600,900,1200,1500,2000" 
					treatIdAsReference="1" 
					additionalAttributes="{sizes: '
						(min-width: 90em) 300px, 
						(min-width: 80em) calc(((100vw - 4.8em) *.25) - 2.4em), 
						(min-width: 64em) calc(((100vw - 2.4em) *.333333) - 4.8em), 
						(min-width: 30em) calc(100vw - 4.8em), 
						calc(100vw - 2.4em)'}" />
			</f:then>
			<f:else>
				<f:comment>2 cols</f:comment>
				<v:media.image 
					src="{column.media}" 
					width="400" 
					alt="{column.media.alternative}" 
					title="{column.media.title}" 
					class="u-image-full-width" 
					srcset="200,400,600,900" 
					treatIdAsReference="1" 
					additionalAttributes="{sizes: '
						(min-width: 90em) 145px, 
						(min-width: 80em) calc((((100vw - 4.8em) *.25) - 3em) *.50), 
						(min-width: 64em) calc((((100vw - 2.4em) *.333333) - 5.4em) *.50), 
						(min-width: 30em) calc((100vw - 5.4em) *.50), 
						calc((100vw - 3em) *.50)'}" />
			</f:else>
		</f:if>
	</f:else>
</f:if>

ImagesInside50PercentCol.html

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<f:if condition="{parentGridColumn} == '1'">
	<!-- 50% Wide Parent Container nested in 75% Container -->
	<f:then>
		<v:media.image 
			src="{column.media}" 
			width="400" 
			alt="{column.media.alternative}" 
			title="{column.media.title}" 
			class="u-image-full-width" 
			srcset="200,400,600,900" 
			treatIdAsReference="1" 
			additionalAttributes="{sizes: '
				(min-width: 90em) 390px, 
				(min-width: 80em) calc((((100vw - 4.8em) *.6666667) - 7.2em) *.50), 
				(min-width: 64em) calc((((100vw - 2.4em) *.6666667) - 9.6em) *.50), 
				(min-width: 48em) calc(((100vw - 2.4em) *.50) - 2.4em), 
				(min-width: 30em) calc(100vw - 4.8em), 
				calc(100vw - 2.4em)'}" />
	</f:then>
	<f:else>
		<f:if condition="{verticalPosition} == 'intext'">
			<f:then>
				<f:comment>1 col</f:comment>
				<v:media.image 
					src="{column.media}" 
					width="400" 
					alt="{column.media.alternative}" 
					title="{column.media.title}" 
					class="u-image-full-width" 
					srcset="200,400,600,900" 
					treatIdAsReference="1" 
					additionalAttributes="{sizes: '
						(min-width: 90em) 215px, 
						(min-width: 64em) calc((((100vw - 2.4em) *.50) - 4.8em) *.35), 
						(min-width: 48em) calc((((100vw - 2.4em) *.50) - 2.4em) *.35), 
						(min-width: 30em) calc((100vw - 4.8em) *.35), 
						calc(100vw - 2.4em)'}" />
			</f:then>
			<f:else>
				<f:if condition="{columnCount} == '1'">
					<f:then>
						<f:comment>1 col</f:comment>
						<v:media.image 
							src="{column.media}" 
							width="600" 
							alt="{column.media.alternative}" 
							title="{column.media.title}" 
							class="u-image-full-width" 
							srcset="200,400,600,900,1200,1500" 
							treatIdAsReference="1" 
							additionalAttributes="{sizes: '
								(min-width: 90em) 615px, 
								(min-width: 64em) calc(((100vw - 2.4em) *.50) - 4.8em), 
								(min-width: 48em) calc(((100vw - 2.4em) *.50) - 2.4em), 
								(min-width: 30em) calc(100vw - 4.8em), 
								calc(100vw - 2.4em)'}" />
					</f:then>
					<f:else>
						<f:comment>2 cols</f:comment>
						<v:media.image 
							src="{column.media}" 
							width="400" 
							alt="{column.media.alternative}" 
							title="{column.media.title}" 
							class="u-image-full-width" 
							srcset="200,400,600,900" 
							treatIdAsReference="1" 
							additionalAttributes="{sizes: '
								(min-width: 90em) 305px, 
								(min-width: 64em) calc((((100vw - 2.4em) *.50) - 5.4em) *.50), 
								(min-width: 48em) calc((((100vw - 2.4em) *.50) - 3em) *.50), 
								(min-width: 30em) calc((100vw - 5.4em) *.50), 
								calc((100vw - 3em) *.50)'}" />
					</f:else>
				</f:if>
			</f:else>
		</f:if>
	</f:else>
</f:if>

ImagesInside75PercentCol.html

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<f:if condition="{verticalPosition} == 'intext'">
	<f:then>
		<f:if condition="{columnCount} == '1'">
			<f:then>
				<f:comment>1 col</f:comment>
				<v:media.image 
					src="{column.media}" 
					width="350" 
					alt="{column.media.alternative}" 
					title="{column.media.title}" 
					class="u-image-full-width" 
					srcset="200,350,450,600" 
					treatIdAsReference="1" 
					additionalAttributes="{sizes: '
						(min-width: 90em) 305px, 
						(min-width: 80em) calc((((100vw - 4.8em) *.6666667) - 2.4em) *.35), 
						(min-width: 64em) calc((((100vw - 2.4em) *.6666667) - 4.8em) *.35), 
						(min-width: 30em) calc((100vw - 4.8em) *.35), 
						calc(100vw - 2.4em)'}" />
			</f:then>
			<f:else>
				<f:comment>2 cols</f:comment>
				<v:media.image 
					src="{column.media}" 
					width="200" 
					alt="{column.media.alternative}" 
					title="{column.media.title}" 
					class="u-image-full-width" 
					srcset="100,200,300,400" 
					treatIdAsReference="1" 
					additionalAttributes="{sizes: '
						(min-width: 90em) 305px, 
						(min-width: 80em) calc((((((100vw - 4.8em) *.6666667) - 2.4em) *.35) - .6em) *.50), 
						(min-width: 64em) calc((((((100vw - 2.4em) *.6666667) - 4.8em) *.35) - .6em) *.50), 
						(min-width: 30em) calc((((100vw - 4.8em) *.35) - .6em) *.50), 
						calc((100vw - 3em) *.50)'}" />
			</f:else>
		</f:if>
	</f:then>
	<f:else>
		<f:if condition="{columnCount} == '1'">
			<f:then>
				<f:comment>1 col</f:comment>
				<v:media.image 
					src="{column.media}" 
					width="600" 
					alt="{column.media.alternative}" 
					title="{column.media.title}" 
					class="u-image-full-width" 
					srcset="200,400,600,900,1200,1500" 
					treatIdAsReference="1" 
					additionalAttributes="{sizes: '
						(min-width: 90em) 860px, 
						(min-width: 80em) calc(((100vw - 4.8em) *.6666667) - 2.4em), 
						(min-width: 64em) calc(((100vw - 2.4em) *.6666667) - 4.8em), 
						(min-width: 30em) calc(100vw - 4.8em), 
						calc(100vw - 2.4em)'}" />
			</f:then>
			<f:else>
				<f:if condition="{columnCount} == '5'">
					<f:then>
						<f:comment>5 cols</f:comment>
						<v:media.image 
							src="{column.media}" 
							width="200" 
							alt="{column.media.alternative}" 
							title="{column.media.title}" 
							class="u-image-full-width" 
							srcset="200,400,600" 
							treatIdAsReference="1" 
							additionalAttributes="{sizes: '
								(min-width: 90em) 165px, 
								(min-width: 80em) calc((((100vw - 4.8em) *.6666667) - 4.8em) *.20), 
								(min-width: 64em) calc((((100vw - 2.4em) *.6666667) - 7.2em) *.20), 
								(min-width: 48em) calc((100vw - 6.6em) *.25), 
								(min-width: 30em) calc((100vw - 6em) *.333333), 
								calc((100vw - 3em) *.50)'}" />
					</f:then>
					<f:else>
						<f:comment>2 cols</f:comment>
						<v:media.image 
							src="{column.media}" 
							width="500" 
							alt="{column.media.alternative}" 
							title="{column.media.title}" 
							class="u-image-full-width" 
							srcset="200,400,500,600,900,1200" 
							treatIdAsReference="1" 
							additionalAttributes="{sizes: '
								(min-width: 90em) 425px, 
								(min-width: 80em) calc((((100vw - 4.8em) *.6666667) - 3em) *.50), 
								(min-width: 64em) calc((((100vw - 2.4em) *.6666667) - 5.4em) *.50), 
								(min-width: 30em) calc((100vw - 5.4em) *.50), 
								calc((100vw - 3em) *.50)'}" />
					</f:else>
				</f:if>
			</f:else>
		</f:if>
	</f:else>
</f:if>

MediaGallery.html

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{gallery.rows}">
	<div class="o-textpic__gallery{f:if(condition: data.imageborder, then: ' o-textpic__gallery--border')}" data-ce-columns="{gallery.count.columns}" data-ce-images="{gallery.count.files}" data-photoswipe-group>
		<f:if condition="{gallery.position.horizontal} == 'center'">
			<div class="o-textpic__outer">
				<div class="o-textpic__inner">
		</f:if>
		<f:if condition="{gallery.count.columns} > '1'">
			<div class="o-textpic__row grid" data-grid="narrow left">
		</f:if>
		<f:for each="{gallery.rows}" as="row">
			<f:if condition="{gallery.count.columns} == '1'">
				<div class="o-textpic__row">
			</f:if>
				<f:for each="{row.columns}" as="column">
					<f:if condition="{column.media}">
						
						<f:switch expression="{gallery.count.columns}">
							<f:case value="1">
								<div class="o-textpic__column">
							</f:case>
							<f:case value="2">
								<div class="o-textpic__column grid__item" data-grid="6/12">
							</f:case>
							<f:case value="5">
								<div class="o-textpic__column grid__item" data-grid="6/12" data-grid--small="4/12" data-grid--medium="3/12" data-grid--large="1/5">
							</f:case>
							<f:case default="TRUE">
								<div class="o-textpic__column grid__item" data-grid="6/12" data-grid--small="4/12" data-grid--medium="3/12" data-grid--large="1/5">
							</f:case>
						</f:switch>

							<f:if condition="{column.media.description}">
								<f:then>
									<figure class="o-textpic__media">
								</f:then>
								<f:else>
									<div class="o-textpic__media">
								</f:else>
							</f:if>

							<f:switch expression="{column.media.type}">
								<f:case value="3">
									<f:render section="audioType" arguments="{_all}" />
								</f:case>
								<f:case value="4">
									<div class="o-textpic__video-wrap">
										<f:render section="videoType" arguments="{_all}" />
									</div>
								</f:case>
								<f:case default="TRUE">
									<f:render section="imageType" arguments="{_all}" />
								</f:case>
							</f:switch>

							<f:if condition="{column.media.description}">
								<f:then>
										<figcaption class="o-textpic__figcaption">
											{column.media.description}
										</figcaption>
									</figure>
								</f:then>
								<f:else>
									</div>
								</f:else>
							</f:if>
						</div>
					</f:if>
				</f:for>
			<f:if condition="{gallery.count.columns} == '1'">
				</div>
			</f:if>
		</f:for>
		<f:if condition="{gallery.count.columns} > '1'">
			</div>
		</f:if>
		<f:if condition="{gallery.position.horizontal} == 'center'">
				</div>
			</div>
		</f:if>
	</div>
</f:if>

<f:section name="imageType">
	<f:if condition="{column.media.link}">
		<f:then>
			<f:link.typolink parameter="{column.media.link}" class="<v:condition.string.contains haystack='{column.media.link}' needle='file:'>image-link image-link--file</v:condition.string.contains>">
				<f:render section="media" arguments="{column: column, isImage: 1, columnCount: gallery.count.columns, verticalPosition: gallery.position.vertical, gridColumn: data.tx_gridelements_columns, parentGridColumn: data.parentgrid_tx_gridelements_columns }" />
			</f:link.typolink>
		</f:then>
		<f:else>
			<f:if condition="{data.image_zoom}">
				<f:then>
					<ce:link.clickEnlarge image="{column.media}" configuration="{settings.media.popup}">
						<f:render section="media" arguments="{column: column, isImage: 1, columnCount: gallery.count.columns, verticalPosition: gallery.position.vertical, gridColumn: data.tx_gridelements_columns, parentGridColumn: data.parentgrid_tx_gridelements_columns }" />
					</ce:link.clickEnlarge>
				</f:then>
				<f:else>
					<f:render section="media" arguments="{column: column, isImage: 1, columnCount: gallery.count.columns, verticalPosition: gallery.position.vertical, gridColumn: data.tx_gridelements_columns, parentGridColumn: data.parentgrid_tx_gridelements_columns }" />
				</f:else>
			</f:if>
		</f:else>
	</f:if>
</f:section>

<f:section name="audioType">
	<f:render section="media" arguments="{_all}" />
</f:section>

<f:section name="videoType">
	<f:render section="media" arguments="{_all}" />
</f:section>

<f:section name="media">
	<f:if condition="{isImage}">
		<f:then>
			<f:switch expression="{gridColumn}">

				<!-- 100% Wide Parent Container -->
				<f:case value="0">
					<f:render partial="ResponsiveImages/ImagesInside100PercentCol" arguments="{_all}" />
				</f:case>

				<!-- 75% Wide Parent Container -->
				<f:case value="1">
					<f:render partial="ResponsiveImages/ImagesInside75PercentCol" arguments="{_all}" />
				</f:case>

				<!-- 25% Wide Parent Container -->
				<f:case value="2">
					<f:render partial="ResponsiveImages/ImagesInside25PercentCol" arguments="{_all}" />
				</f:case>

				<!-- 50% Wide Parent Container -->
				<f:case value="3">
					<f:render partial="ResponsiveImages/ImagesInside50PercentCol" arguments="{_all}" />
				</f:case>

				<!-- 50% Wide Parent Container -->
				<f:case value="4">
					<f:render partial="ResponsiveImages/ImagesInside50PercentCol" arguments="{_all}" />
				</f:case>

				<!-- Accordion Container -->
				<f:case value="5">

					<!-- Check Parent Grid Columns -->
					<f:switch expression="{parentGridColumn}">

						<!-- 100% Wide Parent Container -->
						<f:case value="0">
							<f:render partial="ResponsiveImages/ImagesInside100PercentCol" arguments="{_all}" />
						</f:case>

						<!-- 75% Wide Parent Container -->
						<f:case value="1">
							<f:render partial="ResponsiveImages/ImagesInside75PercentCol" arguments="{_all}" />
						</f:case>

						<!-- 25% Wide Parent Container -->
						<f:case value="2">
							<f:render partial="ResponsiveImages/ImagesInside25PercentCol" arguments="{_all}" />
						</f:case>

						<!-- 50% Wide Parent Container -->
						<f:case value="3">
							<f:render partial="ResponsiveImages/ImagesInside50PercentCol" arguments="{_all}" />
						</f:case>

						<!-- 50% Wide Parent Container -->
						<f:case value="4">
							<f:render partial="ResponsiveImages/ImagesInside50PercentCol" arguments="{_all}" />
						</f:case>

						<f:case default="TRUE">
							<f:render partial="ResponsiveImages/ImagesInside100PercentCol" arguments="{_all}" />
						</f:case>
					</f:switch>
				</f:case>

				<f:case default="TRUE">
					<f:render partial="ResponsiveImages/ImagesInside100PercentCol" arguments="{_all}" />
				</f:case>
			</f:switch>
		</f:then>
		<f:else>
			<f:media
				file="{column.media}"
				width="{column.dimensions.width}"
				height="{column.dimensions.height}"
				alt="{column.media.alternative}"
				title="{column.media.title}"
			/>
		</f:else>
	</f:if>
</f:section>
</html>

By the way: The grid used in MediaGallery.html is based on the nice grid system Gridilydidily.

Hello,

thanks for the nice description. However, I have a problem once I add the additionalAttributes, no pictures are rendered anymore. Using T3 8.6 and vhs 4.1.0. Code of my partial can be found here https://pastebin.com/8Gj7SmxZ . Without additionalAttributes the picture appears. I have no clue, no errormessages etc. Any Idea?