title: TYPO3 - Render crop options for responsive images in TYPO3 8.7 with fluid
body: <p>I override cropVariants for Image Manipulation like this:</p>
  
  <p><a href="https://docs.typo3.org/typo3cms/extensions/core/8.7/Changelog/8.7/Feature-79812-AllowOverridingCropVariantsForImageManipulation.html" rel="nofollow noreferrer">https://docs.typo3.org/typo3cms/extensions/core/8.7/Changelog/8.7/Feature-79812-AllowOverridingCropVariantsForImageManipulation.html</a></p>
  
  <p>But how can I render the FIRST image depending on specific cropVariant in fluid? Let say for 'mobile' for @media (max-width: 575px){} ...? </p>
  
  <p>Debug in the template shows for the first 'Create new relation' media file (jpg image) the following for crop: </p>
  
  <pre><code>&lt;f:debug&gt;{data}&lt;/f:debug&gt;
  
  array(85 items)
  ...
     media =&gt; array(1 item)
        0 =&gt; TYPO3\CMS\Core\Resource\FileReferenceprototypeobject
           propertiesOfFileReference =&gt; protectedarray(35 items)
              ...
              crop =&gt; '{"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)
  ...
  </code></pre>