Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Plugins

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

Started by fred appleton 6 years ago · 10 replies · 1665 views
6 years ago

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

6 years ago

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?

6 years ago

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

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 :

PHP
    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
6 years ago

@Andrass:
I use Featherlight together with Lazysizes and a masonry Isobox. It’s a multi-language setup

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

6 years ago

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.

6 years ago

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

6 years ago

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

I see ... thanks for posting here!

6 years ago

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

Question closed.

Suggested topics

Topic Participants Replies Views Activity
Plugins · by Rene, 1 week ago
2 43 1 week ago
Plugins · by Xavier, 4 weeks ago
2 53 4 weeks ago
Plugins · by Luka Prinčič, 7 years ago
3 1179 1 month ago
Plugins · by Sebastian van de Meer, 1 month ago
1 48 1 month ago
Plugins · by PIERROT Alain, 2 months ago
3 72 2 months ago