November Gallery Cookbook

A gallery plugin for OctoberCMS that tries to Keep It Simple and Stupid. 1. Upload your images using the Media Manager built into OctoberCMS 2. Drop November Gallery onto your page or partial 3. Select the folder you uploaded your images to and how you want them displayed


The idea for this plugin came about while building my girlfriend's photography website. I wanted to implement an easy to use gallery that could mimic how sites like PixieSet display images - so basically how Masonry does it. I also wanted to just use the OctoberCMS media manager to upload my images, I didn't want to use a separate backend page for that. I checked out all of the current gallery plugins available for OctoberCMS and none of them hit the mark.

So, I found UniteGallery.js, and integrated that with a simple PHP function to cycle through all of the images uploaded into a folder using media manager - I actually have a blog article on how I did this.

Well, as I built more and more websites with OctoberCMS, I started working on a dedicated plugin to help me out. And here we are, with a working "November Gallery" plugin that (currently) supports two "visualization engines", UniteGallery JS and Swiper

I hope you find it as useful as I do!

I would like to ask you for one favor. I've worked long and hard to make this available for you, and you are welcome to use it for free for non-commercial purposes (there is also a paid "Professional" version). If you have any issues, please don't leave a review if you don't think this is a five-star product. Reach out to me first by raising an issue on github, or by adding a comment to this page. Give me a few days to respond - I may get busy with other stuff but I will get back to you. Thank you!

This plugin is available in two editions:

  1. The Personal Edition is a free plugin meant for non-profit use, such as:
    1. Building a personal website that is not offering a product or services for sale
    2. Academic use
    3. Use by non-profit organizations
  2. The Pro Edition is meant for commercial use, such as:
    1. A website selling or promoting products or services
    2. Use by a for-profit organization

In terms of functionality, the two plugins are identical. November Gallery Pro is available from the OctoberCMS Marketplace. The Personal Edition is available from GitHub. You will need to install it yourself - follow the README on the GitHub project page.

Be among the first 10 to purchase the plugin on the October marketplace and use code FIRST10 to get 10% off!

Want more? Get 40% off by being among the first 10 to answer my riddle. 

One of my favorite photographers had a famous anecdote about driving along a highway with his two assistants after a long and not particularly successful day of photography. It was dusk and he was driving fast when suddenly he realized that a perfect photographic moment was approaching. He quickly pulled over and set up his gear - but in the rush he couldn't find his light meter. Knowing that he has mere seconds to get it right he decided to calculate the exposure using a system that he had developed with a friend, a system that photographers use even today to help anticipate the final results of their shot. He had one point of reference that he was sure of: the moon. Knowing the brightness of the moon he quickly calculated the correct exposure and took the shot. Considering that the moment truly was special, he tried to flip his film over to take the second shot but by then the light was gone. 

So my riddle is: what is the name of the community where he took this iconic photograph? Enter it in all capital letters when purchasing the plugin to get the discount :-)

Offer expires November 30th, 2019. Limit 1 coupon per customer.

What is November Gallery?


For rendering your galleries, November Gallery provides you with various options, but it makes use of two JS libraries to do so. The various components it makes available to you really just help with configuring how the JS scripts are run so that you get a "swiper" or a "popup" gallery etc. You do not have to understand how these JS libraries work, but reading about the available configuration options will enable you to customize your galleries further than if you just use the options available through the November Gallery component property pages. 

Use the Embedded Gallery for fix-size galleries or for showing clickable thumbnails arranged as tiles


The Swiper Component

This makes use of Swiper. Use it to create a modern, responsive "swiper" that can be controlled easily from any device. Note that you can control any of the galleries by touch (or click-and-swipe using a mouse). Various transitions are available: "fade", "slide", "flip", "cube", etc..

The Swiper Component is really geared towards responsive galleries because by default it fills whatever container it is in. 

The Popup Lightbox Component

This makes use of a custom UniteGallery JS theme. Use it to create a pop-up lightbox of images that can be opened from a link or button (or any other clickable component) on the page. Two styles are available: "Wide" and "Compact".

Again, this makes use of UniteGallery JS. Use it to display videos inline. You can choose to upload your videos to your website or to show videos hosted on YouTube/Vimeo/Wistia.

Image List Only Component

Well, I probably could have given this component a better name. This component only loads the list of image files into a page variable, without rendering a gallery. Use this if you wish to write your own code for displaying the images, or if you wish to make use of some other JS library to render them.

Where to now?

The other pages in this book guide you in using the gallery. You also have several other resources available:



Installation / Deployment

Note: You must have a {% styles %} and {% scripts %} tag in your page header/footer so that the plugin can inject the required assets.

    {% styles %}
    {% scripts %}

For more information see the OctoberCMS docs!


OctoberCMS v2.x: you will have to first purchase the plugin from the Marketplace, and then run the following on your server as described in the docs:

php artisan project:sync

You can also manually install and/or update the plugin, but this will only work if you've previously purchased a license:

composer require zenware/novembergallery-plugins
composer update zenware/novembergallery-plugins
php artisan october:migrate

OctoberCMS v1.x / WinterCMS: To install from your site “backend”: go to Settings → Updates & Plugins → Install Plugins and then search for “November Gallery”. Or, add it to your project from the Marketplace, and then from the backend area of your site click the Check for updates button on the Settings → Updates & Plugins page to pull in the plugin.

To install from the repository (not recommended), you’d have to first install the imageresizer plugin.

Here’s an actual (abridged) transcript of an installation into a fresh install of October (all commands for Ubuntu, make sure adjust to your environment):

USER@SERVER:/var/www/ sudo git clone plugins/toughdeveloper/imageresizer
Cloning into 'plugins/toughdeveloper/imageresizer'...
USER@SERVER:/var/www/ sudo git clone plugins/zenware/novembergallery
Cloning into 'plugins/zenware/novembergallery'...
USER@SERVER:/var/www/ sudo chown -R www-data:www-data plugins/toughdeveloper/
USER@SERVER:/var/www/ sudo chown -R www-data:www-data plugins/zenware/
USER@SERVER:/var/www/ sudo -u www-data php artisan plugin:refresh toughdeveloper.imageresizer
Rolled back: ToughDeveloper.ImageResizer
Reinstalling plugin...
USER@SERVER:/var/www/ sudo -u www-data php artisan plugin:refresh zenware.novembergallery
Rolled back: ZenWare.NovemberGallery
Reinstalling plugin...
- v1.0.1:  First version of NovemberGallery

You can also install the image resizer plugin if you wish to use that for thumbnail generation, for that you can run sudo -u www-data git clone plugins/toughdeveloper/imageresizer and sudo -u www-data php artisan plugin:refresh toughdeveloper.imageresizer.


OctoberCMS v2.x: 

You will have to use the command line to update the plugin:

composer require zenware/novembergallery-plugins
composer update zenware/novembergallery-plugins
php artisan october:migrate


OctoberCMS v1.x / WinterCMS:

For plugins installed from the marketplace, you can just do **Settings → Updates & Plugins → Check for Updates.

For plugin installed manually, you can run the following from your project root directory:

USER@SERVER:/var/www/vhost/public_html# sudo -u www-data git -C plugins/zenware/novembergallery/ pull 
remote: Enumerating objects: 14, done. 
USER@SERVER:/var/www/vhost/public_html# sudo -u www-data php artisan october:up 
ZenWare.NovemberGallery - v1.0.4: Extend Rainlab Blog integration with support for images in media folders ...

Backend Plugin Configuration

Log into your “backend” and go to Settings → November Gallery to configure your defaults. Things to look out for:

Uploading Images

You have two options for uploading your images, each with different benefits:

Hint: The dedicated back-end November Gallery management page gives you more options for giving your images titles and subtitles, and you can also arrange the order easily; on the other hand, if you ever end up deleting the plugin, October will also delete all of your albums created there. Use the October built-in Media Manager to upload your images if you don't need the extra features provided by the November Gallery management page. Going the Media Manager route also allows you to upload hundreds of images using an FTP client or other file manager; this is not possible through the Gallery page.

Although the plugin will automatically generate thumbnails of your pictures, the full-size images will be displayed as-is. Therefore, it's a good idea to resize all of your pictures before uploading them to the gallery. A plethora of free options exist to help you with that, we ♥ FastStone Image Viewer (Windows), Fast Image Resizer (Windows), and Image Resizer for Windows. I'm sure there are great options for Mac as well - but watch a little Louis Rossmann to understand why Macs are evil so if you're on a Mac I'm sorry but I can't help you :-(

A typical screen resolution nowadays is around 1920 x 1680 pixels - so if you're looking to allow your users to see your pictures in top quality full-screen, then resize them to fit within these constraints.

Also, make sure that your photos are in a format that web browsers understand, such as .jpg or .png, or .gif (the latter is more suitable for graphics with fewer colors and geometric lines, such as charts or icons).

Finally, upload your pictures using the "Gallery" admin area, or through the October Media manager into the folders you created earlier.


1) Create Galleries in the "Galleries" Area

When you install November Gallery, it creates a new section in your site back-end. The "Galleries" page is fairly self-explanatory: you can create new galleries, and upload images into existing ones.

Click on any image to give it a title and a description:

On the "Advanced" tab you can set a publication date for your gallery, a description, as well as a preview image:

You can then select your uploaded galleries from the component inspector: