Add gallery shortcode

[gcushen]

Integrate FancyBox (http://fancybox.net/ ).

[gcushen]

To use:

1. Upload gallery images within static/img/ folder if not referencing image URLs
2. Add images to front matter of a content file in the form:

   
   [[gallery_item]]
   album = "1"
   image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-default.png"
   caption = "Default"

[[gallery_item]] album = "1" image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-dark.png" caption = "Dark"

3. Initialize gallery somewhere within Markdown content by using `{{< gallery album="1" >}}`

Example: https://raw.githubusercontent.com/gcushen/hugo-academic/master/exampleSite/content/post/getting-started.md

[NewCai]

The height of the images is fixed. How to change it?

[gcushen]

To change the size of the thumbnails, you can follow the documentation to create a custom.css file and then add something like the following to it:

a[data-fancybox] img {
  height: 400px;
}

[NateMietk]

@gcushen I read through the getting-started.md example to deploy galleries, but the {{< gallery album="1" >}} doesn't call anything. The resulting page just shows {{< gallery album="1" >}} where the gallery should be. Am I missing something here?

[christopherisnow]

Is it possible to make photos within the show bigger?

This bit of CSS enlarges them, but the quality is terrible and images are off-center:

        .fancybox-image {
            position: relative;
            width: 600px;
            height: auto;
            margin: 0 auto;
            max-width: 100%;
        }

[jdcast]

@gcushen Is there support to handle links (externally as well as internally to posts/projects) within the caption? Searching around I see this, but so far unable to get anything to work.

[rajesh-s]

Is there a way to customize the view of the gallery?

Lets say I have 10 images, right now when I create the gallery album all 10 are shown on the post one below the other. How do I make it look more like what's shown on the fancybox site. It only shows 3 images in the gallery with equal sizes.

Edit: Not sure if this is the right way to do it. But I got decent results using the following in custom.css

.gallery a[data-fancybox] img {
  height: 120px;
  max-width: 40%;
  display: inherit;
  padding: 2px;
}

[Armanasq]

I have used this code and also other variations, but there is no lightbox. I have also try to add a custom gallery code, but none of them worked. When I click on the image it opens a new page.

Also the gallery section of the live demo page has the same issue: https://academic-demo.netlify.app/

  - block: markdown
    content:
      title: Gallery
      subtitle: ''
      text: |-
          {{< gallery album="landing" lightbox="true" resize_options="450x450" >}}
    design:
      columns: '1'