Adjust aspect ratios in the image editor

Per TSconfig as of TYPO3 7.6

Custom aspect ratios in the image editor — Result of the sample code

Since TYPO3 7.6, the aspect ratio of images can be changed for output, for example in content elements or in the page properties. The original image is not changed.

In addition to the option of freely selecting the image section, various aspect ratios are predefined. These can be adjusted as required with a few lines of TSconfig.
Please note: TSconfig overwrites the default settings. Only the aspect ratios defined in TSconfig are then available in the image editor.

Adjust aspect ratios in the image editor (from TYPO3 7.6)

In addition to the usual aspect ratios, the following example also adds some for social media platforms. The names for the buttons are predefined here.

However, you can also use the usual TYPO3 localization syntax (LLL:...) to store the labels in language files (locallang.xlf).

Script for version TYPO3 7LTS

TCEFORM.sys_file_reference.crop.config.ratios {
  NaN = Free
  1 = 1:1
  1\.3333333333 = 4:3
  1\.5 = 3:2
  1\.7777777777777777= 16:9
  1\.9108280255 = Facebook Standard
  2 = Twitter Standard
  0\.666969147= Pinterest Standard
}

The numbers represent the aspect ratio. With an aspect ratio of 4:3, it is calculated as follows: 4 / 3 = 1.333333333
In TSconfig, the dot . must be escaped with a backslash \, so the spelling would be 1\.333333333

Script for version TYPO3 8LTS

TCEFORM.sys_file_reference.crop.config.cropVariants {
  default {
    title = Default desktop
    selectedRatio = NaN
    allowedAspectRatios {
      NaN {
        title = Free
        value = 0.0
      }
      1:1 {
        title = 1:1
        value = 1.0
      }
      3:2 {
        title = 3:2
        value = 1.5
      }
      2:3 {
        title = 2:3
        value = 0.6666666667
      }
      4:3 {
        title = 4:3
        value = 1.3333333333
      }
      3:4 {
        title = 3:4
        value = 0.75
      }
      16:9 {
        title = 16:9
        value = 1.7777777778
      }
    }
  }
  specialMobile {
    title = Our special mobile variant
    selectedRatio = NaN
    allowedAspectRatios {
      4:3 {
        title = 4:3
        value = 1.3333333
      }
    }
  }
}

Updated: 17.07.2024