width="{dimensions.width}" or height="{dimensions.height}" are emtpy.

[felixvosswork]

Hello,

i tried too get the width and height by dimensions. but it doesnt return anything.

<f:if condition="{data_item.tx_mask_teaser_img}">
  <f:for each="{data_item.tx_mask_teaser_img}" as="file">
    <figure>
      <img
        data-src="{f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1168)}"
        data-srcset="{f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 768)} 768w,
        {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 990)} 990w,
        {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1200)} 1200w,
        {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1440)} 1440w,
        {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1900)} 1900w"
        width="{dimensions.width}"
        height="{dimensions.height}"
        title="{file.title}" 
        class="image-embed-item lazy-loading"
      >
    </figure>
  </f:for>
</f:if>

[nhovratov]

If you use image: file you don't specify treatIdAsReference: 1, because image is not an uid, but a reference. You can get the original image width and height from file.properties.width and file.properties.height.

[felixvosswork]

Thank you for the fast reply. How can i get the cropped image width and height?

[nhovratov]

This is not so easy, because normally it is added automatically with f:image, but if you use f:uri.image you only get the path to the already processed file. You would need to work around that with a ViewHelper and using the ResourceFactory to retrieve the processed file and get it's width/height. Or you set a fixed witdth (instead of maxWidth). Then you know at least the width.

[nhovratov]

I would close this, as this is a general support question and not strictly related to any Mask issue. If you need help, I would recommend you to ask in the TYPO3 slack channel "#random" or "#typo3-cms". There are hundreds of people, who can help you, instead of here mainly me.