Image Cropping in TYPO3 Backend

Since TYPO3 version 7 there is a new image cropping tool available in the backend. It enables the editors to select and save a region of an image right where they add the image. This post explains the usage, its configuration and how to use it in your own extensions.

For Editors

The cropping tool available is on the tab „Media“ in the content elements of type „Text & Media“. A click on the button „Open Editor“ opens the cropping tool.

Activate TYPO3 image manipulation

On the left side of the editor there is the original image, on the right side there is detailed information about the image and the presets for the aspect ratio. The predefined aspect ratios are 16:9, 4:3 and 1:1. If you select one of these the tool sticks to the ratio, while resizing the area. „Free“ does not impose any restrictions to the ratio and is the default value.

TYPO3 image editing in action

The info area below the presets show the size and the coordinates of the upper left corner of the selected area in the original image. The „Reset“ button resets all changes to the file. The „Accept“ Button closes the dialog, but does not save the values to the database. As an editor you must click one of the save buttons of the content element.

The tool supports the formats gif, jpg, jpeg, tif, tiff, bmp, pcx, tga, png, pdf, ai and svg. As you can imagine, it is not available for media urls, audio and video files.

For Integrators and Developers

It is not always wanted, that all editiors can access that feature. It can only be disabled via the access lists in the section „File Reference“; uncheck the checkbox “Image manipulation (crop)”. I did not find a possibility to disable it via PageTSconfig, as it is possible with all other fields. If you found one, I would be happy, if you add it to the comments.

typo3_image-cropping_03
Disable image cropping

Additionally it is possible to set custom aspect ratios. This is set in the file “Configuration/TCA/Overrides/sys_file_reference.php“ in your extension.

Set custom aspect ratiosPHP

If this array is found, the TYPO3 defaults of the image manipulation tool is dropped. The complete array is taken instead.

The last thing I want to  show is, how you can use it in custom extensions. A minimal configuration within the TCA for an image / media field looks like this:

Image TCAPHP


$tx_yourextension_domain_model_yourmodel['columns'] = array (
   'image_field' => array(
      'label' => 'LLL:EXT:yourextension/Resources/Private/Language/locallang_db.xlf:sometable.image_field',
      'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
         'image_field', array (
             'foreign_match_fields' => array (
                'fieldname' => 'image_field',
                'tablenames' => 'tx_yourextension_domain_model_yourmodel',
                'table_local' => 'sys_file',
             ),
             'foreign_types' => array(
                \TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE => array(
                   'showitem' => '--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette,
                                  --palette--;;imageoverlayPalette,
                                  --palette--;;filePalette'
                ),
            ),
        ),
        'jpg,jpeg,png'
      ),
   ),
);


$tx_yourextension_domain_model_yourmodel['columns'] = array (
   'image_field' => array(
      'label' => 'LLL:EXT:yourextension/Resources/Private/Language/locallang_db.xlf:sometable.image_field',
      'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
         'image_field', array (
             'foreign_match_fields' => array (
                'fieldname' => 'image_field',
                'tablenames' => 'tx_yourextension_domain_model_yourmodel',
                'table_local' => 'sys_file',
             ),
             'foreign_types' => array(
                \TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE => array(
                   'showitem' => '--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette,
                                  --palette--;;imageoverlayPalette,
                                  --palette--;;filePalette'
                ),
            ),
        ),
        'jpg,jpeg,png'
      ),
   ),
);

Conclusion

The current image manipulation tool is a first step to enable editors to edit images in the backend. Right now, the cropping functionality is the only feature available. Other future features could be adding filters or zooming. If you have ideas and requests, please add them to forge.typo3.org.

Another idea for future development could be a context dependent image manipulation tool. For example, all pictures rendered for a person directory should have a ratio of 5:7. All other images included in a content element should be either 16:9 or 4:3 ratio. There is already a ticket for it on forge.typo3.org

I hope you find this article interesting and helpful. If yes, I would be happy if you spread the word.

My story Developer started 8 years ago. I first became interested in web technologies. First, the first shock to me was NTML. It does not fit into the principles of my ideas about programming. But the interest of creating something on the Internet has stimulated me. Later, I joined the company as a web developer. Every month I have to learn new technology. Development of simple sites flowed into maintenance complex solutions CLD