Feature #77531

Get cropped image in Fluid width <f:image /> and similar

Added by Joe Jones over 4 years ago. Updated almost 4 years ago.

Status:
Closed
Priority:
Should have
Assignee:
Category:
Fluid Styled Content
Target version:
Start date:
2016-08-17
Due date:
% Done:

0%

Estimated time:
PHP Version:
Tags:
Complexity:
Sprint Focus:

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

#1

Updated by Frans Saris over 4 years ago

You can use the FilesProcessor https://github.com/TYPO3/TYPO3.CMS/blob/master/typo3/sysext/frontend/Classes/DataProcessing/FilesProcessor.php to get the fileReference objects. These objects can be feeded to the <f:media

#2

Updated by Benni Mack over 4 years ago

  • Target version changed from 8.3 to 8.4
#3

Updated by Benni Mack about 4 years ago

  • Target version changed from 8.4 to 8.5
#4

Updated by Benni Mack about 4 years ago

  • Status changed from New to Needs Feedback

Hey Joe Jones,

does the hint from Frans solve your problem?

#5

Updated by Benni Mack almost 4 years ago

  • Target version changed from 8.5 to 8.6
#6

Updated by Benni Mack almost 4 years ago

  • Target version changed from 8.6 to 8 LTS
#7

Updated by Frans Saris almost 4 years ago

  • 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