TYPO3 imageManipulation focusArea in Frontend

Question

Does anyone know how to use the TYPO3 focus area in the frontend? TCA imageManipulation

If I use the crop attribute in the fluid-template

<f:image width="555c" height="312c" src="{article.teaserFile.uid}" treatIdAsReference="1" crop="{article.teaserFile.originalResource.referenceProperties.crop}" />

i get a serialized string in data-focus-area.

<img data-focus-area="{&quot;x&quot;:786.1145320197,&quot;y&quot;:96.682142857143,&quot;width&quot;:271.44177339901,&quot;height&quot;:270.05062857143}" src="/fileadmin/_processed_/9/b/csm_testimage_0bfc7bc724.jpg" width="657" height="566" alt="" title="Testimage">

Does the data need to be used by a JS library? Can someone recommend a library here? Because i didn't find a recommendation for a library which can handle focus Area and the attribute data-focus-area.

Or do i have to write a viewhelper giving the attributes e.g. for "jQuery focuspoint" to data-focus-x, data-focus-y, data-image-w, and data-image-h.

Answer 1

No, you don't need to rewrite the ViewHelpers. (It would be nice, if in the future it could be a bit better extendable then now however.)

But you can implement the jQuery Focuspoint. The only thing you need to do, BEFORE you starts the focuspoint plugin, you can transform this array into the needed values with jquery.

An exmaple from the FocusPoint documentation

$('.focuspoint').focusPoint();

So before this line, you can just simply add the values from the array as an own data attribute.

The form is different, but the logic is the same. So you have the x, y, width and height values in the focus-area array.

This would not work with responsify.js for example. It needs bottom, top, left, right values.

So yes... it won't work out of the box.

But NO, you don't need to change the PHP part, because you can solve it on the front end. (You need jQuery plugin anyway, so making some code before using it is easier.)

Changing those ViewHelpers is also a possibility of course, but you really need to rewrite their functionality (also the renderImage function to be concrete) and if you want to update it to a later version it could lead to problems.