PHPackages rokka/twig - 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. [Templating & Views](/categories/templating) 4. / 5. rokka/twig ActiveTwig-extension[Templating & Views](/categories/templating) rokka/twig ========== Rokka.io twig extension 1.0.2(6mo ago)098.9k↓19.3%11MITPHPPHP ^7.1 || ^8.0 Since Nov 3Pushed 5mo ago2 watchersCompare [ Source](https://github.com/rokka-io/rokka-client-php-twig)[ Packagist](https://packagist.org/packages/rokka/twig)[ Docs](https://github.com/rokka-io/rokka-client-php-twig)[ RSS](/packages/rokka-twig/feed)WikiDiscussions develop Synced 1mo ago READMEChangelog (7)Dependencies (4)Versions (8)Used By (1) rokka/twig ========== [](#rokkatwig) A twig extension to use [rokka](https://rokka.io) related methods in your twig templates. This extension provides filters and functions to translate rokka hashes or image file references into rokka URLs. Some filters operate on rokka URLs to add stack options. When working with file references, this extension can upload image files to rokka as necessary. Uploading on the fly introduces a considerable overhead. If you build a CMS, we recommend to upload images to rokka on creation or in a background process, and use the rokka image hash with the `rokka_generate_url` twig function in the template, to avoid the first rendering taking a performance hit. The main use case for uploading on the fly is static site generators where you pre-render the pages and then deploy the rendered code. Installation ------------ [](#installation) Note: If you use the [Rokka Symfony Bundle](https://github.com/rokka-io/rokka-client-bundle), the twig extension is automatically installed and registered. ``` composer require rokka/twig` ``` Add the following code to your `Twig\Environment` setup: ``` $twig->addExtension(new \Rokka\Twig\Extension\RokkaExtension('your_rokka_organistaion', 'your_api_key')); ``` With these two steps, the rokka filters and functions become available. Usage ----- [](#usage) You specify an image file that is available locally (or through a image locator, see below). The twig extension checks if it knows the rokka hash for that image, and if it does not, uploads the image to rokka and stores the hash. Then it generates the requested URL with the rokka hash. ### Storing and reading hashes [](#storing-and-reading-hashes) By default, the plugin stores a json file next to each image file. If you want to overwrite this behaviour (for example to store hashes in a database), you need to extend the `\Rokka\Client\TemplateHelper\AbstractCallbacks` to implement the desired behaviour and provide an instance of that class to the `RokkaExtension` constructor. Non standard image file locations --------------------------------- [](#non-standard-image-file-locations) You can write your own class to load the source images, for example when they are not in the local file system. Implement the `Rokka\Twig\Resolver\ResolverInterface` to implement your image loading logic and provide an instance of that class to the `RokkaExtension` constructor. Twig filters ------------ [](#twig-filters) The filters are applied to either the path to an image, an SplFileInfo object, a rokka hash or a `Rokka\Client\LocalImage\AbstractLocalImage` instance. The filters need the **stack** that you want to use. Make sure that you defined the stack in rokka before using it. You can force a **format** to have rokka convert your image to the desired format. Most filters accept an seo string and the seo language. The language is used to transliterate the seo string into a URL safe string (e.g. for german, change ä to ae or for french change é to e). ### rokka\_stack\_url: create an image URL for rokka with the desired stack [](#rokka_stack_url-create-an-image-url-for-rokka-with-the-desired-stack) `rokka_stack_url(stack, format = "jpg", seo = null, seoLanguage = "de")` Example: ``` {{ '/path/to/image' | rokka_stack_url('preview', seo='my-seo-image-url-fragment', seoLanguage = 'fr') }} ``` Example output: `https://my-org.rokka.io/preview/123abcde/my-seo-image-url-fragment.jpg` ### rokka\_original\_size\_url: create an image URL for rokka that outputs the original size [](#rokka_original_size_url-create-an-image-url-for-rokka-that-outputs-the-original-size) `rokka_original_size_url(format = "jpg", seo = null, seoLanguage = "de")` The image will be in its original size, but optimized, compressed and delivered through the CDN of rokka. ### rokka\_resize\_url: create an image URL for rokka with the dynamic stack to scale the image [](#rokka_resize_url-create-an-image-url-for-rokka-with-the-dynamic-stack-to-scale-the-image) `rokka_resize_url(width, height = null, format = "jpg", seo = null, seoLanguage = "de")` The dynamic stack will make sure that the image is no wider than `width` and no higher than `height`. ### rokka\_resizecrop\_url: create an image URL for rokka with the dynamic stack to scale and crop the image [](#rokka_resizecrop_url-create-an-image-url-for-rokka-with-the-dynamic-stack-to-scale-and-crop-the-image) `rokka_resizecrop_url(width, height, format = "jpg", seo = null, seoLanguage = "de")` Similar to resize, but makes sure that the image always has the dimensions width and height. If the aspect ratio of the image does not fit, the longer side is cropped to fit into the dimensions. ### rokka\_add\_options: change a rokka URL to add options [](#rokka_add_options-change-a-rokka-url-to-add-options) `rokka_add_options(options)` This allows you to configure a stack on the fly and set [stack options and variables](https://rokka.io/documentation/references/stacks.html#expressions-in-stack-operation-options). Example: ``` {{ '/path/to/image' | rokka_stack_url('preview') | rokka_add_options('options-jpg.quality-80') }} {{ '/path/to/image' | rokka_stack_url('preview') | rokka_add_options('resize-width-200') }} {{ '/path/to/image' | rokka_stack_url('preview') | rokka_add_options('resize-width-200--options-jpg.quality-80') }} ``` ### rokka\_src\_attributes: change a rokka URL into a css fragment for retina images for css [](#rokka_src_attributes-change-a-rokka-url-into-a-css-fragment-for-retina-images-for-css) `rokka_src_attributes(multipliers = [2])` Example: ``` {{ '/path/to/image' | rokka_stack_url('large') | rokka_src_attributes }} ``` Example output: `background-image:url('https://liip.rokka.io/stack/imagehash.jpg'); background-image: -webkit-image-set(url('https://liip.rokka.io/stack/imagehash.jpg') 1x, url('https://liip.rokka.io/stack/options-dpr-2/imagehash.jpg') 2x);` ### rokka\_background\_image\_style: change a rokka URL into the HTML image tag fragments for retina [](#rokka_background_image_style-change-a-rokka-url-into-the-html-image-tag-fragments-for-retina) `rokka_background_image_style(multipliers = [2])` Example: ``` {{ '/path/to/image' | rokka_stack_url('large') | rokka_background_image_style }} ``` Example output: `src="https://org.rokka.org/stack/imagehash.jpg" srcset="https://org.rokka.org/stack/options-dpr-2/imagehash.jpg"` Twig functions -------------- [](#twig-functions) `rokka_generate_url(hash, stack, format = "jpg", seo = null, seoLanguage = "de")` Output: A rokka URL for the specified image hash and stack, with the "seo"-filename, if specified. Development =========== [](#development) Running PHP-CS-Fixer -------------------- [](#running-php-cs-fixer) ``` composer cs:fix ``` Running phpstan --------------- [](#running-phpstan) ``` composer phpstan ``` ### Health Score 51 — FairBetter than 96% of packages Maintenance70 Regular maintenance activity Popularity31 Limited adoption so far Community16 Small or concentrated contributor base Maturity73 Established project with proven stability Bus Factor1 Top contributor holds 81.8% 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 ~488 days Recently: every ~691 days Total 7 Last Release 189d ago Major Versions 0.0.4 → 1.0.02021-03-11 PHP version history (3 changes)0.0.1PHP ^7.0 0.0.2PHP ^5.6 || ^7.0 1.0.0PHP ^7.1 || ^8.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/803a02308898d7176ad6601cc9f1bc9b057a725d5b35f6c0c54995b02a97a977?d=identicon)[rokka](/maintainers/rokka) ![](https://www.gravatar.com/avatar/04293348c41a664329fc652b5885ec3c073e8cca5ab159312eab2a6e8983bcd5?d=identicon)[chregu](/maintainers/chregu) --- Top Contributors [![chregu](https://avatars.githubusercontent.com/u/47106?v=4)](https://github.com/chregu "chregu (36 commits)")[![dbu](https://avatars.githubusercontent.com/u/76576?v=4)](https://github.com/dbu "dbu (5 commits)")[![mms-uret](https://avatars.githubusercontent.com/u/900354?v=4)](https://github.com/mms-uret "mms-uret (3 commits)") --- Tags twigimageimagestwig-extensionrokkarokka.ioimagemanipulation ### Code Quality Static AnalysisPHPStan Code StylePHP CS Fixer Type Coverage Yes ### Embed Badge ![Health badge](/badges/rokka-twig/health.svg) ``` [![Health](https://phpackages.com/badges/rokka-twig/health.svg)](https://phpackages.com/packages/rokka-twig) ``` ### Alternatives [bluetel-solutions/twig-truncate-extension Twig Extension to truncate nested HTML, safely! 11100.0k](/packages/bluetel-solutions-twig-truncate-extension)[umanit/twig-image-extension An extension to facilitate the integration of responsive images' markup in Twig templates. 1042.2k](/packages/umanit-twig-image-extension) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)