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

Introduction

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

Tiles
Combined
Slider

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

This section is taken straight from the project README.md on GitHub

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

<head>
    ...
    {% styles %}
</head>
<body>
    ...
    {% scripts %}
</body>

For more information see the OctoberCMS docs!

Installation

To install from your site “backend”: go to Settings → Updates & Plugins → Install Plugins and then search for “November Gallery”.

To install from the Marketplace: click Add to Project and select the project you wish to use the plugin on. Once the plugin has been added to your project, 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/novembergallery.zenware.io/public_html# sudo git clone https://github.com/toughdeveloper/oc-imageresizer-plugin.git plugins/toughdeveloper/imageresizer
Cloning into 'plugins/toughdeveloper/imageresizer'...
...
USER@SERVER:/var/www/novembergallery.zenware.io/public_html# sudo git clone https://github.com/lieszkol/november-gallery.git plugins/zenware/novembergallery
Cloning into 'plugins/zenware/novembergallery'...
...
USER@SERVER:/var/www/novembergallery.zenware.io/public_html# sudo chown -R www-data:www-data plugins/toughdeveloper/
USER@SERVER:/var/www/novembergallery.zenware.io/public_html# sudo chown -R www-data:www-data plugins/zenware/
USER@SERVER:/var/www/novembergallery.zenware.io/public_html# sudo -u www-data php artisan plugin:refresh toughdeveloper.imageresizer
Rolled back: ToughDeveloper.ImageResizer
Reinstalling plugin...
ToughDeveloper.ImageResizer
...
USER@SERVER:/var/www/novembergallery.zenware.io/public_html# sudo -u www-data php artisan plugin:refresh zenware.novembergallery
Rolled back: ZenWare.NovemberGallery
Reinstalling plugin...
ZenWare.NovemberGallery
- v1.0.1:  First version of NovemberGallery

Backend Plugin Configuration

This section is taken straight from the project README.md on GitHub

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:


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: