PHPackages visol/cloudinary - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. visol/cloudinary ActiveTypo3-cms-extension[Image & Media](/categories/media) visol/cloudinary ================ Cloudinary integration in TYPO3. Use automatic breakpoint generation for images. 5.0.1(1mo ago)22.2k↓53.3%1[6 PRs](https://github.com/visol/ext-cloudinary/pulls)GPL-2.0-or-laterPHPPHP >= 8.1 < 8.5CI failing Since Feb 20Pushed 1mo ago6 watchersCompare [ Source](https://github.com/visol/ext-cloudinary)[ Packagist](https://packagist.org/packages/visol/cloudinary)[ RSS](/packages/visol-cloudinary/feed)WikiDiscussions main Synced today READMEChangelog (7)Dependencies (9)Versions (44)Used By (0) Cloudinary Integration - FAL Driver =================================== [](#cloudinary-integration---fal-driver) A TYPO3 extension that connect TYPO3 with [Cloudinary](cloudinary.com) services by the means of a **Cloudinary Driver for FAL**. The extension also provides various View Helpers to render images on the Frontend. Cloudinary is a service provider dealing with images and videos. It offers various services among others: - CDN for fast images and videos delivering - Manipulation of images and videos such as cropping, resizing and much more... - DAM functionalities where images can be tagged and metadata edited Compatibility and Maintenance ----------------------------- [](#compatibility-and-maintenance) This package is currently maintained for the following versions: TYPO3 VersionPackage VersionBranchMaintainedTYPO3 11.5.x4.xmasterYesTYPO3 11.5.x3.x-NoTYPO3 11.5.x0.x-NoInstallation ============ [](#installation) The extension should be done by Composer ``` composer require visol/cloudinary ``` Note that the extension will require the library `cloudinary/cloudinary_php` and be automatically downloaded into `vendor`. Configuration ============= [](#configuration) If it is not already the case, create an account on [Cloudinary](https://cloudinary.com/users/register/free) at first. Once the extension is installed, we should create a [file storage](https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/Fal/Administration/Storages.html). For a new "file storage" record, then: - Pick the **Cloudinary** driver in the driver dropdown menu. - Fill in the requested fields. Password and secrets can be found from the [Cloudinary Console](https://cloudinary.com/console). Once the record is saved, you should see a message telling the connection could be successfully established. You can now head to the File module list. Notice the first time you click on a folder in the File list module, it will take some time since the images must be fetched and put into the cloudinary cache. Notice you can also use environment variable to configure the storage. The environment variable should be surrounded by %. Example `%env(BUCKET_NAME%)` [![](Documentation/driver-configuration-01.png)](Documentation/driver-configuration-01.png) Cloudinary integration as file picker ------------------------------------- [](#cloudinary-integration-as-file-picker) The extension is providing an integration with Cloudinary so that the editor can directly interact with the cloudinary library in the backend. When clicking on a button, a modal window will open up displaying the Cloudinary files directly. From there, the files can be inserted directly as file references. [![](Documentation/backend-cloudinary-integration-01.png)](Documentation/backend-cloudinary-integration-01.png) To enable this button, we should first configure the extension settings to display the desired button and storage. [![](Documentation/extension-configuration-01.png)](Documentation/extension-configuration-01.png) We can even take it a step further by enabling auto-login. A new field called authenticationEmail has been added to the storage configuration. By providing a configured email in Cloudinary, we can automatically log in when clicking on the button. Magic! [![](Documentation/driver-configuration-03.png)](Documentation/driver-configuration-03.png) Configuration TCEFORM --------------------- [](#configuration-tceform) We can configure the form in the backend to hide the default TYPO3 button, thus limiting backend user interaction with the Cloudinary library. Here is an example of such a configuration: ``` TCEFORM { pages { media { config { appearance { fileUploadAllowed = 0 fileByUrlAllowed = 0 elementBrowserEnabled = 0 } } } } } ``` Logging ------- [](#logging) For the debug purposes Cloudinary API calls are logged to better track and understand how and when the API is called. It might be useful to check the log file in case of a low response time in the BE. ``` tail -f public/typo3temp/var/logs/cloudinary.log ``` To decide: we now have log level INFO. We might consider "increasing" the level to "DEBUG". Caveats and troubleshooting --------------------------- [](#caveats-and-troubleshooting) - **Free** Cloudinary account allows 500 API request per day - This cloudinary FAL driver is currently **limited to images**. ViewHelpers ----------- [](#viewhelpers) The extension provides ViewHelpers that can be used like that: 1. Output an images and its source-set. ``` ``` This will produces the following output: ``` ``` 2. Generate an array of variants that can be iterated. ``` {responsiveImageData} ``` CLI Command ----------- [](#cli-command) Move bunch of images from a local storage to a cloudinary storage. **CAUTIOUS!** 1. Moving means: we are "manually" uploading a file (skipping FAL API) to the Cloudinary storage and deleting the one from the local storage (rm -f FILE) Finally we are changing the `sys_file.storage value` to the cloudinary storage. The file uid will be kept! ``` ./vendor/bin/typo3 cloudinary:move 1 2 # param 1: the source storage uid (local) # param 2: the target storage uid (cloudinary) # Will all parameters ./vendor/bin/typo3 cloudinary:move 1 2 --base-url=https://domain.tld/fileadmin --folder-filter=folderFilter # --base-url: the base URL where to download files (the file will be downloaded directly from the remote) # --filter: a possible filter, ex. %.youtube, /foo/bar/% # --filter-file-type: add a possible filter for file type as defined by FAL (e.g 1,2,3,4,5) # --limit: add a possible offset, limit to restrain the number of files. (eg. 0,100) # --yes: do not ask question. Just do it! # --silent: be quiet! ``` After "moving" files you should fix the jpeg extension for the Cloudinary storage by running the command below. It is worth mentioning that Cloudinary stripped the file extension for images. For instance a file `image.jpg` or `image.jpeg` uploaded on Cloudinary will be stored as `image`without the file extension. By inspecting the file, we will see that Cloudinary only consider the "jpg" extension. Consequently `image.jpeg` will be served as `image.jpg`. This has an implication for us. Record from table `sys_file` must be adjusted and occurrences `jpeg` in file identifier or file name must be changed to `jpg` for consistency. ``` ./vendor/bin/typo3 cloudinary:fix 2 # where "2" is the target storage uid (cloudinary) ``` Tip: to sync / upload a bunch of files, you can use the Cloudinary CLI which is convenient to upload many resources at once. ``` cld sync --push localFolder remoteFolder ``` The extension provides also a tool to copy a bunch of files (restricted to images) from one storage to another. This can be achieved with this command: ``` ./vendor/bin/typo3 cloudinary:copy 1 2 # where 1 is the source storage (local) # and 2 is the target storage (cloudinary) # Output: Copying 64 files from storage "fileadmin/ (auto-created)" (1) to "Cloudinary Storage (fabidule)" (2) Copying /introduction/images/typo3-book-backend-login.png Copying /introduction/images/content/content-quote.png ... Number of file copied: 64 ``` For your information a set of acceptance tests has been implemented to validate the functionnalities of the driver. ``` ./vendor/bin/typo3 cloudinary:tests fabidule:1234:ABCD ``` Development tools ----------------- [](#development-tools) Type command `make` at the source of the extension to display utility commands related to code formatting. ``` Usage: make [target] Available targets: help: Help lint: Display formatting issues in detail lint-summary: Display a summary of formatting issues lint-fix: Automatically fix code formatting issues ``` Web Hook -------- [](#web-hook) Whenever uploading or editing a file in the cloudinary library, you can configure in the cloudinary settings a URL to be called as a web hook. This is recommended to keep the data consistent between Cloudinary and TYPO3. When overriding or moving a file across folders, cloudinary will inform TYPO3 that something has changed. It will basically: - invalidate the processed files - invalidate the page cache where the file is involved. ``` https://domain.tld/?type=1573555440 ``` This, however, will not work out of the box and requires some manual configuration. Refer to the file ext:cloudinary/Configuration/TypoScript/setup.typoscript where we define a custom type. This is an example TypoScript file. Make sure that the file is loaded, and that you have defined a storage UID. Your system may contain multiple Cloudinary storages, and each web hook must refer to its own Cloudinary storage. Eventually you will end up having as many config as you have cloudinary storage. Source of inspiration --------------------- [](#source-of-inspiration) Adapter for php flysystem for Cloudinary ### Health Score 60 — FairBetter than 98% of packages Maintenance91 Actively maintained with recent releases Popularity22 Limited adoption so far Community17 Small or concentrated contributor base Maturity93 Battle-tested with a long release history Bus Factor1 Top contributor holds 58% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~169 days Recently: every ~300 days Total 19 Last Release 50d ago Major Versions 0.4.0 → 2.3.22021-09-27 v0.x-dev → 2.3.12021-12-17 2.3.4 → v11.x-dev2022-06-16 3.0.2 → 4.0.02022-12-15 4.1.1 → v13.x-dev2025-11-30 PHP version history (3 changes)2.3.2PHP >=7.3.0 4.0.0PHP ~8.0 || ~8.1 v13.x-devPHP >= 8.1 < 8.5 ### Community Maintainers ![](https://www.gravatar.com/avatar/d6e1686bc798a88033f481f209a4f060235147ac7dca4c3391f2d171e30fdd4a?d=identicon)[visol](/maintainers/visol) --- Top Contributors [![fabarea](https://avatars.githubusercontent.com/u/620730?v=4)](https://github.com/fabarea "fabarea (148 commits)")[![jrenggli](https://avatars.githubusercontent.com/u/743094?v=4)](https://github.com/jrenggli "jrenggli (48 commits)")[![SomeBdyElse](https://avatars.githubusercontent.com/u/243504?v=4)](https://github.com/SomeBdyElse "SomeBdyElse (27 commits)")[![dhuf](https://avatars.githubusercontent.com/u/1814195?v=4)](https://github.com/dhuf "dhuf (24 commits)")[![fanat98](https://avatars.githubusercontent.com/u/7521886?v=4)](https://github.com/fanat98 "fanat98 (5 commits)")[![lorenzulrich](https://avatars.githubusercontent.com/u/1816023?v=4)](https://github.com/lorenzulrich "lorenzulrich (2 commits)")[![dependabot-preview[bot]](https://avatars.githubusercontent.com/in/2141?v=4)](https://github.com/dependabot-preview[bot] "dependabot-preview[bot] (1 commits)") --- Tags typo3-extension ### Code Quality Static AnalysisPHPStan Type Coverage Yes ### Embed Badge ![Health badge](/badges/visol-cloudinary/health.svg) ``` [![Health](https://phpackages.com/badges/visol-cloudinary/health.svg)](https://phpackages.com/packages/visol-cloudinary) ``` ### Alternatives [friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103519.9k53](/packages/friendsoftypo3-content-blocks)[pagemachine/typo3-formlog Form log for TYPO3 23238.6k8](/packages/pagemachine-typo3-formlog)[netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 611.1M8](/packages/netresearch-rte-ckeditor-image)[web-vision/wv_deepltranslate DeepL Translate (CORE) - This extension provides option to translate content element, and TCA record texts to DeepL supported languages. 33304.0k](/packages/web-vision-wv-deepltranslate)[web-vision/deepltranslate-core DeepL Translate (CORE) - This extension provides option to translate content element, and TCA record texts to DeepL supported languages. 33142.5k8](/packages/web-vision-deepltranslate-core)[eliashaeussler/typo3-warming Warming - Warms up Frontend caches based on an XML sitemap. Cache warmup can be triggered via TYPO3 backend or using a console command. Supports multiple languages and custom crawler implementations. 22260.2k](/packages/eliashaeussler-typo3-warming) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)