PHPackages                             manu/ux-photoswipe - 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. manu/ux-photoswipe

ActiveSymfony-bundle[Utility & Helpers](/categories/utility)

manu/ux-photoswipe
==================

Photoswipe integration for Symfony

111PHP

Since Apr 10Pushed 5y ago1 watchersCompare

[ Source](https://github.com/mjgr0013/Symfony-UX-Photoswipe)[ Packagist](https://packagist.org/packages/manu/ux-photoswipe)[ RSS](/packages/manu-ux-photoswipe/feed)WikiDiscussions master Synced yesterday

READMEChangelogDependenciesVersions (1)Used By (0)

Symfony UX Photoswipe
=====================

[](#symfony-ux-photoswipe)

Symfony UX Photoswipe is a Symfony bundle integrating the [Photoswipe](https://photoswipe.com/)library in Symfony applications. It is part of [the Symfony UX initiative](https://symfony.com/ux).

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

[](#installation)

Symfony UX Photoswipe requires PHP 7.2+ and Symfony 4.4+.

Install this bundle using Composer and Symfony Flex:

```
composer require symfony/ux-photoswipe

# Don't forget to install the JavaScript dependencies as well and compile
yarn install --force
yarn encore dev
```

Also make sure you have at least version 2.0 of [@symfony/stimulus-bridge](https://github.com/symfony/stimulus-bridge)in your `package.json` file.

Usage
-----

[](#usage)

To use Symfony UX Chart.js, inject the `GalleryBuilderInterface` service and create charts in PHP:

```
// ...
use Symfony\UX\Photoswipe\Builder\GalleryBuilderInterface;
use Symfony\UX\Photoswipe\Model\Gallery;

class HomeController extends AbstractController
{
    /**
     * @Route("/", name="homepage")
     */
    public function index(GalleryBuilderInterface $galleryBuilder): Response
    {
        $images = [];

        for ($i = 0; $i "https://unsplash.it/1200/900/?image={$rand}",
                'src' => "https://unsplash.it/400/300/?image={$rand}",
                'data-caption' => "Sea side, south shore© Dominik Schröder"
            ]);
        }

        /** @var Gallery $gallery */
        $gallery = $galleryBuilder->createGallery();
        $gallery->addOption('arrowKeys', "false");
        $gallery->addOption('bgOpacity', 0.5);

        // Also yo can assign massively options
        $gallery->setOptions([
            'arrowKeys' => "false",
            'bgOpacity' => 0.5
        ]);

        // Also you can combine into single instantiation
        $gallery = $galleryBuilder->createGallery(
            ['arrowKeys' => false, 'bgOpacity' => 0.5],
            'hello'
        );

        foreach ($images as $image) {
            $gallery->addImage(new Image($image['href'], $image['src'],$image['data-caption']));
        }

        return $this->render('home/index.html.twig', [
            'gallery' => $gallery
        ]);
    }
}
```

All options and data are provided as-is to Chart.js. You can read [Photoswipe documentation](https://photoswipe.com/documentation/options.html) to discover them all.

Once created in PHP, a chart can be displayed using Twig:

```
{{ render_gallery(gallery) }}

{# You can pass HTML attributes as a second argument to add them on the  tag #}
{{ render_chart(chart) }}
```

### Extend the default behavior

[](#extend-the-default-behavior)

Symfony UX Photoswipe allows you to extend its default behavior using a custom Stimulus controller:

```
// gallery_controller.js

import { Controller } from 'stimulus';

export default class extends Controller {
    connect() {
        this.element.addEventListener('photoswipe:pre-connect', this._onPreConnect);
        this.element.addEventListener('photoswipe:connect', this._onConnect);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side effects
        this.element.removeEventListener('photoswipe:pre-connect', this._onPreConnect);
        this.element.removeEventListener('photoswipe:connect', this._onConnect);
    }

    _onPreConnect(event) {
        // The chart is not yet created
        console.log(event.detail); // You can access the chart options using the event details

        // Update some options
        event.detail.options.arrowKeys = true;

    }

    _onConnect(event) {
        // The gallery was just created
        console.log(event.detail.gallery); // You can access the gallery instance using the event details
    }
}
```

Then in your render call, add your controller as an HTML attribute:

```
/** @var Gallery $gallery */
$gallery = $galleryBuilder->createGallery([], 'home');
```

Backward Compatibility promise
------------------------------

[](#backward-compatibility-promise)

This bundle aims at following the same Backward Compatibility promise as the Symfony framework:

However it is currently considered [**experimental**](https://symfony.com/doc/current/contributing/code/experimental.html), meaning it is not bound to Symfony's BC policy for the moment.

Run tests
---------

[](#run-tests)

### PHP tests

[](#php-tests)

```
php vendor/bin/simple-phpunit Tests
```

### JavaScript tests

[](#javascript-tests)

```
cd Resources/assets
yarn test
```

###  Health Score

17

—

LowBetter than 6% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity30

Early-stage or recently created project

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.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/8981247?v=4)[Manuel Jesús García Ruiz](/maintainers/mjgr0013)[@mjgr0013](https://github.com/mjgr0013)

### Embed Badge

![Health badge](/badges/manu-ux-photoswipe/health.svg)

```
[![Health](https://phpackages.com/badges/manu-ux-photoswipe/health.svg)](https://phpackages.com/packages/manu-ux-photoswipe)
```

PHPackages © 2026

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