Feature request: disable sharing options in photoswipe theme

[jdeluyck]

I've been digging through the photoswipe team, but my JS is rather .. rusty.

I'd like to disable the sharing options, but can't figure out how or where I could do this.

[saimn]

You probably just need to remove this line: https://github.com/saimn/sigal/blob/795658dba383ffde26aeedf31e9d127f2b5f4919/sigal/themes/photoswipe/templates/album.html#L73

It would be possible to add a setting in sigal for this, but I'm sure if I want this. If we start to have settings for all the theme features it will become unnecessarily complicated. The other option is to use a local copy of the theme which you can modify to adapt to your needs.

[jdeluyck]

Ah, thanks. I had been digging around in the JS code, but hadn't found it yet. I was just wondering since the original photoswipe comes with two 'themes' - one with buttons, one minimalistic.

[saimn]

I don't know how different are the two themes, in terms of code, but we could maybe provide the two variants either with a theme option or as two different themes.

[staeff]

There is a place to remove the sharing buttons or configure them: https://github.com/saimn/sigal/blob/master/sigal/themes/photoswipe/static/photoswipe-ui-default.js#L79 But after that photoswipe-ui-default.js.min of course would need to be regenerated as well. More info in the "Default UI Options" in https://photoswipe.com/documentation/options.html

It would be neat to also be able to configure this from sigal.conf.py, but I don't know if thats feasible.

[saimn]

We could have a settings to pass options to photoswipe's option block here: https://github.com/saimn/sigal/blob/master/sigal/themes/photoswipe/static/app.js#L148-L161 For instance the switch between the "minimal" and "all controls" theme on their website (mentioned above) is just changing some options: https://github.com/dimsemenov/PhotoSwipe/blob/master/website/index.html#L773-L790

[reagle]

Relatedly, I just moved to PhotoSwipe, and I'm wondering how to:

1. remove captions (simple version)
2. remove larger head image in a month gallery; I'd rather a gallery just be thumbnails.

BTW: When is 2.2 due?

[saimn]

You could probably do that with a user_css file. Otherwise you can copy the theme and customize the template. For the large head image it's the main class here: https://github.com/saimn/sigal/blob/5135a91c98534092b91ecba8bd70892aad18d57c/sigal/themes/photoswipe/templates/album.html#L22 which you could reset in css, and hide the captions as well. For 2.2, I want to do it, just need to find some time.

[reagle]

I install dev/2.2 and can specify a user_css, but the CSS doesn't seem to get applied (see example), even when I make it concrete/local:

<figcaption style="display: none" itemprop="caption description">04-2142-skyline-night - Sat Jul  4 21:42:46 2020</figcaption>

Is it being ignored because of javascript maybe?

[reagle]

And changing "main" to "secondary" (below) kind of works, but often the first thumbnail in a gallery is not uniformly sized/cropped as all the rest.

<figure class="gallery__img--{{ "secondary" if loop.first else "secondary" }} thumbnail" 

[saimn]

@reagle - I don't understand your first example with the user css.

often the first thumbnail in a gallery is not uniformly sized/cropped as all the rest.

you mean the picture or the way it's displayed in the HTML page ?

[reagle]

1. My first point is I'd think that I'd be able to edit CSS to disable display of figcaption, but it doesn't work.
2. Secondly, the thumbnail of the first image is still non-uniformly shaped even if I make it a secondary in the template.

You can see both of these issues in this gallery. The first picture (of my dog) is larger and vertical than the other thumbnails. And if you click the images the captions still show even though, in the HTML, I set figcaption to "display: none".

[saimn]

Hmm, photoswipe may do some of the styling within the Javascript code, which may not be compatible with tweaking it with CSS. So probably better to customize the HTML templates.

[saimn]

Also, just released 2.2 !

[reagle]

Update: the template location (when installed by pip3.9) is /usr/local/lib/python3.9/site-packages/sigal/themes/photoswipe/templates/album.html. The template needs to be edited in two places (class and data-echo) so as to treat the first image like all the others.

  <div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
    {% for media in album.medias %}
      {% if media.type == "image" %}
        <figure class="gallery__img--{{ "main" if loop.first else "secondary" }} thumbnail"
                itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="{{ media.url }}" itemprop="contentUrl" data-size="{{media.size.width}}x{{media.size.height}}">
            <img src="{{ theme.url }}/echo/blank.gif"
                 data-echo="{{ media.url if loop.first else media.thumbnail }}"
                 alt="{{ media.url }}" itemprop="thumbnail" title="{{ media.exif.datetime }}" />
          </a>
          <figcaption itemprop="caption description">{{ media.title }} - {{ media.exif.datetime }}</figcaption>
        </figure>
      {% endif %}

to this:

  <div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
    {% for media in album.medias %}
      {% if media.type == "image" %}
        <figure class="gallery__img--{{ "secondary" if loop.first else "secondary" }} thumbnail"
                itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
          <a href="{{ media.url }}" itemprop="contentUrl" data-size="{{media.size.width}}x{{media.size.height}}">
            <img src="{{ theme.url }}/echo/blank.gif"
                 data-echo="{{ media.thumbnail if loop.first else media.thumbnail }}"
                 alt="{{ media.url }}" itemprop="thumbnail" title="{{ media.exif.datetime }}" />
          </a>
          <figcaption itemprop="caption description">{{ media.title }} - {{ media.exif.datetime }}</figcaption>
        </figure>
      {% endif %}

[saimn]

You should copy the photoswipe directory to your local directory to avoid losing your changes when updating (then set the theme setting to this directory)

[reagle]

Good idea.