I made a carousel orderable. each instance has an image and char field for the webp file name through the picture element. The webp image loads perfect when I hard code the srcset instead of using a {{variable}}.
Problem is that keeps the admin backend from being dynamic and leaves me hard coding every pic on the site or just the pages I want to rank for on google. Ive read a bunch of other posts but im still stuck. is there any way to serve webp filename cleanly from the backend?
I have read.
load static file with variable name in django
django 1.5 - How to use variables inside static tag
This one was the closest to solving my problem but falls short.
https://snakeycode.wordpress.com/2015/02/20/variables-in-django-static-tags/
carousel orderable fields
carousel_image = models.ForeignKey("wagtailimages.Image", on_delete=models.SET_NULL,related_name="+",)
webp = models.CharField(max_length=100, blank=True, null=True)
home template carousel
{% for loop_cycle in self.carousel_images.all %}
{% image loop_cycle.carousel_image max-750x500 as img %}
<picture>
<source srcset="{% static '{{loop_cycle.webp}}'%}" type="image/webp" >
<img src="{% static '{{img.url}}'%}" alt="{{ img.alt }}">
</picture>
As this works perfect when I hard code but then whats the point of having a carousel with an orderable that is next-gen image friendly? Thank you for reading Im going CRAZY?
<picture>
<source srcset="{% static '{{loop_cycle.webp}}'%}" type="image/webp" >
<img src="{% static '{{img.url}}'%}" alt="{{ img.alt }}">
</picture>
As this works perfect when I hard code but then whats the point of having a carousel with an orderable that is next-gen image friendly? Thank you for reading Im going CRAZY?
