---
title: "[FLUID] ImageViewHelper mit Crop (zuschneiden) Funktion?"
url: "https://www.typo3.net/d/105554-fluid-imageviewhelper-mit-crop-zuschneiden-funktion"
source: "typo3.net"
tags: ["Extensions","Extbase","Bilder","Frage","ViewHelper"]
created: "2011-05-24"
last_reply: "2015-06-15"
replies: 6
solved: false
page: 1
pages: 1
lang: "de"
---

# [FLUID] ImageViewHelper mit Crop (zuschneiden) Funktion?

Extensions › Extbase · 6 Antworten · gestartet 2011-05-24

## Eröffnungsbeitrag

**Unbekannter Benutzer** · 2011-05-24 · [Beitrag #1](https://www.typo3.net/d/105554-fluid-imageviewhelper-mit-crop-zuschneiden-funktion/1)

Hi,

gibt es eine Möglichkeit, Bilder mit dem ImageViewHelper von fluid zuzuschneiden (crop)?

Momentan füge ich Bilder so ein:

```html
<f:image src="uploads/tx_myext/{object.image}" alt="{object.name}" title="{object.name}" width="145" maxHeight="130" />
```

Besten Dank schon mal! :)

## Antworten

### [#2](https://www.typo3.net/d/105554-fluid-imageviewhelper-mit-crop-zuschneiden-funktion/2) · Unbekannter Benutzer · 2011-05-24

Ich sollte vielleicht noch erwähnen, dass ich fluid in der **Version 1.0.2** benutze. Kann also sehr gut sein, dass dies in aktuelleren Versionen bereits verbaut ist.

Der Standard ImageViewHelper kann das anscheinend nicht. Deswegen hab einen eigenen ViewHelper angelegt und den originalen ImageViewHelper um die Crop-Funktion erweitert:

Es gibt nun zwei weitere Parameter: **cropLeft** und **cropTop**

Beispiel: Bild wird auf die obere linke Ecke zugeschnitten, d.h. alles was rechts von 480px und unter 220px liegt wird abgeschnitten

```html
<myNameSpace:image src="uploads/tx_myext/{object.image}" alt="{object.name}" title="{object.name}" width="480" height="200" cropLeft="-100" cropTop="-100"/>
```

Er kann im Prinzip als Ersatz für den originalen ImageViewHelpers genutzt werden, lässt man nämlich **cropLeft** und **cropTop** einfach weg, dann macht er genau das gleiche wie der Normale.

Wie das Zuschneidein von Bilder unter TYPO3 funktioniert kann hier nachgelesen werden (siehe Property **width**):
<https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/Functions/Imgresource.html>

Für alle mit dem gleichen Problem ist das hoffentlich eine Hilfe! :)

```php
<?php

/*                                                                        *
 * This script is part of the TYPO3 project - inspiring people to share!  *
 *                                                                        *
 * TYPO3 is free software; you can redistribute it and/or modify it under *
 * the terms of the GNU General Public License version 2 as published by  *
 * the Free Software Foundation.                                          *
 *                                                                        *
 * This script is distributed in the hope that it will be useful, but     *
 * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHAN-    *
 * TABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General      *
 * Public License for more details.                                       *
 *                                                                        */

/**
 *
 * @todo documentation
 *
 * @package Fluid
 * @subpackage ViewHelpers
 * @version $Id: ImageViewHelper.php 1734 2009-11-25 21:53:57Z stucki $
 */

/**
 *
 * @package
 * @subpackage
 * @version $Id: ImageViewHelper.php 1734 2009-11-25 21:53:57Z stucki $
 */
class Tx_MyExt_ViewHelpers_ImageViewHelper extends Tx_Fluid_Core_ViewHelper_TagBasedViewHelper {

	/**
	 * @var	tslib_cObj
	 */
	protected $contentObject;

	/**
	 * @var string
	 */
	protected $tagName = 'img';

	/**
	 * Constructor. Used to create an instance of tslib_cObj used by the render() method.
	 *
	 * @param tslib_cObj $contentObject injector for tslib_cObj (optional)
	 * @return void
	 */
	public function __construct($contentObject = NULL) {
		$this->contentObject = $contentObject !== NULL ? $contentObject : t3lib_div::makeInstance('tslib_cObj');
		if (TYPO3_MODE === 'BE') {
			throw new Tx_Fluid_Core_ViewHelper_Exception('ImageViewHelper does not (yet) work in backend mode' , 1253191784);
		}
	}

	/**
	 * Initialize arguments.
	 *
	 * @return void
	 * @author Bastian Waidelich <bastian@typo3.org>
	 */
	public function initializeArguments() {
		parent::initializeArguments();
		$this->registerUniversalTagAttributes();
		$this->registerTagAttribute('alt', 'string', 'Specifies an alternate text for an image', TRUE);
		$this->registerTagAttribute('ismap', 'string', 'Specifies an image as a server-side image-map. Rarely used. Look at usemap instead', FALSE);
		$this->registerTagAttribute('longdesc', 'string', 'Specifies the URL to a document that contains a long description of an image', FALSE);
		$this->registerTagAttribute('usemap', 'string', 'Specifies an image as a client-side image-map', FALSE);
	}

	/**
	 * Render the img tag.
	 * @see http://typo3.org/documentation/document-library/references/doc_core_tsref/4.2.0/view/1/5/#id4164427
	 *
	 * @param string $src
	 * @param string $width width of the image. This can be a numeric value representing the fixed width of the image in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width for possible options.
	 * @param string $height height of the image. This can be a numeric value representing the fixed height of the image in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width for possible options.
	 * @param integer $minWidth minimum width of the image
	 * @param integer $minHeight minimum height of the image
	 * @param integer $maxWidth maximum width of the image
	 * @param integer $maxHeight maximum height of the image
	 * @param integer $cropLeft
	 * @param integer $cropTop
	 *
	 * @return string rendered tag.
	 * @author Sebastian Böttger <sboettger@cross-content.com>
	 * @author Bastian Waidelich <bastian@typo3.org>
	 */
	public function render($src, $width = NULL, $height = NULL, $minWidth = NULL, $minHeight = NULL, $maxWidth = NULL, $maxHeight = NULL, $cropLeft = NULL, $cropTop = NULL) {
        $setup = array(
          'minW' => $minWidth,
          'minH' => $minHeight,
          'maxW' => $maxWidth,
          'maxH' => $maxHeight
        );
        if($cropLeft !== NULL) $setup['width'] = $width.'c'.$cropLeft;
        if($cropTop !== NULL) $setup['height'] = $height.'c'.$cropTop;
        if(($cropLeft === NULL) && ($cropTop === NULL)) {
          $setup['width'] = $width;
          $setup['height'] = $height;
        }
		$imageInfo = $this->contentObject->getImgResource($src, $setup);
		$GLOBALS['TSFE']->lastImageInfo = $imageInfo;
		if (!is_array($imageInfo)) {
			throw new Tx_Fluid_Core_ViewHelper_Exception('Could not get image resource for "' . htmlspecialchars($src) . '".' , 1253191060);
		}
		$imageInfo[3] = t3lib_div::png_to_gif_by_imagemagick($imageInfo[3]);
		$GLOBALS['TSFE']->imagesOnPage[] = $imageInfo[3];

		$imageSource = $GLOBALS['TSFE']->absRefPrefix . t3lib_div::rawUrlEncodeFP($imageInfo[3]);
		$this->tag->addAttribute('src', $imageSource);
		$this->tag->addAttribute('width', $imageInfo[0]);
		$this->tag->addAttribute('height', $imageInfo[1]);
		if ($this->arguments['title'] === '') {
			$this->tag->addAttribute('title', $this->arguments['alt']);
		}

		return $this->tag->render();
	}
}
```

### [#3](https://www.typo3.net/d/105554-fluid-imageviewhelper-mit-crop-zuschneiden-funktion/3) · torben75hh · 2011-09-22

Die aktuelle Fluid-Version kann das mittlerweile von Haus aus:

Crop zu 48x48 Pixel:

```html
<f:image src="path/to/image.jpg" alt="Alt-Text" width="48c" height="48c" />
```

### [#4](https://www.typo3.net/d/105554-fluid-imageviewhelper-mit-crop-zuschneiden-funktion/4) · Unbekannter Benutzer · 2011-09-22

Danke für den Tipp! :)

### [#5](https://www.typo3.net/d/105554-fluid-imageviewhelper-mit-crop-zuschneiden-funktion/5) · mchenzi · 2014-01-17

Das funktioniert bei mir nicht.

### [#6](https://www.typo3.net/d/105554-fluid-imageviewhelper-mit-crop-zuschneiden-funktion/6) · Halion · 2014-01-17

Hallo mchenzi,

das kann daran liegen das bei dir im Install Tool das ImageMagick nicht aktiviert ist.
Das kannst du prüfen indem du im Install Tool unter All Configuration unter IM schaust ob es aktiviert ist.
Falls nicht mache das erst dann sollte der Viewhelper auch croppen können.

Was für eine Umgebung verwendest du, Windows, Mac, MAMP?

Grüße
Halion

### [#7](https://www.typo3.net/d/105554-fluid-imageviewhelper-mit-crop-zuschneiden-funktion/7) · 99grad · 2015-06-15

Vielleicht nicht uninteressant in Bezug auf Fluid ImageViewHelper und Bildausschnitt: Hier gibt es eine Extension, bei der für die FAL-Bilder optimierte Bildausschnitte definiert werden können. Der Standard f:image und f:uri.image-ViewHelper wurden dabei so manipuliert, dass er automatisch den besten Ausschnitt des Bildes wählt. Anpassungen an bestehenden Fluid-Templates sind daher nicht notwendig:
<http://labor.99grad.de/?p=928>

---

Quelle: „[FLUID] ImageViewHelper mit Crop (zuschneiden) Funktion?“, typo3.net, https://www.typo3.net/d/105554-fluid-imageviewhelper-mit-crop-zuschneiden-funktion
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.