Skip to content

Instantly share code, notes, and snippets.

Last active May 18, 2022 07:41
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
A gallery slideshow shortcode for Nikola
## Nikola slides shortcode
## Put it in shortcodes/ in your site
## Use it like this:
## {{% slides "foo" %}}
## That will create a carousel with all the images from galleries/foo
## This uses bootstrap4 so only works in themes that use it
## Twek as needed for visuals
import os
def image_list(gallery):
imgs = []
for img in os.listdir(os.path.join('galleries', gallery)):
return sorted(imgs)
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
% for i, img in enumerate(image_list(_args[0])):
% if i == 0:
<li data-target="#carouselExampleIndicators" data-slide-to="${i}" class="active"></li>
% else:
<li data-target="#carouselExampleIndicators" data-slide-to="${i}"></li>
% endif
% endfor
<div class="carousel-inner">
% for i, img in enumerate(image_list(_args[0])):
% if i == 0:
<div class="carousel-item active">
% else:
<div class="carousel-item">
% endif
<a href="${img}">
<img class="d-block" src="${img}" style="max-height: 25rem; margin-left: auto; margin-right: auto;">
% endfor
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment