Here's what I tried to add a collection of images to a Page

[NXPY123]

This solution is based on the code provided by @lukasalexanderweber in issue #9222 raised by him.

Based on the method proposed by him, to add a collection of images to a Page, one can add a collection ForeignKey to a wagtailcore.collection in the Page, giving access to all the images in the collection to the Page. A field panel should be added which lets us select the desired collection based on the ones available.

The images present in the collection are filtered from all the images in the Image model and are passed to the context, which is then used to populate the template while rendering the Page.

models.py

from django.db import models
from wagtail.core.models import Page, Collection
from wagtail.images.models import Image
from wagtail.admin.edit_handlers import FieldPanel

class PageWithCollection(Page):
    collection = models.ForeignKey(
        'wagtailcore.Collection',
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name='+',
        verbose_name='Image Gallery'
    )

    content_panels = Page.content_panels + [
        FieldPanel("collection"),
    ]

    def get_context(self, request):
        context = super().get_context(request)
        images = Image.objects.filter(collection=self.collection)
        context['images'] = images
        return context

templates/page_with_collection.html

{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags %}

{% block body_class %}template-blogpage{% endblock %}

{% block content %}
    <h1>{{ page.title }}</h1>
    <p class="meta">{{ page.date }}</p>
    {% with authors=page.authors.all %}
        {% if authors %}
            <h3>Posted by:</h3>
            <ul>
                {% for author in authors %}
                    <li style="display: inline">
                        {% image author.author_image fill-40x60 style="vertical-align: middle" %}
                        {{ author.name }}
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
    <div class="intro">{{ page.intro }}</div>
    
    {{ page.body|richtext }}

<!-- Add this block to get images -->
   
    {% for i in images %}
        {% image i width-400 %}
    {% endfor %}
 
<!-- End of block -->

    <p><a href="{{ page.get_parent.url }}">Return to blog</a></p>

{% endblock %}

Screenshots

Sources:
https://stackoverflow.com/questions/73700668/parentalkey-vs-streamfield/73700979#73700979
https://stackoverflow.com/questions/53560422/how-to-give-user-option-to-select-a-wagtail-collection-of-images-in-page
#9222
https://stackoverflow.com/questions/59935868/using-wagtail-collections-for-images-via-snippet-how-do-you-iterate-through-the
https://docs.wagtail.org/en/v4.0.1/editor_manual/documents_images_snippets/collections.html

[thibaudcolas]

Looking great @NXPY123!

[NXPY123]

Thank you for going through it! 😄