Document how to add Collections as Foreign Key to a Page

[lukasalexanderweber]

Is your proposal related to a problem?

The docs show nicely how to link single Images to a Page. However, a common use case is to store multiple Images to a Page, which could be better managed within a collection instead of having the double work of first adding all images to a collection and then select them 1 by 1 during page creation

Describe the solution you'd like

One should have the possibility to add a Collection as a Foreign Key to a Page, giving the Page access to all Images (or Documents) within this collection. See this or this SO Question.

Describe alternatives you've considered

There are some approaches presented here, but I think the featue is important enough to explain users whats the best way of linking a collection to a page and propose the sollution in the collection docs

[lukasalexanderweber]

another UX example: https://stackoverflow.com/questions/59935868/using-wagtail-collections-for-images-via-snippet-how-do-you-iterate-through-the

[lb-]

https://docs.wagtail.org/en/stable/reference/pages/model_recipes.html

Would be a good home for this

[hsadia538]

Hello, I would like to take this as my first contribution to the Wagtail repo. Currently, I am looking into the documents and links mentioned above to understand the issue. Thank you @lb- for letting me know about this one.

[lukasalexanderweber]

Till now I implemented it using

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

and in the template

{% load wagtailimages_tags %}
{% for i in images %}
    {% image i width-400 %}
{% endfor %}

[Temidayo32]

@hsadia538 are you working on this?

[nadaHan]

Please assign to me

[hsadia538]

@Temidayo32 I am no longer working on this.
Feel free to pick this up.

[Temidayo32]

Thanks @hsadia538 .

[lukasalexanderweber]

The main throwback of my method is that the "collection chooser" dosn't look as nice as the "collection chooser" of e.g. the images panel.

On Images:

On my custom Page:

Can someone give a hint how to access the correct "collection chooser"?

[allcaps]

You'd have to register a collection as a snippet to get a modal.

from wagtail.snippets.models import register_snippet
from wagtail.core.models import Collection

register_snippet(Collection)

The downside is that this also gives a "Snippets" menu with a terrible create/update form (treebeard fields).

[Pritimayasahoo]

I want to work on this issue please assign me this issue

[gasman]

Thanks for your interest @Pritimayasahoo! You are welcome to work on this. We do not assign issues outside of the core team - we just ask that people indicate their intention to work on an issue (as you have now done), to avoid duplicating efforts.

For further help in getting started, please see https://dev.to/lb/ten-tasty-ingredients-for-a-delicious-pull-request-hgc - you may also wish to join our #new-contributors channel on Slack.

[jyo031]

I want to work on this issue. Please assign me this issue.

[gasman]

Thanks for your interest @jyo031! As I said above, we do not assign issues - anyone is free to work on any issue. Now that you've expressed an interest, other people may choose to hold off on picking this up, but they are not required to.

[RohanJnr]

Hey, I am interested in contributing to this but I have a little curious on why the CollectionMember() model does not have backward compatability with the collection foreign key ? It would be useful to fetch all collection items (images, docs) from the collection instance itself.

[moses966]

I am competely new here. Does this issue require to explain the code above or it is about something else?
If it is about something else, please help me understand what it could be.

[lb-]

@moses966 this issue is about adding documentation with an example of adding a Collection to a Page.

[moses966]

Thank you please

[NXPY123]

Does this have to be added to the docs or the guide?

[NXPY123]

The solution mentioned by @lukasalexanderweber works well and I can add that to the docs/guide.

[allcaps]

I'm not sure if this is something that must be documented. The individual parts of this solution are already documented. And there are infinite many smart things that you can do with Django and Wagtail. We can not add all smart things to the documentation. The documentation should not turn into a big collection of implementation snippets.

Maybe we can improve specific parts of the documentation? I think ForeignKeys, Collections, Snippets, Choosers and get_context features are sufficiently documented. And if not, we might append them.

Contributing to the Wagtail community can also be writing a blogpost. Or write a StackOverflow QA. This way we 'document' the feature too.

I know my opinion is debatable. And am happy to be corrected on this one. What section of the documentation lists implementation recepies? Because I can't think of any.

I'd also like to spare everybody the effort of creating documentation that might not get merged.

[lb-]

Happy to align on this. I'll close this for now.

Anyone's free to write a blog post and then link in our third party tutorial section.