Feature #77531
closed
Get cropped image in Fluid width <f:image /> and similar
Added by Joe Jones over 8 years ago.
Updated almost 8 years ago.
Category:
Fluid Styled Content
Description
Hallo,
it is a great feature to crop images directly in TYPO3.
Now I want to build a menu of subpages with images from the page media ressource. First problem: the page-object only gives the amount of media, not an array of media-objects, so you need some vhs-viewhelpers. I used a part of this script:
[https://www.rutschmann.biz/blog/post/typo3-7-lts-fluid-styled-content-spezialmenue-auflistung-der-unterseiten-mit-bild-aus-seiteneigens/]
So I do not have access of the image object therefor I can't use <f:media /> like the fluid_styled_content MediaGallery.html partial. That needs an object and returns the cropped image.
The media-array in that specific script returns a string "crop" = {"x":278.14336188436846,"y":0,"width":1955.5631691648816,"height":5180.299785867236,"rotate":0,"s caleX":1,"scaleY":1}
Maybe it is possible to apply that crop to the <f:image />.
Thanks
Martin
- Target version changed from 8.3 to 8.4
- Target version changed from 8.4 to 8.5
- Status changed from New to Needs Feedback
Hey Joe Jones,
does the hint from Frans solve your problem?
- Target version changed from 8.5 to 8.6
- Target version changed from 8.6 to 8 LTS
- Status changed from Needs Feedback to Closed
With the viewHelpers from the example you can use the <f:media but also the <f:image viewhelpers.
https://www.rutschmann.biz/blog/post/typo3-7-lts-fluid-styled-content-spezialmenue-auflistung-der-unterseiten-mit-bild-aus-seiteneigens/
For example:
<v:resource.record.fal
table="pages"
field="media"
uid="{page.uid}"
as="media">
<f:media
file="{media.0}" />
</v:resource.record.fal>
or:
<v:resource.record.fal
table="pages"
field="media"
uid="{page.uid}"
as="media">
<f:if condition="{media.0.type}==2">
<f:link.page pageUid="{page.uid}">
<f:image
image="{media.0}"
maxWidth="250"
class="img-responsive" />
</f:link.page>
</f:if>
</v:resource.record.fal>
But you can also use a specific crop value with the <f:image viewhelper like:
<f:image src="{fileUid}" crop="{cropInfo}" />
Also available in: Atom
PDF
Updated by 
Updated by