Image chooser form fields for non-page models

[Jarret Hardie]

Wagtail came in the nick of time as we were working on a new project. We had been working with Django CMS, which is an excellent project, but the Wagtail approach and architecture fits our project's use cases much better. Thank you for open-sourcing this!

I'm looking for a sanity check and advice on extending the wagtail admin a bit. 

We have a fairly simple model with a handful of fields... most of them CharFields. The model references an image, however, and I'd ideally like to tie it to Wagtail's managed image repository. In a perfect world, the CMS user would be able to edit instances of this non-page model using the wagtail admin, and select/upload/manage the image foreign key the same way and using the same interface as when editing a page.

The model is defined similar to this:

class Foo(models.Model):
    some_text = models.CharField(max_length=256, blank=True)
    some_more_text = models.CharField(max_length=256, blank=True)
    photo = models.ForeignKey(
        'wagtailimages.Image',
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name='+'
    )

So far, I've used the "register_admin_urls" and "construct_main_menu" hooks to augment the main menu with an entry point to this model. By shamelessly ripping off the code behind wagtail's User index/editing screens, I've even been able to construct a wagtail-looking index/search page and create/editing page. I'm using the "wagtailadmin/shared/field_as_li.html" template to render fields, and I've noticed it doesn't render the image chooser panels.

How feasible is it for me to get the image chooser panel working in my own view/template? Just looking at the page editing code, it seems like I might need to explore the edit_handlers, but I'm wondering if that will introduce a landslide of dependencies that I need to configure and introduce to the request/response flow (dependencies that either shouldn't be public or that I don't have enough wagtail knowledge to handle), or if there's a fairly straightforward process that I'm just ignoring?

Any signposts, advice on alternate approaches, or advice indicating this is just not a road to go down, are most welcome.

Many thanks,

Jarret

[Matthew Westcott]

Hi Jarret,

Would defining your model as a snippet <http://wagtail.readthedocs.org/en/latest/snippets.html> be a good fit, perhaps? Essentially, a snippet is just an arbitrary model with a 'panels' definition set up on it so that it can be rendered as a Wagtail-style form within the Snippets area.

I'm afraid I didn't consider the possibility of using the chooser widgets outside of the EditHandler framework when I implemented them, but I can see it's a desirable feature (see also: https://github.com/torchbox/wagtail/issues/245#issuecomment-43960930 ). It probably wouldn't be a massive leap to refactor them into Django form widgets (using form media for the JS) - just a matter of finding the time...

Having said that, we did encounter this kind of thing when implementing 'editors picks' in the search module - we needed to include the page chooser widget within the non EditHandler-based form. To see how it was done there, this is probably the best starting point: https://github.com/torchbox/wagtail/blob/master/wagtail/wagtailsearch/templates/wagtailsearch/editorspicks/includes/editorspicks_form.html

Cheers,
- Matt

[Jarret Hardie]

Thank you for the detailed reply, Matt (and a speedy reply I might add).

Defining my model as a snippet is a perfect fit! I just tried it out and it's exactly what I need. 

I'm not quite sure why I didn't think of snippets in the first place. Perhaps I need to own up to a certain amount of prejudice: the name snippet and the example Advert model in the documentation probably meant that I skimmed that section rather than digesting the documentation properly. I've just tried augmenting my model definition with panels and with a snippet registration, and it's working perfectly; I henceforth promise not to judge a book by its cover ever again!

I'm grateful for the link to the editors picks solution. It's nice to see there's a reasonable way to get deeper and more fine-grained control over the editing of vanilla models. I think the editors picks approach is probably what I was trying to reconstruct yesterday, but I clearly don't need to go that far yet, but you've given me some very useful advice in case I do end up there in a few weeks.

For the record if anyone else reading this is:

a) As wilfully blind about snippets as I was, and

b) Interested in how I altered my Foo class to fit the bill

Here's what "Foo" looks like now:

from django.db import models

from wagtail.wagtailadmin.edit_handlers import FieldPanel
from wagtail.wagtailimages.edit_handlers import ImageChooserPanel
from wagtail.wagtailsnippets.models import register_snippet

class Foo(models.Model):
    some_text = models.CharField(max_length=256, blank=True)
    some_more_text = models.CharField(max_length=256, blank=True)
    photo = models.ForeignKey(
        'wagtailimages.Image',
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name='+'
    )

    panels = [
        FieldPanel('some_text', classname='full'),
        FieldPanel('some_more_text', classname='full'),
        ImageChooserPanel('photo')
    ]


    def __unicode__(self):
        return u"I am a foo with text: {0}".format(self.some_text)

register_snippet(Foo)

[YusufSalahAdDin]

Hi, https://github.com/torchbox/wagtail/blob/master/wagtail/wagtailsearch/templates/wagtailsearch/editorspicks/includes/editorspicks_form.html  isn't enabled.

I need do a image chooser for a external form, in django-admin there is a plus button to open a form to create a new image, i want do this but for external form.