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 fil

6.0.5 2024-01-23 21:31 UTC

Requires

• php: ^8.0
• typo3/cms-core: ^12.4

Requires (Dev)

• friendsofphp/php-cs-fixer: ^3.20
• scrutinizer/ocular: ^1.3
• typo3/testing-framework: ^8.0

GPL-2.0-or-later

• focuspoint
• TYPO3 CMS

README

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:

• Violetta Digital Craft GmbH, www.violetta.ch - TYPO3 v10 and v11 support
• and all contributors!