Baguette Gallery is a plugin that integrates the popular BaguetteBox image gallery into October. It can be used in different ways but right out of the box it integrates with October's markdown editor and makes it easy for the user to create image galleries.
Dependencies
Baguette Gallery requires the plugin Responsive Images (Bedard.Resimg).
Usage
All you need to do is wrap the image links with [baguette-gallery] ...images.. [/baguette-gallery]
and it insert the images in the default gallery layout. You can also set individual
images to be opened by baguette by using the [baguette]...[/baguette] tags.
Example:
[baguette-gallery layout="square"]   [/baguette]
The attributes "layout" and "class" can be set on the baguette tags. Layout is for the gallery only and it sets what layout to use. This can be one of the shipped layouts: "standard" and "square", or a theme defined layout. Class is if you want a specific instance configuration to be used when running baguette. This is for advanced users and more information is available in the documentation file.
The component baguetteGallery has to be included in your layout/page somewhere for the plugin to function.
[baguetteGallery] captions = false
Instead of only using markdown to create galleries you can also run the component in your theme files.
[baguetteGallery]
layout = square
==
==
{% component 'baguetteGallery' images=post.featured_images layout="square" %}
For more advanced usage, see the documentation.
Multiple instances
Baguette Gallery can be initialized manually and in several instances. If you want to use the standard configuration for all markdown editor use, so that you don't have to specify the class parameter, and an instance with specific settings for featured images, you can easily create multiple instances. And also reference that instance when creating a baguette powered image with the twig functions.
[baguetteGallery]
[baguetteGallery featuredGallery]
class = featured_gallery
captions = false
==
==
{% component 'featuredGallery' images=post.featured_images %}
{{ baguette(post.featured_images.first, "A single image", "featured_images") }}
{{ baguette_thumb(post.featured_images.first, post.featured_images.first.thumb(200,200), "A single image with a set thumbnail", "featured_images") }}
Component properties
See the component file for a full overview.
Twig
| Name | Parameters | Details | Description |
|---|---|---|---|
baguette_responsive_attributes |
System\Models\File image | An instance of System\Models\File is needed to get the responsive image set | Returns that attributes needed to manually create responsive baguette images. |
baguette |
mixed image, string caption, string class | The image can be a System\Models\File or a string | If the image is a string and it references an uploaded file we try to create a System\Models\File. Otherwise we simply link the URL in the string. |
baguette_thumb |
mixed image, string thumb, string caption, string class | This function is meant to be used in combination with October's image.thumb() |
Same as baguette but with the option to set a custom thumbnail. |
baguette_gallery_thumb |
mixed image, string thumb, string caption, string class | Same as baguette_thumb but is meant to be used by gallery layouts since it doesn't wrap the image in a div with the class. |
Custom layouts
You can easily override the default layouts by creating your own twig file in
[theme-root]/partials/baguetteGallery with the same name. See the "standard"
layout for an example on how to build one.
If you put a file called galleries.css in [theme-root]/partials/baguetteGallery
with your custom css rules then that file will be included on the backend so that
the markdown editor can properly display your gallery layout.
Attribution
BaguetteBox is a JavaScript library created by feimosi: https://feimosi.github.io/baguetteBox.js/
-
This plugin has not been reviewed yet.
-
| 1.0.0 |
First version Sep 20, 2015 |
|---|