I am looking for an example of the Featherlight plugin in use

Support Plugins
1

Does anyone know of a site that uses featherlight gallery to show a group of photos? I would like to see what it looks like and how it works. Thanks

2

You can see it in action on the developer’s site:

https://noelboss.github.io/featherlight/gallery.html

It should look the same in Grav.

3

Thank you for getting back to me. I was looking for an example website that uses Featherlight and Featherlight Gallery in a Grav website. Are you aware of one?

4

No, sorry. Maybe some other user here ?

5

Sure thing. I use Featherlight together with Lazysizes and a masonry Isobox. It’s a multi-language setup, so you have some extra stuff around that. Just ignore everything “lng”.

The .html.twig

    {% extends 'partials/base.html.twig' %}

    {% do assets.addJs('theme://js/lazysizes.min.js') %}

    {% do assets.addJs('https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js') %}

    {% do assets.addJs('theme://js/home-grid.js') %}

    {% do assets.addCss('theme://css/home-grid.css') %}

    {% do assets.addCss('//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css') %}

    {% do assets.addJs('//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js', {group: 'bottom'}) %}

    {% block content %}

    {# set language to use for <img> title, alt and stuff #}

    {% set lng = (langswitcher.current) %}

    <div class="main-content">

        <div class="isotope-wrapper container">

            <div class="isotope-notice">

                {{ page.content|raw }}

            </div>

            <div class="isotope-box">

                <div class="isotope-sizer"></div>

                {% for img in page.media.images %}

                    {# some assumptions to get into the ballpark #}

                    {% set scale = (img.height / img.width)|round(4) %}

                    {% set width = 190 %}

                    {% set height = (width * scale)|round(0) %}

                <div class="isotope-item" data-tags="{{img.meta.tags}}" data-featherlight="{{img.url}}" style="padding-bottom: {{height}}px;" >

                    <img data-src="{{img.url}}" title="{{img.meta.title[lng]}}" class="lazyload" />

                </div>

                {% endfor %}

            </div>

        </div>

    </div>

    {% endblock %}

The associate JS is nothing complicated neither :

    jQuery(document).ready(function ($) {

      var $isotope = $('.isotope-box').isotope({
        itemSelector: '.isotope-item',
        percentPosition: true,
        // resizable: false, // disable normal resizing
      masonry: {
          columnWidth: '.isotope-sizer',
          // columnWidth: ($('.isotope-box').width() / 5),
        }
      });

      // bind Featherlight
      var $featherlight = $('.isotope-box').featherlight({
      });

    });
1 Like
6

Great … can you post the URL, so we can see it in action?

7

Hardly. It’s a project to move an existing site over to Grav and it’s still on our development server. I could show the original site, and it looks pretty identical, but that engine is Wordpress.

But really, and as you said, it’s just Featherlight. This thing just works. And the underlying engine has no role in it.

8

I very much appreciate the info. I will give this a good look. Thank you.

9

I see … thanks for posting here!

10

I have moved to zooming and it works. Cannot figure out why I could not get Featherlight working.

Question closed.

11

Here is grav site that uses it. https://googleslidesthemes.com/yearly-budget-planning-download-template