Giter VIP home page Giter VIP logo

kirby-gallery-1's Introduction

Gallery Field for Kirby CMS

This is a custom gallery field for Kirby. It lets you pick and order your image files inside the page panel

Here is a blueprint example:

fields:
  ...
  pictures:
    label: Gallery
    type: gallery

This gives you a field like this:

Sort Mode

By clicking the "Select images" Button you enter a select mode where you can pick the files to include to you gallery.

Select Mode

The content will be YAML-structured. Inside the template, the field therefore has to be decoded as an array using $page->gallery()->yaml().

----

Gallery: 

- kermit-the-fog.jpg
- the-sea.jpg
- mountains.jpg
- road.jpg
- forrest.jpg

Download and Installation

Requirements

  • PHP 5.4.0+
  • Kirby 2.3.0+

Using Kirby CLI

If you’re using the Kirby CLI, you need to cd to the root directory of your Kirby installation and run the following command:

kirby plugin:install TimOetting/kirby-gallery

This will download and copy the Gallery Fieldtype.

Using Git Submodule

To install this plugin as a git submodule, execute the following command from the root of your kirby project:

git submodule add https://github.com/TimOetting/kirby-gallery.git site/fields/gallery

Using Copy and Paste

Download the contents of this repository as ZIP-file. Rename the extracted folder to gallery and copy it into the site/fields/ directory in your Kirby project.

Options

Changing the aspect ratio of the thumbnails

By default, all images are displayed in their original aspect ratio. If you would like to force a custom aspect ratio, i.e. to show the thumbnails as squares, you can pass the option aspectRatioto with the format width:height your field in the blueprint:

fields:
  ...
  pictures:
    label: Gallery
    type: gallery
    aspectRatio: 1:1

Aspect Ratio

fields:
  ...
  pictures:
    label: Gallery
    type: gallery
    aspectRatio: 4:3

Aspect Ratio

Show and hide file name

You can hide the filename under the thumbnail by adding the option displayFilename: falseto the blueprint:

fields:
  ...
  pictures:
    label: Gallery
    type: gallery
    displayFilename: false

Aspect Ratio

kirby-gallery-1's People

Contributors

timoetting avatar mxub avatar ro-ka avatar tobiasfabian avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.