PHPackages                             liquidlight/typo3-media-gallery - 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. liquidlight/typo3-media-gallery

ActiveTypo3-cms-extension[Image & Media](/categories/media)

liquidlight/typo3-media-gallery
===============================

Advanced multi-engine front-end gallery component

2.1.0(9mo ago)02.4k↑150%[1 PRs](https://github.com/liquidlight/typo3-media-gallery/pulls)PHP

Since Jan 22Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/liquidlight/typo3-media-gallery)[ Packagist](https://packagist.org/packages/liquidlight/typo3-media-gallery)[ RSS](/packages/liquidlight-typo3-media-gallery/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (1)Versions (9)Used By (0)

TYPO3 Media Gallery
===================

[](#typo3-media-gallery)

A plugin to show images or content with a list of different engines to display.

Installation
------------

[](#installation)

1. `composer req liquidlight/typo3-media-gallery`
2. Include the TypoScript, either by using static includes or including the files yourself
    - Constants: `@import 'EXT:media_gallery/Configuration/TypoScript/constants'`
    - Setup: `@import 'EXT:media_gallery/Configuration/TypoScript/setup'`
3. Add a new Media or Content gallery to a page & select images (or content)
4. Pick your engine (library) or add your own
5. Allow the following permissions (if required)
    - **Tables (listing)**: File collection
    - **Tables (modify)**: File collection
    - **Page Content**: File collections
    - **Page Content: Type**: \[Allow\] Media Gallery

Engines
-------

[](#engines)

Throughout this extension you will see and interact with the word "engine". This describes the library/package used to render the images. Examples of engines are Fancybox and Swiper. There is also an Ajax and Basic engine included which, by default, adds no extra CSS or JavaScript.

Configuration
-------------

[](#configuration)

Media Gallery comes bundled with several libraries included, which can all be configured via the `$GLOBALS` array to alter their behaviour. You also have the option of adding your own media gallery engine if desired.

### Remove assets of an existing engine

[](#remove-assets-of-an-existing-engine)

If an existing or added engine includes assets which you, yourself, are bundling in your site package or FE assets, you can remove assets in various ways.

You can add the following to your `ext_localconf.php`:

- `$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['media_gallery']['engines']['fancybox']['excludeAllAssets'] = true` - This removes **all** assets added by the engine
- `$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['media_gallery']['engines']['fancybox']['excludeAssets'] = true` - This removes `stylesheet` and `javascript` assets added to the document
- `$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['media_gallery']['engines']['fancybox']['excludeInlineAssets'] = true` - This removes any inline assets

Alternatively, you can `unset()` a specific item - e.g.:

```
unset($GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['media_gallery']['engines']['fancybox']['styleSheet']);
```

### Remove an engine

[](#remove-an-engine)

It might be that you don't want some (or any) of the default engines to be available. In which case, you can unset the entire engine.

For example, to remove the base & carousel engines:

```
unset($GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['media_gallery']['engines']['basic']);
unset($GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['media_gallery']['engines']['carousel']);
```

### Add an engine

[](#add-an-engine)

Engines are set via `$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['media_gallery']['engines']` and appended to the array.

The key should be a simple/slugified version of the engine/plugin. This allows unsetting and overriding should that be required.

The array can have several keys to add assets & define settings - all of them optional. See below for an explanation of the assets.

#### Adding a new engine

[](#adding-a-new-engine)

```
$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['media_gallery']['engines']['engine_key'] = [
    'title' => 'Nice title - shown in the drop down',
    'template' => 'Engine', // The name of the partial used (can be omitted to use the "Basic" one)
    'styleSheet' => '', // CSS to load
    'javaScript' => '', // Load JS
    'inlineStyleSheet' => '', // Any inline CSS
    'inlineJavaScript' => '', // Any inline JS
];
```

#### Assets

[](#assets)

The 4 asset keys (`styleSheet`, `javaScript`, `inlineStyleSheet`, `inlineJavaScript`) allow you to load assets when the particular engine is loaded. Each one can take a string or a (multi-dimensional) array and is passed to the TYPO3 `AssetCollector` ([docs](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/Assets/Index.html#asset-collector)).

Most of the time, the string will be enough, however there may be times where you need to set the priority or add data attributes.

This applies to all 4 assets, but as an example, the CSS can be formatted in 3 different ways:

**As a string**

```
'styleSheet' => 'https://www.site.com/path/to/css.css'
```

**As an array**

```
'styleSheet' => [
    'https://www.site.com/path/to/css.css',
    'https://www.differentsite.com/path/to/css.css',
]
```

**As a multidimensional array**

This allows you to set attributes and options as you would if using the `AssetCollector` directly

```
'styleSheet' => [
    [
        'https://www.site.com/path/to/css.css',
        ['data-foo' => 'bar'], // $attributes
        ['priority' => true], // $options
    ]
]
```

Templates
---------

[](#templates)

If you wish to override any [templates](/Resources/Private/Templates/) or [partials](/Resources/Private/Partials/), add the following to your `constants.typoscript`.

```
site {
	fluidtemplate {
		media_gallery {
			partialRootPath = EXT:###YOUR EXT###/Resources/Private/Partials/MediaGallery/
			templateRootPath = EXT:###YOUR EXT###/Resources/Private/Templates/MediaGallery/
		}
	}
}

```

Alternatively, you can add them directly to the [`setup.typoscript`](/Configuration/TypoScript/setup.typoscript)

**Note**: The custom `` view helper is how the assets are injected into the template - ensure your template contains this if overriding the `Gallery.html`

###  Health Score

39

—

LowBetter than 86% of packages

Maintenance73

Regular maintenance activity

Popularity21

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity43

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 80.4% 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 ~37 days

Recently: every ~46 days

Total

6

Last Release

288d ago

Major Versions

1.1.0 → 2.0.02025-03-21

1.2.0 → 2.1.02025-07-28

### Community

Maintainers

![](https://www.gravatar.com/avatar/558888281785ab32c8d72adc6a674a24cb4fef8cc6e115936e41a3f9cdb8de64?d=identicon)[liquidlightuk](/maintainers/liquidlightuk)

![](https://www.gravatar.com/avatar/5a6959c451868af51c41ce566f214bd9ea973046b8a0e9a795cd964ea507f70f?d=identicon)[mikestreety](/maintainers/mikestreety)

---

Top Contributors

[![mikestreety](https://avatars.githubusercontent.com/u/354085?v=4)](https://github.com/mikestreety "mikestreety (41 commits)")[![joaoliquidlight](https://avatars.githubusercontent.com/u/105639732?v=4)](https://github.com/joaoliquidlight "joaoliquidlight (10 commits)")

---

Tags

phptypo3typo3-extension

### Embed Badge

![Health badge](/badges/liquidlight-typo3-media-gallery/health.svg)

```
[![Health](https://phpackages.com/badges/liquidlight-typo3-media-gallery/health.svg)](https://phpackages.com/packages/liquidlight-typo3-media-gallery)
```

###  Alternatives

[netresearch/rte-ckeditor-image

Image support in CKEditor for the TYPO3 ecosystem - by Netresearch

63991.3k4](/packages/netresearch-rte-ckeditor-image)[christophlehmann/imageoptimizer

Optimize uploaded/processed images with binaries of your choice

46501.8k](/packages/christophlehmann-imageoptimizer)[plan2net/webp

Creates WebP copies for images (TYPO3 CMS)

661.4M3](/packages/plan2net-webp)[sitegeist/sms-responsive-images

Provides ViewHelpers and configuration to render valid responsive images based on TYPO3's image cropping tool.

34493.1k2](/packages/sitegeist-sms-responsive-images)[lochmueller/focuspoint

Focuspoint integrate the focal point method to crop images in the frontend of the web page. Use the jQuery-focuspoint plugin (https://github.com/jonom/jquery-focuspoint example http://jonom.github.io/jquery-focuspoint/demos/helper/index.html) to crop the images. Use the function as wizard in the file list view and directly in the content element.

23179.1k](/packages/lochmueller-focuspoint)[smichaelsen/melon-images

Responsive Image Management

2489.3k](/packages/smichaelsen-melon-images)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)