Why does the ImageGalleryBlock in wagtail-crx/coderedcms return no images?

18 Views Asked by At

Wagtail-CRX installs with a pre-defined StreamField ImageGalleryBlock that allow a user to select a Collection of images that are then output to the page along with a modal pop-up structure.

In models.py of my app I have created the image_gallery variable like this

    image_gallery = StreamField([
        ('image_gallery', ImageGalleryBlock()),
    ],
        verbose_name="Choose images for the gallery",
        null=True,
        blank=True,
        default="",
        use_json_field=True )

FieldPanel("image_gallery"), 

This worls fine. The FieldPanel adds the Collection choice block to the page edit form. However, the images in the chosen Collection never appear on the page using any of the possible methods for calling the block into the page template e.g.

          {% for block in page.image_gallery %}
          <section>{% include_block block %}</section>
          {% endfor %}

The include here calls in the block using the template image_gallery_block.html - the structure for the modal pop-up is rendered on the page but there no images appear to populate it with.

Inside the image_gallery_block.html template the first line is

{% get_pictures self.collection.id as pictures %}

where get_pictures is a function that should pass the data from the Collection objects into the variable pictures and they should be iterated over in the subsequent template html thus

{% if pictures %}
    {% for picture in pictures %}
    {% image picture fill-800x450 format-jpeg preserve-svg as picture_image %}
    {% image picture max-1600x1600 format-webp preserve-svg as original_image %}
    <div class="col-sm-6 col-md-4 col-lg-3 my-3">
      <a href="#" class="lightbox-preview" data-bs-toggle="modal" data-bs-target="#modal-{{modal_id}}">
        <img class="img-thumbnail w-100" src="{{picture_image.url}}" data-original-src="{{original_image.url}}"
          alt="{{picture_image.image.title}}" title="{{picture_image.image.title}}">
      </a>
    </div>
    {% endfor %} etc.

Adding {{ self.collection.id }}to the template outputs the correct Collection number so the id is being passed but {{ pictures}} returns ImageQuerySet[]

get_pictures is referenced from the coderedcms_tags.py file and is this

@register.simple_tag
def get_pictures(collection_id):
    collection = Collection.objects.get(id=collection_id)
    return Image.objects.filter(collection=collection)

the tags are being correctly loaded at the top of the image_gallery_block.html template with {% load wagtailcore_tags wagtailimages_tags coderedcms_tags %} I don't yet have enough python experience to work out how but it seems the get_pictures function is misfiring.

0

There are 0 best solutions below