PHPackages oliverthiele/ot-irrebuttons - 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. [Utility & Helpers](/categories/utility) 4. / 5. oliverthiele/ot-irrebuttons ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility) oliverthiele/ot-irrebuttons =========================== IRRE Buttons - Adds buttons to content elements with IRRE v5.0.0(2w ago)04616GPL-2.0-or-laterPHPPHP >=8.4 Since Dec 11Pushed 2w ago2 watchersCompare [ Source](https://github.com/oliverthiele/ot-irrebuttons)[ Packagist](https://packagist.org/packages/oliverthiele/ot-irrebuttons)[ Docs](https://typo3.org)[ RSS](/packages/oliverthiele-ot-irrebuttons/feed)WikiDiscussions main Synced 2w ago READMEChangelogDependencies (10)Versions (23)Used By (6) IRRE Buttons — Adds manageable buttons to TYPO3 content elements ================================================================ [](#irre-buttons--adds-manageable-buttons-to-typo3-content-elements) Extends `tt_content` with IRRE-managed button records — buttons are configured directly in the backend without touching the RTE. [![TYPO3](https://camo.githubusercontent.com/309a8731f095ee93250b88cfa7d6fbc4e3ed3917cf6b981716e6fd068831654f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5459504f332d31342e332d6f72616e67652e737667)](https://typo3.org/)[![Packagist Version](https://camo.githubusercontent.com/6ae076389ce244e3ab583a506c1589b0a687725962aacb6bf9d8ef62afdbe0c6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f6c69766572746869656c652f6f742d69727265627574746f6e732e737667)](https://packagist.org/packages/oliverthiele/ot-irrebuttons)[![PHP](https://camo.githubusercontent.com/ec2c1acb9f42a236bb9688e4203989a8992acc1a367c69d02b0c0109595c8cda/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646570656e64656e63792d762f6f6c69766572746869656c652f6f742d69727265627574746f6e732f7068702e737667)](https://php.net/)[![License](https://camo.githubusercontent.com/27b3c19092b474630bd3d6e99a7a4f7055a18bf487ccee81473e7397a7dd1c1c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6f6c69766572746869656c652f6f742d69727265627574746f6e732e737667)](LICENSE)[![Changelog](https://camo.githubusercontent.com/6bc02a7bc61afc1cb3faaa53420df6d904b9940d7f3e2e11a463e1fdbb3cd52d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4368616e67656c6f672d4348414e47454c4f472e6d642d626c75652e737667)](CHANGELOG.md) Features -------- [](#features) - Buttons are managed as IRRE child records — no RTE markup required - Central control over button layout (style, size, position) - Optional icon support via a configurable list of icon identifiers - Visual icon selector with search, SVG preview and favourites when [ot\_iconselector](https://packagist.org/packages/oliverthiele/ot-iconselector)is installed - Icon partial can be overridden per project (Bootstrap Icons, FontAwesome, SVG sprites, …) - Configurable per CType via extension settings - Fancybox lightbox link types — Ajax for internal pages, iFrame for external links or pages that need their own CSS/JS - Compatible with TYPO3 content Slide (records from parent pages render correctly) - SiteSet support via `sitekit.frameworks.frontend.directory` Requirements ------------ [](#requirements) DependencyVersionTYPO3^14.3PHP>=8.4Installation ------------ [](#installation) ``` composer require oliverthiele/ot-irrebuttons ``` Configuration ------------- [](#configuration) ### Extension Settings [](#extension-settings) Open **Admin Tools → Settings → Extension Configuration → ot\_irrebuttons**. SettingDescriptionCTypes with IRRE ButtonsComma-separated list of CTypes that show the buttonsIconsComma-separated list of icon identifiers offered in the `Icon` field (not used when `ot_iconselector` is installed — see [Icon Selector](#icon-selector-optional) below)Path to directory with iconsDirectory holding the SVG files for the backend preview of the above identifiers, e.g. `EXT:my_sitepackage/Resources/Public/Icons/solid/`Lightbox link typesComma-separated list of `lightbox`/`lightboxIframe` options to offer (empty hides the field — see [Lightbox link types](#lightbox-link-types-ajax--iframe) below)For each configured CType the corresponding Fluid template from `EXT:fluid_styled_content` must be overridden in your SitePackage. A ready-to-use example is included for CType `text`. ### TypoScript / SiteSet [](#typoscript--siteset) The extension ships a SiteSet (`OtIrrebuttons`). Include it as a dependency in your site's SiteSet configuration — no manual TypoScript include required. The template path constant `sitekit.frameworks.frontend.directory` (default: `Bootstrap5`) is provided by the SiteSet. Change the value in your site configuration if your project uses a different frontend framework directory. > The legacy constant `projectSettings.framework.directory` is still evaluated for backwards compatibility with installations that do not use SiteSets. ### Lightbox link types (Ajax / iFrame) [](#lightbox-link-types-ajax--iframe) The `link_type` field's `lightbox` and `lightboxIframe` options open the linked target in a [Fancybox](https://fancyapps.com/fancybox/) lightbox instead of navigating to it: `link_type``t3://page?uid=...` (internal)`http(s)://...` (external)file / `mailto:` / `tel:``lightbox`AjaxiFrameplain link (no lightbox)`lightboxIframe`iFrameiFrameplain link (no lightbox)**Prefer Ajax for internal pages.** An iFrame is a separate browsing context — the surrounding page cannot read its content height, so the iFrame needs the fixed `height: 80vh` from the SCSS below and keeps that height even when the content only fills a fraction of it. Ajax content is injected into the parent document, where `max-height: 80vh` lets the lightbox shrink to the actual content height. Use `lightboxIframe` only when the target page needs its own CSS/JS that the Ajax route does not load. Both options depend on infrastructure the extension does **not** provide — set this up once per site before enabling `lightboxTypes`(see [Extension Settings](#extension-settings)): 1. **Route enhancer** — map two page-type suffixes in your site's `config/sites/{site}/config.yaml`: ``` routeEnhancers: PageTypeSuffix: type: PageType default: '' index: index map: content.html: 112234 ajax.html: 112235 ``` The typeNum values are free to choose as long as they don't collide with existing ones — just keep them consistent with the `PAGE` objects below. 2. **TypoScript `PAGE` objects** — in your SitePackage (`EXT:my_sitepackage`), define one `PAGE` object per typeNum that renders the requested page's `colPos=0` content in isolation: ``` # Full document with CSS/JS, no header/footer — used by lightboxIframe pageLightboxIframe = PAGE pageLightboxIframe { typeNum = 112234 config { admPanel = 0 debug = 0 linkVars := removeFromList(type) } headerData > includeCSS { myProject = EXT:my_sitepackage/Resources/Public/Assets/Styles/Main.css } includeJSFooter { myProject = EXT:my_sitepackage/Resources/Public/Assets/JavaScript/Main.js } 10 = FLUIDTEMPLATE 10 { templateName = Iframe templateRootPaths.10 = EXT:my_sitepackage/Resources/Private/PageView/Pages/ variables { content0 = CONTENT content0 { table = tt_content select { where = {#colPos}=0 orderBy = sorting } } } } 20 > } # Raw content only, no CSS/JS/head/body — used by lightbox (Ajax) pageLightboxAjax = PAGE pageLightboxAjax { typeNum = 112235 config { disableAllHeaderCode = 1 admPanel = 0 debug = 0 linkVars := removeFromList(type) } 10 = FLUIDTEMPLATE 10 { templateName = Ajax templateRootPaths.10 = EXT:my_sitepackage/Resources/Private/PageView/Pages/ variables { content0 = CONTENT content0 { table = tt_content select { where = {#colPos}=0 orderBy = sorting } } } } } ``` Keep `linkVars := removeFromList(type)` on both objects. Without it, every link generated *from inside* the lightbox content (e.g. a normal editorial link in a privacy-policy text) would inherit the current typeNum and silently open as another bare Ajax/content-only fragment instead of a normal page. 3. **Fluid templates** — `Iframe` outputs `{content0}`. `Ajax` must not include a surrounding ``/``/`` (its output is injected into an existing page via Ajax, not loaded as a standalone document) and must wrap `{content0}` in `…` — the scroll-height cap in the SCSS below targets that wrapper. In **both** templates, wrap `{content0}` in a `container` — Bootstrap rows carry negative side margins (`-.5 * $gutter-x`) that are meant to be absorbed by a container's padding. Without one, every row overflows its parent by that amount and the lightbox shows a spurious horizontal scrollbar: ``` {content0 -> f:format.raw()} {content0 -> f:format.raw()} ``` Use `container` instead of `container-fluid` if the lightbox content should follow the same max-widths as a regular page. 4. **Frontend JS** — bind Fancybox once for `[data-fancybox]`, e.g.: ``` import {Fancybox} from "@fancyapps/ui/dist/fancybox/fancybox.js"; Fancybox.bind("[data-fancybox]"); ``` 5. **SCSS** — Fancybox v6 does not cap the popup size on its own; without this it fills the full viewport instead of reading as a lightbox (assumes Bootstrap 5, for `$container-max-widths` / `media-breakpoint-up`): ``` .has-iframe .f-html, .has-ajax .f-html { @include media-breakpoint-up(sm) { max-width: map-get($container-max-widths, sm); } @include media-breakpoint-up(md) { max-width: map-get($container-max-widths, md); } @include media-breakpoint-up(lg) { max-width: map-get($container-max-widths, lg); } @include media-breakpoint-up(xl) { max-width: map-get($container-max-widths, xl); } @include media-breakpoint-up(xxl) { max-width: map-get($container-max-widths, xxl); } } .has-iframe .f-html { height: auto; iframe { height: 80vh; max-height: 80vh; } } .has-ajax .f-html .lightbox-ajax-scroll { max-height: 80vh; overflow-y: auto; } ``` If this setup is not in place, leave `lightboxTypes` empty — the `link_type`field is then omitted from the editing form entirely. ### Icon Partial [](#icon-partial) The shipped partial `Partials/Icon.html` receives the stored identifier as `{iconIdentifier}` and renders it as a [Bootstrap Icons](https://icons.getbootstrap.com/)element: ``` ``` This is a placeholder — override it in your SitePackage to match your icon set (FontAwesome, an SVG sprite, the `ot_icons` ViewHelper, …). The extension registers its own partial path at index `15`, so any higher index wins: ``` lib.contentElement { partialRootPaths { 40 = EXT:my_sitepackage/Resources/Private/Content/Partials/ } } ``` Your override must provide a `Main` section, since the partial is rendered with ``. Using `ot_icons`, for example: ``` ``` ### Icon Selector (optional) [](#icon-selector-optional) Without further dependencies the `Icon` field is a select box filled from the `Icons` extension setting (see [Extension Settings](#extension-settings)), with the backend preview icons taken from `Path to directory with icons`. If `oliverthiele/ot-iconselector` is installed, the field is rendered as a visual selector instead: search with live SVG preview across the whole icon directory configured in the site setting `otIcons.iconDirectory`. The `Icons`and `Path to directory with icons` extension settings are then no longer used for this field — every icon of the directory becomes selectable. Frequently used button icons can be pre-selected for editors via the site setting `otIconselector.favorites.buttons` (comma-separated list of icon identifiers). If it is empty, `otIconselector.favorites.default` is used: ``` settings: otIconselector: favorites: buttons: 'chevron-right,download,file-pdf,arrow-up-right-from-square' ``` Stored values are plain icon identifiers in both cases, so the `Icon` partial and existing records work unchanged. **Requires a resolvable icon directory.** If `otIcons.iconDirectory` is empty or points to a directory that does not exist, the selector could never return a result — the `Icon` and `Icon Position` fields are therefore hidden instead of showing a widget that stays empty. Set the site setting (normally provided by [ot\_icons](https://packagist.org/packages/oliverthiele/ot-icons)) to make them reappear: ``` settings: otIcons: iconDirectory: 'EXT:my_sitepackage/Resources/Public/Icons/' ``` The directory is expected to hold one subdirectory per icon style (`solid/`, `regular/`, …, plus an optional `brands/`), matching what the selector searches. Usage ----- [](#usage) Add the following snippet to any Fluid template where buttons should appear: ``` ``` The variable `irreButtons` is populated automatically by the included DataProcessor for every CType listed in the extension settings. License / Author ---------------- [](#license--author) GPL-2.0-or-later © [Oliver Thiele](https://www.oliver-thiele.de) ### Health Score 53 — FairBetter than 96% of packages Maintenance96 Actively maintained with recent releases Popularity16 Limited adoption so far Community18 Small or concentrated contributor base Maturity70 Established project with proven stability Bus Factor1 Top contributor holds 100% 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 ~48 days Recently: every ~24 days Total 21 Last Release 19d ago Major Versions 1.0.1 → 2.0.02024-03-24 2.0.1 → 3.0.12025-01-22 v3.2.9 → v4.0.02026-04-25 v4.1.0 → v5.0.02026-07-31 PHP version history (4 changes)1.0.1PHP >=7.4 2.0.0PHP >=8.1 v4.0.0PHP >=8.3 v5.0.0PHP >=8.4 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/5030298?v=4)[Oliver Thiele](/maintainers/oliverthiele)[@oliverthiele](https://github.com/oliverthiele) --- Top Contributors [![oliverthiele](https://avatars.githubusercontent.com/u/5030298?v=4)](https://github.com/oliverthiele "oliverthiele (74 commits)") ### Embed Badge ![Health badge](/badges/oliverthiele-ot-irrebuttons/health.svg) ``` [![Health](https://phpackages.com/badges/oliverthiele-ot-irrebuttons/health.svg)](https://phpackages.com/packages/oliverthiele-ot-irrebuttons) ``` ### Alternatives [friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103574.3k70](/packages/friendsoftypo3-content-blocks)[typo3/cms-styleguide TYPO3 extension to showcase TYPO3 Backend capabilities 105768.9k39](/packages/typo3-cms-styleguide)[wazum/sluggi TYPO3 extension for URL slug management with inline editing, auto-sync, locking, access control, and redirects 40543.5k](/packages/wazum-sluggi)[typo3/cms-install TYPO3 CMS Install Tool - The Install Tool is used for installation, upgrade, system administration and setup tasks. 1812.5M579](/packages/typo3-cms-install)[typo3/cms-rte-ckeditor TYPO3 CMS RTE CKEditor - Integration of CKEditor as a Rich Text Editor for the TYPO3 backend. 199.5M265](/packages/typo3-cms-rte-ckeditor)[typo3/cms-redirects TYPO3 CMS Redirects - Create manual redirects, list existing redirects and automatically createredirects on slug changes. 167.6M84](/packages/typo3-cms-redirects) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)