[Question] How to generate all images in source folder?

[zerotraceme]

Hello, first of all thank you for your work and effort!

I am using your plugin to generate and display product images. There are multiple color variations for each product image.

So far, I successfully generate the initially displayed image. But I would like to also generate all other color variations, so that I can swap out the links via javascript on a click of the page visitor.

Unfortunately I can't just include all color variations and after generation comment them out, because I'm pulling the url from yaml frontmatter and would need to go through all products and all colors separately, waiting for the generation and then increment to the next color for all products. That seems a very intense and unmaintainable approach...

I was hoping that by setting a source directory the plugin would convert all containing images. But of course there would be the question of determining which preset to use for which files... Maybe there could be an option to specify multiple source folders and which template to convert ALL containing images with?

Any ideas on how to best approach it?

Thanks again for the great work!

[rbuchberger]

I'm away from a computer right now so I can't do any research, but can you make loops with liquid tags? JPT can parse liquid variables, so you might wrap a picture tag in a for loop.

That's a cool feature idea, I'll put some thought into it

Dec 30, 2020 12:00:24 leprodude notifications@github.com:

Hello, first of all thank you for your work and effort!

I am using your plugin to generate and display product images. There are multiple color variations for each product image.

So far, I successfully generate the initially displayed image. But I would like to also generate all other color variations, so that I can swap out the links via javascript on a click of the page visitor.

Unfortunately I can't just include all color variations and after generation comment them out, because I'm pulling the url from yaml frontmatter and would need to go through all products and all colors separately, waiting for the generation and then increment to the next color for all products. That seems a very intense and unmaintainable approach...

I was hoping that by setting a source directory the plugin would convert all containing images. But of course there would be the question of determining which preset to use for which files... Maybe there could be an option to specify multiple source folders and which template to convert ALL containing images with?

Any ideas on how to best approach it?

Thanks again for the great work!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub[https://github.com/rbuchberger/jekyll_picture_tag/issues/217], or unsubscribe[https://github.com/notifications/unsubscribe-auth/ACQEPTVN2AARL6WDVVGSAM3SXMB4NANCNFSM4VOGQK4A]. [data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAAySURBVHic7cEBDQAAAMKg909tDjegAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeDVulAABbzDScQAAAABJRU5ErkJggg==###24x24:true###][Tracking image][https://github.com/notifications/beacon/ACQEPTVVWGMPGTBUBWFUBSLSXMB4NA5CNFSM4VOGQK4KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4LSG4PEQ.gif]

[rbuchberger]

I'm back at a computer now, and did some searching. I'm not sure what your specific implementation is, but liquid can indeed create for loops. Since your products are already in the frontmatter, would something like this work?

{% for variation in variations %}
  {% picture {{ variation }} %}
{% endfor %}

Regardless, thanks for the kind words! The more I think about it the more I like the idea of batch image generation.

[zerotraceme]

Wow such a quick reply! I have found a neat little workaround (at least for one part of the problem). I created a "flatify" liquid filter, so I can use liquid variables in the front matter and interpolate it in the markup before I use it.

That helps me, because now my image frontmatter stays relatively the same for all products and I just have to change 1 number and everything gets generated for that chosen color.

---
...
color: 3
snipcart-id: tr-909
...
image: "{{ page.snipcart-id }}/{{ page.snipcart-id }}__{{ page.color }}.png"
product-page-image: "{{ page.snipcart-id }}/{{ page.snipcart-id }}__{{ page.color }}.png"
image-1: "{{ page.snipcart-id }}__{{ page.color }}-3-wall-image.png"
image-2: "{{ page.snipcart-id }}__{{ page.color }}-5-lifestyle-2.png"
image-3: "{{ page.snipcart-id }}__{{ page.color }}-2-detail-image.png"
image-4: "{{ page.snipcart-id }}__{{ page.color }}-4-lifestyle-1.png"
---

When I use it, it looks like this:

{% picture "{{ site.baseurl }}/{{ page.product-page-image | flatify }}" --picture class="featured-image" --alt {{ page.title }}%}

and gets correctly interpolated, which triggers the desired image conversions.

---

I just copied this solution here (by @erinkcochran and @kblife / @k16e over at https://talk.jekyllrb.com/ --> Thank you two for coming up with it and posting the images, respectively!): liquid variables in front matter

# _plugins/flatify.rb
module Jekyll
    module ExpandNestedVariableFilter
        def flatify(input)
            Liquid::Template.parse(input).render(@context)
        end
    end
end

Liquid::Template.register_filter(Jekyll::ExpandNestedVariableFilter)

---

Now with your hint I can try adding a partial with a for loop looping through all the color id numbers, including all the different images. That should trigger all necessary image conversions. Then, I can just uncomment the loop logic in one place (the include partial) and it should be good to go!

Still might be helpful to be able to give a source folder array and a corresponding template array or something like that :)

[zerotraceme]

Ok, so I tried the for loop. It works beautifully, but now I still have the problem that I can't just switch out the color id in all the links, because the hashes at the end are different...

Setting fast_build: true doesn't deactivate the hashes, but just ignores them when considering whether to regenerate or not I think, so that also doesn't really help in my case.

So far I don't really see what else I could try... Any ideas?

[rbuchberger]

Hmm.... that is tough. The hashes are really important to how JPT functions, there's no way to turn them off. You need some way during the build step to get the list of image names into javascript. I'll think on it a bit.

[zerotraceme]

I thought having the same hash attached to multiple files during the same generation process could work maybe.

For now, I have generated the files and just removed the hashes manually. Then they get regenerated with the hash, but I just switch out the links via javascript and use the "cleaned" file names.

It's working so far, which is enough for me right now, but updating gets a bit more tedious like that of course.

However, that's still way better than generating the files by hand or having the website load super slowly.

[rbuchberger]

Yeah, that works but it doesn't sound very maintainable. Maybe a shell script during the build process could work?

Also, could one of the other output formats help? It'll be more work initially, but JPT can generate a naked srcset, or even just an image file and return the filename.

Regardless, I feel like what you're trying to do should not be as difficult as it appears to be. Surely there's a way I can make it easier, I just haven't thought of it yet.