Media Processing for TYPO3 integrates various image processing
libraries and SaaS cloud services into TYPO3 by leveraging their APIs to
process images. This basically replaces the need for local image processing
libraries like ImageMagick for image processing operations.
Integrations
| name | resize | crop | focus | sign |
|---|---|---|---|---|
| imgproxy | 🟢 | 🟢 | 🟢 | 🟢 |
| imagor | 🟢 | 🟢 | 🟡 | 🟢 |
| thumbor | 🟢 | 🟢 | 🟡 | 🟢 |
| optimole.com | 🟢 | 🟢 | 🟢 | 🔴 |
| bunny.net | 🟢 | 🟢 | 🔴 | 🟢 |
| cloudflare.com | 🟢 | 🟢 | 🟢 | 🔴 |
| imagekit.io | 🟢 | 🟢 | 🟡 | 🟢 |
| sirv.com | 🟢 | 🟢 | 🟡 | 🔴 |
| imgix.com | 🟢 | 🟢 | 🟡 | 🟢 |
| cloudinary.com | 🟢 | 🟢 | 🟡 | 🟢 |
| cloudimage.io | 🟢 | 🟢 | 🟡 | 🟢 |
| gumlet.com | 🟢 | 🟢 | 🟢 | 🟢 |
resize: Integration supports resize operations.crop: Integration supports crop operations.focus: Integration supports gravity or focus points. (experimental)sign: Integration supports URL signing.
🟢 supported and integrated
🟡 supported but not integrated
🔴 unsupported
Composer Mode
Install the somehow-digital/typo3-media-processing
package from the Composer Package Repository.
composer require somehow-digital/typo3-media-processingLegacy Mode
Install the media_processing
extension from the TYPO3 Extension Repository.
- TYPO3
12 - PHP with
opensslextension
By choosing and configuring one of the available image processing integrations, TYPO3 will use the configured integration to process images instead of using the local image processing library.
Extension configuration is located in the TYPO3 backend under
Admin Tools → Settings → Extension Configuration.
common common
| option | type | description | default |
|---|---|---|---|
| integration | options | Service integration to use for image processing. | null |
| storage | bool | Enable local storage of processed files. | false |
| backend | bool | Enable image processing in the backend. | true |
| frontend | bool | Enable image processing in the frontend. | true |
imgproxy integration.imgproxy
| option | type | description | default |
|---|---|---|---|
| api_endpoint | string | The API endpoint of the imgproxy service. | null |
| source_loader | options | The source loader of the imgproxy service. | uri |
| source_uri | string | The origin host URL where files are stored. | null |
| signature | bool | Enable signature of the imgproxy service. | false |
| signature_key | string | The signature key of the imgproxy service. | null |
| signature_salt | string | The signature salt of the imgproxy service. | null |
| signature_size | int | The signature size of the imgproxy service. | null |
| encryption | bool | Enable encryption of the imgproxy service. | false |
| encryption_key | string | The encryption key of the imgproxy service. | null |
See also the official imgproxy documentation
for more information.
imagor integration.imagor
| option | type | description | default |
|---|---|---|---|
| api_endpoint | string | The API endpoint of the imagor service. | null |
| source_loader | options | The source loader of the imagor service. | uri |
| source_uri | string | The origin host URL where files are stored. | null |
| signature | bool | Enable signature of the imagor service. | false |
| signature_key | string | The signature key of the imagor service. | null |
| signature_algorithm | options | The signature algorithm of the imagor service. | sha1 |
| signature_length | int | The signature size of the imagor service. | null |
See also the official imagor documentation
for more information.
thumbor integration.thumbor
| option | type | description | default |
|---|---|---|---|
| api_endpoint | string | The API endpoint of the thumbor service. | null |
| source_loader | options | The source loader of the thumbor service. | uri |
| source_uri | string | The origin host URL where files are stored. | null |
| signature | bool | Enable signature of the thumbor service. | false |
| signature_key | string | The signature key of the thumbor service. | null |
| signature_algorithm | options | The signature algorithm of the thumbor service. | sha1 |
| signature_length | int | The signature size of the thumbor service. | null |
See also the official thumbor documentation
for more information.
optimole.com integration.optimole
| option | type | description | default |
|---|---|---|---|
| api_key | string | The API key of the optimole service. | null |
| source_uri | string | The origin host URL where files are stored. | null |
See also the official optimole documentation
for more information.
bunny.net integration.bunny
| option | type | description | default |
|---|---|---|---|
| api_endpoint | string | The Pull Zone URL of the bunny.net service. | null |
| source_uri | string | The origin host URL where files are stored. | null |
| signature | bool | Enable signature of the bunny.net service. | false |
| signature_key | string | The signature key of the bunny.net service. | null |
See also the official bunny.net documentation
for more information.
cloudflare.com integration.cloudflare
| option | type | description | default |
|---|---|---|---|
| api_endpoint | string | The API endpoint of the cloudflare service. | null |
| source_uri | string | The origin host URL where files are stored. | null |
See also the official cloudflare documentation
for more information.
imagekit.io integration.imagekit
| option | type | description | default |
|---|---|---|---|
| api_endpoint | string | The API endpoint of the imagekit service. | null |
| source_uri | string | The origin host URL where files are stored. | null |
| signature | bool | Enable signature of the imagekit service. | false |
| signature_key | string | The signature key of the imagekit service. | null |
See also the official imagekit.io documentation
for more information.
sirv.com integration.sirv
| option | type | description | default |
|---|---|---|---|
| api_endpoint | string | The API endpoint of the sirv service. | null |
| source_uri | string | The origin host URL where files are stored. | null |
See also the official sirv.com documentation
for more information.
imgix.com integration.imgix
| option | type | description | default |
|---|---|---|---|
| api_endpoint | string | The API endpoint of the imgix service. | null |
| source_loader | options | The source loader of the imgix service. | folder |
| source_uri | string | The origin host URL where files are stored. | null |
| signature | bool | Enable signature of the imgix service. | false |
| signature_key | string | The signature key of the imgix service. | null |
See also the official imgix.com documentation
for more information.
cloudinary.com integration.cloudinary
| option | type | description | default |
|---|---|---|---|
| api_endpoint | string | The API endpoint of the cloudinary service. | null |
| delivery_mode | options | The source loader of the cloudinary service. | fetch |
| source_uri | string | The origin host URL where files are stored. | null |
| signature | bool | Enable signature of the cloudinary service. | false |
| signature_key | string | The signature key of the cloudinary service. | null |
| signature_algorithm | options | The signature algorithm of the cloudinary service. | sha1 |
See also the official cloudinary.com documentation
for more information.
cloudimage.io integration.cloudimage
| option | type | description | default |
|---|---|---|---|
| api_endpoint | string | The API endpoint of the cloudimage service. | null |
| source_uri | string | The origin host URL where files are stored. | null |
| signature | bool | Enable signature of the cloudinary service. | false |
| signature_key | string | The signature key of the cloudinary service. | null |
See also the official cloudimage.io documentation
for more information.
gumlet.com integration.gumlet
| option | type | description | default |
|---|---|---|---|
| api_endpoint | string | The Gumlet URL of the gumlet.com service. | null |
| signature | bool | Enable signature of the gumlet.com service. | false |
| signature_key | string | The signature key of the gumlet.com service. | null |
See also the official gumlet.com documentation
for more information.
The backend Invalidate processed media action can be used to invalidate
processed files for the active media processing integration.
The TYPO3 CLI cleanup:invalidatemedia command can be used to invalidate
processed files for the active media processing integration.
vendor/bin/typo3 cleanup:invalidatemedia
- Discord
- Discussions
- Issues
Version 1.0.0 🏷️ developing
- ✅ Support for TYPO3
12. - ✅ Support
resizeoperations. - ✅ Support
cropoperations. - ✅ Backend toolbar action and CLI command for processed media invalidation.
- ✅ Integration for imgproxy
library. - ✅ Integration for imagor
library. - ✅ Integration for thumbor
library. - ✅ Integration for optimole.com
service. - ✅ Integration for bunny.net
service. - ✅ Integration for cloudflare.com
service. - ✅ Integration for imagekit.io
service. - ✅ Integration for sirv.com
service. - ✅ Integration for imgix.com
service. - ✅ Integration for cloudinary.com
service. - ✅ Integration for cloudimage.io
service. - ✅ Integration for gumlet.com
service. - Release.
Version 2.0.0 🏷️ planning
- Support for TYPO3
13. - Support for gravity configuration via
focusAreaoperations. - Support for manual and smart gravity configuration.
- Integration for glide
library. - Integration for imaginary
library. - Integration for imageflow
library. - Integration for weserv
library. - Integration for fastly.com
service. - Integration for shortpixel.com
service. - Integration for imagify.io
service. - Integrations per site.
- Send HEAD requests to speed up image generation.
Version 3.0.0 🏷️ researching
- Integration for more image processing libraries/services.
- Integration for video processing libraries/services.