PHPackages                             unclecheese/silverstripe-page-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. [Utility &amp; Helpers](/categories/utility)
4. /
5. unclecheese/silverstripe-page-gallery

ActiveSilverstripe-module[Utility &amp; Helpers](/categories/utility)

unclecheese/silverstripe-page-gallery
=====================================

Displays screenshots of rendered templates when selecting a page type.

21981[1 issues](https://github.com/unclecheese/silverstripe-page-gallery/issues)PHP

Since May 16Pushed 10y ago1 watchersCompare

[ Source](https://github.com/unclecheese/silverstripe-page-gallery)[ Packagist](https://packagist.org/packages/unclecheese/silverstripe-page-gallery)[ RSS](/packages/unclecheese-silverstripe-page-gallery/feed)WikiDiscussions master Synced 4w ago

READMEChangelogDependenciesVersions (1)Used By (0)

Page Gallery for SilverStripe
=============================

[](#page-gallery-for-silverstripe)

This module makes creating pages in the CMS better. In like, every single way.

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

[](#installation)

`composer require unclecheese/silverstripe-page-gallery`

`cd silverstripe-page-gallery && npm install`

OK, what does it do?
--------------------

[](#ok-what-does-it-do)

When adding a page in the CMS, the user is typically forced to parse a long list of ambiguous, developer-defined PHP class names in order to choose the page type that he or she wants. While the API offers configurations like `$singular_name` and `$description`, it can still be difficult to signal to a content editor exactly what a given page is used for.

I mean, really, `ConferenceEventPricingCategoryHolder`? Don't do me like that, bro.

Stop the madness. Let's just use auto-generated screenshots.

Let's look
----------

[](#lets-look)

[![](images/screenshot.png)](images/screenshot.png)

In addition to providing actual screenshots of each page type, the UI filters out page types that cannot be created in the section. Without this module, all of those page types are interpolated into the list, creating unnecessary visual noise and head-spinniness.

The magic
---------

[](#the-magic)

Just run the task:

`framework/sake dev/tasks/PageGalleryTask`

A simple PhantomJS based library will take it from there.

Excluding pages
---------------

[](#excluding-pages)

So you don't want that `PlainTextPasswordPage` getting a screenshot? Just add it to the `exclude` list.

```
UncleCheese\PageGallery\PageGalleryBuilder:
  exclude:
    - SomePage
```

Specifying the instances of pages you want to get screenshots
-------------------------------------------------------------

[](#specifying-the-instances-of-pages-you-want-to-get-screenshots)

By default, the screenshot task will get the last edited instance of a `SiteTree` object with `ClassName` equal to the page type. For more granular control, use `instance_map`.

```
UncleCheese\PageGallery\PageGalleryBuilder:
  instance_map:
    Page: 'about-us'
    EventPage: 123
```

You can identify an instance by link or by ID.

Full configuration
------------------

[](#full-configuration)

Configure the task:

```
UncleCheese\PageGallery\PageGalleryBuilder:
  # width of the browser taking the screenshot
  screen_width: 1200
  # height of the browser taking the screenshot
  screen_height: 800
  # don't create screenshots for these pages.
  exclude:
    - VirtualPage
    - RedirectorPage
  # If you have a preference on what page gets the screenshot, map it to a link or ID
  instance_map:
    Page: 'about-us'
    EventPage: 123
  # Where the screenshots are saved. Recommend this is in source control
  project_screenshot_dir: 'mysite/images/screenshots'
```

There are also a few settings you can throw at the CMS UI.

```
PageGalleryUI:
  # width of the screenshot in the gallery
  image_width: 300
  # height of the screenshot in the gallery
  image_height: 200
  # When no screenshot exists, use this default image
  default_image: 'silverstripe-page-gallery/images/default.png'
```

Requirements
------------

[](#requirements)

- SilverStripe &gt; 3.1
- [npm](http://npmjs.org)
- The `node` binary must be in your PATH. (Hint: type `node -v` to get the verdict on that. If you get bad news, it's [exceedingly simple](https://docs.npmjs.com/getting-started/installing-node) to rectify)
- The `unclecheese/silverstripe-image-optionset` module. It's new in town.

Open questions
--------------

[](#open-questions)

Cause... talking to myself.

### Where should these screenshots go?

[](#where-should-these-screenshots-go)

I think it makes sense to put them in a source-controlled part of your project, e.g. `mysite/images/screenshots`, but this raises a few questions, particularly around the write permissions on your `mysite/` directory, and the consequences of writing to a source-controlled directory in a non-development environment. `assets/` might make sense in that case, but that has the reverse problem of making it difficult for a developer to generate them locally and move them into staging and production `assets/` directories, because they're typically controlled by the users.

### The screenshot thingy should really be a pluggable service.

[](#the-screenshot-thingy-should-really-be-a-pluggable-service)

Indeed. It would make sense if a dev environment could inject a Node based screenshot grabber, and a staging environment could use a web service like [url2png](http://url2png.com), or what have you. The only issue with using a web service is that staging sites are often behind HTTP Auth.

### If a page doesn't exist in the tree, it kind of gets the shaft.

[](#if-a-page-doesnt-exist-in-the-tree-it-kind-of-gets-the-shaft)

Potentially we could create a temporary one just for the screenshot, fill it with dummy content, then delete it?

Tests
=====

[](#tests)

They exist.

Troubleshooting
===============

[](#troubleshooting)

Ring Uncle Cheese.

###  Health Score

23

—

LowBetter than 26% of packages

Maintenance19

Infrequent updates — may be unmaintained

Popularity18

Limited adoption so far

Community5

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

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/654636?v=4)[Aaron Carlino](/maintainers/unclecheese)[@unclecheese](https://github.com/unclecheese)

### Embed Badge

![Health badge](/badges/unclecheese-silverstripe-page-gallery/health.svg)

```
[![Health](https://phpackages.com/badges/unclecheese-silverstripe-page-gallery/health.svg)](https://phpackages.com/packages/unclecheese-silverstripe-page-gallery)
```

PHPackages © 2026

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