Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

jekyll-gallery-plugin

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jekyll-gallery-plugin

  • 1.0.0
  • Rubygems
  • Socket score

Version published
Maintainers
1
Created
Source

This is a Jekyll plugin that provides a Liquid tag to render one of the named named galleries declared in the Front Matter inside the content, using a customizable template which, out of the bo, supports the Javascript Glightbox library.

It also takes care of the gallery integrity at the compile time:

  • checking for the file field presence;
  • checking for the files presence within the related path.

Everytime one of these constraints is broken, an error message is raised, blocking any further action.

As an extra feature, the filesystem organization-and-check supports the image field declared for the Jekyll-Seo-Tag plugin implementing the subkey cover.

Ruby Gem Version

Installation

Can install the gem either manually or using Bundler.

Using Bundler

Install the gem and add to the application's Gemfile by executing:

$ bundle add jekyll-gallery-plugin --group jekyll_plugins

Manually

If bundler is not being used to manage dependencies, install the gem by executing:

$ gem install jekyll-gallery-plugin

Then, add the following code within the Gemfile of your Jekyll project:

group :jekyll_plugins do
  ...
  gem 'jekyll-gallery-plugin'
end

Configuration

Inside the _config.yml file can set up the following fields:

jekyll-gallery:
  assets_path: assets/images
  collections_dir:
    posts: posts
    downloads: downloads
    ...

The assigned values are the default values.

assets_path : This is the general path where assets lie, these files will be directly served by Jekyll so you will have this same prefix path in your images as well.

collections_dir : This is where can specify a folder name for each collection, by default it takes the slug of the collection itself.

Within the default template must add the code to recall the Glightbox CSS and Javascript scripts, the instructions are pretty standard:

  1. The CSS file goes in the head section
  2. The Javascript library file in before the body closing tag
  3. The Javascript code before the body tag and after the previous mentioned Javascript library

Here an example using the CDN resources:

<html>
    <head>
        <meta charset="utf-8" >
        ...
        <!-- (1) -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
        ...
    </head>

    ...

    <!-- (2) -->
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>

    <!-- (3) -->
    <script type="text/javascript">
        const lightbox = GLightbox();
    </script>
</html>

Usage

The usage of this plugin is splitted in two parts:

  1. The Front Matter to declare the galleries;
  2. the content, placing the gallery tag to render the gallery declared.

So to declaration will be something like:

gallery:
  gallery_name_1:
  - file: subfolder_1/image_name_1.jpg
    title: "Title 1"
    description: "Description 1"
  - file: subfolder_1/image_name_2.jpg
    title: "Title 2"
    description: "Description 2"
  - file: subfolder_1/image_name_3.jpg
    title: "Title 3"
    description: "Description 3"
  gallery_name_2:
  - file: subfolder_2/image_name_1.jpg
    title: "Title 1"
    description: "Description 1"

Each gallery has a name that introduces the list of items (gallery_name_1, gallery_name_2), each items must provide the file field with the relative path, a title and a description

Supposing we are filling a posts content, and using all the default values, the images will take place under the assets/images/posts/subfolder_1/... and assets/images/posts/subfolder_2/... following the scheme:

<assets_path>/<collections_dir>/<image_folder_and_filename>

To render the gallery in whatever point within the content:

{% gallery name='<gallery_name>' %}

For example to render the second gallery:

{% gallery name='gallery_name_2' %}

More Help

More info is available at:

FAQs

Package last updated on 26 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc