lochmueller/focuspoint

Focuspoint integrate the focal point method to crop images in the frontend of the web page. Use the jQuery-focuspoint plugin (https://github.com/jonom/jquery-focuspoint example http://jonom.github.io/jquery-focuspoint/demos/helper/index.html) to crop the images. Use the function as wizard in the file list view and directly in the content element.


Keywords
focuspoint, TYPO3 CMS, extension, images, typo3, typo3-extension
License
GPL-2.0-or-later

Documentation

EXT:focuspoint

Latest Stable Version Total Downloads License TYPO3 Average time to resolve an issue Percentage of issues still open

Installation

Add TypoScript

Include in static template or add TypoScript includes to your extension or template.

# Setup must be after "page" TypoScript
@import 'EXT:focuspoint/Configuration/TypoScript/setup'

Fluid template (Example)

Edit your fluid template.

<div style="height: 400px;">
    <fp:image image="{image}" width="1000c" height="400c" realCrop="false"/>
</div>
<div style="height: 400px;">
    <fp:image src="{image.uid}" treatIdAsReference="1" width="1000c" height="400c" realCrop="false"/>
</div>

Custom CSS

Maybe you want to add additional css, for fluid example.

.focuspoint {
  position: relative;
  height: 100%;
  overflow: hidden;
}

Sponsors & supporter

Thank you for support and sponsoring the extension:

GitHub Contributors Image