CODEWITHSUNDEEP
typo3typo3-8.xtypo3-8.7.x
Philipp M
Philipp M

Reputation: 3488

TYPO3 - Render crop options for responsive images in TYPO3 8.7 with fluid

I override cropVariants for Image Manipulation like this:

https://docs.typo3.org/typo3cms/extensions/core/8.7/Changelog/8.7/Feature-79812-AllowOverridingCropVariantsForImageManipulation.html

But how can I render the FIRST image depending on specific cropVariant in fluid? Let say for 'mobile' for @media (max-width: 575px){} ...?

Debug in the template shows for the first 'Create new relation' media file (jpg image) the following for crop: 

<f:debug>{data}</f:debug>

array(85 items)
...
   media => array(1 item)
      0 => TYPO3\CMS\Core\Resource\FileReferenceprototypeobject
         propertiesOfFileReference => protectedarray(35 items)
            ...
            crop => '{"desktop":{"cropArea":{"x":0.011,"y":0,"width":0.924,"height":0.99047619047
               619},"selectedRatio":"NaN","focusArea":null},"mobile":{"cropArea":{"x":0.094,"y":1.917337540
               94e-15,"width":0.786,"height":0.99809523809524},"selectedRatio":"3:2","focus
               Area":null}}' (392 chars)
...

Upvotes: 1

Views: 760

Answers (1)

Markus D&#252;bbert
Markus D&#252;bbert

Reputation: 213

<f:image
    src="{image.0.uid}"
    treatIdAsReference="1"
    width="1140"
    height="375"
    cropVariant="desktop"
/>

Upvotes: 1

Related Questions