Responsive Image Rendering

Community Newcomer's Corner
1

Hey,

I want to render my images with the figure, picture and source tag. Finally I got this…

ImageElement.ts:

prototype(MO.MyOnepage:ImageElement) < prototype(TYPO3.Neos:Content) { 

image = ${q(node).property('image')}
columnLayout = ${q(node).parent().property('columnLayout')}
}

ImagElement.html:

{namespace neos=TYPO3\Neos\ViewHelpers}
<f:if condition="{image}">
<figure">
	<picture class="{columnLayout}">
        <source srcset="{typo3.media:uri.image(asset: node.properties.image, width: 1600)}" media="(min-width: 1600px)">
        <source srcset="{typo3.media:uri.image(asset: node.properties.image, width: 980)}" media="(min-width: 980px) and (max-width: 1600px)">
		<source srcset="{typo3.media:uri.image(asset: node.properties.image, width: 785)}" media="(min-width: 785px) and (max-width: 980px)">
        <source srcset="{typo3.media:uri.image(asset: node.properties.image, width: 480)}" media="(min-width: 480px) and (max-width: 785px)">
        <source srcset="{typo3.media:uri.image(asset: node.properties.image, width: 300)}" media="(max-width: 480px)">
        <img src="{typo3.media:uri.image(asset: node.properties.image, maximumWidth: 980)}" alt="">
	</picture>
	<figcaption class="CaptionOnImage"></figcaption>
</figure>
</f:if>

This just a test config. My Problem is I want to get the “columnLayout” Property from the Parent Node but this doesn’t working. Can someone help me?

And my second Problem is how do I get the “alt” and “title” from the Images?

Thanks for your Support
David

2

You want the columnLayout from your documentNode?

columnLayout = ${q(documentNode).property('columnLayout')}
3

No, i guess the property from a grid or something. The ${q(node).parent().property('columnLayout')}do work for me. Is ist possible, that you want to access a columnLayout for a GridNodetype or somehting? And your setup looks like this:

grid
-- column1
-- coumn2
-- -- ImageElement

In this case parent() would fetch the column node, wich might be a ContenCollection. But your property is set in grid. Pls try columnLayout = ${q(node).parent().parent()property('columnLayout')}

4

Hey,

thanks for your reply and sry for the late answer. I just used .parent() the solution was to use .parent().parent.

For Example: columnTyp = ${q(node).parent().parent().property('columnLayout')}

I think with just one .parent() I get the ContentCollection and with two .parent().parent() I get the properties of the Node. I’m not sure if this is wright but it is working :smiley:

1 Like