Search code examples
pythonhtmldjangowagtail

Can I have an orderable inside another orderable?

I have this setup where my Orderable is letting me add multiple cards that will display a pdf document. However is there a way I can display an Orderable inside the InLinePanel?

For example I want to have say 20 cards but within those cards the number of pdfs will range for any number from 1 to 10. I want this as it makes the pdfs easy to find and very manipulative.


class ArchitectPage(Page):
    search_fields = Page.search_fields + [

    ]  # these are if adding a search to the website

    # content tab panels
    content_panels = Page.content_panels + [
        MultiFieldPanel(
            [InlinePanel('architect_pdf', max_num=20, min_num=0, label="architect doc")],
            heading="architect pdf"
        ),
    ]

    # what to call the panels on wagtail
    edit_handler = TabbedInterface([
        ObjectList(content_panels, heading='Content'),
        ObjectList(Page.promote_panels, heading='SEO'),
        ObjectList(Page.settings_panels, heading='Settings', classname='settings'),
        # classname settings adds the cog
    ])


class ArchitectDownloads(Orderable):
    page = ParentalKey(ArchitectPage, on_delete=models.CASCADE, related_name='architect_pdf')
    architect_pdf = models.ForeignKey(
        'wagtaildocs.Document',
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name='+'
    )
    image = models.ForeignKey(
        'wagtailimages.Image',
        null=True,
        blank=True,
        on_delete=models.CASCADE,
        related_name='+'
    )
    caption = models.CharField(blank=True, max_length=250)

    panels = [
        ImageChooserPanel('image'),
        FieldPanel('caption'),
        DocumentChooserPanel('architect_pdf'),
    ]

{% for download in page.architect_pdf.all %} 

            <div class="document line-up-card">
                <div class="w3-card-4 w3-margin w3-white" data-aos="fade-down">


                    {% image download.image fill-150x150-c100 %}
                    {% with doc=download.architect_pdf %} 

                        <div class="w3-container">
                            {{ doc.title }}
                        </div>

                    {% endwith %}

                  <hr>
                    <p id="caption">{{ download.caption }}</p>

                    {% with doc=download.architect_pdf %}

                        <div class="download">
                            <a href="{{ doc.url }}" class="smooth-over-button noDecoration">
                                <i class="fa fa-download"></i>
                                <p class="btn-txt">PDF</p>
                            </a>

                        </div>

                    {% endwith %}


                </div>
            </div>

{% endfor %}

card view

Solution

  • This seems to be something that hasn't been added to wagtail but Kalob Taulein has made a great tutorial on an alternative that looks the same.

    Here are the 2 tutorials you need to implement them.

    How to add basic Streamfield to you

    How to Use ListBlocks in Wagtail CMS to Create Repeating StreamField Content