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...

Fund package maintenance!
lochmueller
paypal.me/lochmueller

Installs: 27 410

Dependents: 0

Suggesters: 0

Security: 0

Stars: 23

Watchers: 9

Forks: 15

Open Issues: 1

Type:typo3-cms-extension

3.2.1 2019-04-26 08:30 UTC

This package is auto-updated.

Last update: 2020-07-22 15:15:51 UTC


README

Latest Stable Version Total Downloads License TYPO3 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.

<INCLUDE_TYPOSCRIPT: source="FILE:EXT:focuspoint/Configuration/TypoScript/setup.txt">

# Setup must be after "page" TypoScript
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:focuspoint/Configuration/TypoScript/setup.txt">

Fluid template (Example)

Edit your fluid template.

{namespace fp=HDNET\Focuspoint\ViewHelpers}
<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;
}