#280

Product support

Get help in the plugin support forum.

Categories

  • Developer Tools
  • Utility

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"]

![](/storage/file/image2.jpg)
![This is a caption](/storage/file/image.jpg)

[/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/

1.0.0

First version

Sep 20, 2015