Custom markup / render data-* attributes only

[jessecrouch]

I'm using Picture Tag together with lightGallery and some custom markup. In order to reference the image that lightGallery will use upon opening, I need to reference the image I would like to show in the data-src or data-srcset attribute. The image I reference is a different image than the one in the thumbnail (my thumbnail is a square version).

currently:

   <div class="Third" data-src="/images/tubing/2019/dz9.jpg">
      {% picture landing_header_squares tubing/2019/dz9-square.jpg class="img-responsive" %}
   </div>

I would like to provide a Picture Tag generated data-srcset version of that with an output like this:

   <div class="Third" data-srcset="/generated/tubing/2019/dz9.jpg-200-caa809.webp 200w, tubing/2019/dz9.jpg-400-caa809.webp 400w">
      ...
   </div>

Is it possible to render only the data-srcset portion or another way of going about this? Any help appreciated, thanks!

[rbuchberger]

Yeah, that doesn't look too hard! It'll just be another markup format. I've got a lot of projects ATM, but I'll try and get it done soon.

[jessecrouch]

Oh wow, thank you so much!!

[YJPL]

+1 Working on a similar implementation with PhotoSwipe and was wondering how to call galleries of images with Jekyll Picture Tag as well. lightGallery and PhotoSwipe share some similar effects—however they work differently. Not sure how the markup would need to differ but would love to learn the best method to do this.

[rbuchberger]

@jessecrouch I'm adding a 'naked srcset' output format. It'll build a srcset (and associated images), which you can surround with whatever markup you like. You'll use the tag like this:

<div class="Third" data-srcset="{% picture my_naked_srcset_preset my_image.jpg %}">
      ...
</div>

And you'll have to make a corresponding markup preset with markup: naked_srcset.

Edit: This will probably be most useful in a jekyll include, with the image name passed to it as a parameter.

The changes will be up momentarily, followed by relevant documentation.

@YJPL Digging through the photoswipe documentation, it looks pretty involved. I can't spend a ton of time learning it just to support one particular javascript library; I'd prefer to write a more general solution that is likely to work with others as well. Is there a JSON format or something that would be easy to hand off to photoswipe?

The direct_url markup format might be useful-- it basically just generates an image and gives you an url. Bypasses most of the functionality of the plugin, but lets you generate images easily.

I'm going to close this issue when I merge in the new pull request, but feel free to create another one if there's another output format you'd like to see. If you would like to take a crack at adding more comprehensive photoswipe support, you're more than welcome! Pull requests are encouraged and I'd be happy to answer questions along the way.

Thanks!

[jessecrouch]

You're amazing! Thank you so much, I just implemented this and it works fabulously. Really appreciate your help!

@sachinchoolur for reference on jekyll implementations of lightGallery

[rbuchberger]

Glad to help :)