webpack-gallery-plugin

A webpack plugin to provide a global object representing a detailed gallery tree view.

Getting started

You first need to install webpack-gallery-plugin as a development dependency by running the following command:

npm install webpack-gallery-plugin --save-dev

You can then add the plugin to your webpack config. For example:

// webpack.config.js
const GalleryPlugin = require("webpack-gallery-plugin");

module.exports = {
  plugins: [
    new GalleryPlugin({
      source: '/assets',
    }),
  ],
};

Options

Name	Type	Required	Default	Description
source	{String}	true	undefined	Path to the target folder, relative to the webpack config file.
publicPath	{String}	false	"/"	Public path of the target folder.
outputName	{String}	false	"default"	Output name, generated constant will be GALLERY_{outputName}.
ignoreTypes	{Array}	false	undefined	Ignored file types.
ignorePatterns	{Array}	false	[".*/"]	Ignore patterns.
extensions	{Object}	false	undefined	Custom extensions map.
verbose	{Boolean}	false	false	Verbose mode.

Supported file types

Image	Audio	Video
.bmp	.mp3	.mp4
.cur	.ogg	.mov
.dds	.m4a	.wmv
.gif	.flac	.flv
.ktx	.wav	.avi
.png	.wma	.mkv
.pnm	.aac
.pam
.pbm
.pfm
.pgm
.ppm
.psd
.svg
.icon
.jpg
.jpeg
.icns
.tiff
.webp

Custom extensions map

You can extend the default supported file typed by adding your own extension: type entries into the option's extensions parameter.

exemple

// webpack.config.js
const GalleryPlugin = require("webpack-gallery-plugin");

module.exports = {
  plugins: [
    new GalleryPlugin({
      source: '/assets',
      extensions: {
        tiff: 'image',
        mp4: 'audio',
        txt: 'poetry',
      },
    }),
  ],
};

⚠️ If you respecify any of the default supported file types through the extensions parameter, the default type (image/audio/video) will be overwritten.

⚠️ types other than image, audio, video will be preserved but wont provide any relevant data but the path and an id.

Provide additional details

Each sniffed folder can provide a gallery.details.json file which is being parsed to find and concatenate any additional data of your choice (e.g. a simple description or its author). Simply specify the relative file path as a key and its details as an object value.