search

mavaddat / jekyll-cloudinary

Jekyll plugin adding a Liquid tag for Cloudinary, for better responsive images
https://mavaddat.github.io/jekyll-cloudinary/
MIT License
1 stars 1 forks source link

Bare data-* option #16

Open mavaddat opened 3 years ago

mavaddat commented 3 years ago

From jekyll-cloudinary created by jessecrouch: nhoizey/jekyll-cloudinary#62

Is there a way to output only the src and srcset contents without the image tag?

Example: I'm using jekyll-cloudinary 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">
      {% cloudinary landing_header_squares /images/tubing/2019/dz9-square.jpg class="img-responsive" %}
   </div>

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

   <div class="Third" data-srcset="http://res.cloudinary.com/<cloud_name>/tubing/2019/dz9.jpg-200-caa809.webp 200w, http://res.cloudinary.com/<cloud_name>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!

mavaddat commented 3 years ago

Nice use case!

It is not currently possible directly, but you could develop a plugin to add a filter that would take jekyll-cloudinary output and keep only the content of the srcset.