Forum

Thread tagged as: Question

Nested blocks

I had a question about this topic already last week. Now, because I am not quite sure if my solution is really the best, I would like to ask what do you think about it. There is a page with two different articles (blocks) that can be put in. One (media) should have two options of elements that can put in as many times as required. Here's my code:

<perch:blocks>
    <perch:block type="year" label="year">
        <perch:content … /> 
    </perch:block>

    <perch:block type="news" label="news">
        <div class="col-sm-5">
                    <perch:repeater id="media" label="media">
                        <perch:if exists="image">
                            <img src="<perch:content … />" />
                        </perch:if>

                        <perch:if exists="movie">
                                <perch:content …/>
                        </perch:if>
                    </perch:repeater>
            </div>

            <div class="col-sm-5">
                <perch:content …/>
            </div>

    </perch:block>
</perch:blocks>

Can this maybe done better for the user? Thanks!

Martin Stettler

Martin Stettler 0 points

  • 5 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

Hi Martin

I'm not sure what the question is. Is your user having a problem with the solution?

You can't nest Blocks but you seem to have nested a Repeater in a Block, which is fine, that is what I would do if I needed to add a repeating element inside a chunk of content.

Thanks for your time. There is no problem actually. For me it's just not ideal, that there is by default the first element «image» always inserted (visible in the edit mode). I would prefer to have the possibility to choose bottom right what should be used inside the news-block. By the way, Drew answered that nesting blocks is not possible... See this thread: https://forum.grabaperch.com/forum/11-09-2015-nested-blocks Many thanks!

Drew McLellan

Drew McLellan 2638 points
Perch Support

What's the overall problem you're trying to solve? Is 'year' some sort of divider item? There may be a better way to do this.

There are two options of putting content elements: year or news. News has its own two options: image or movie. I would like to be able to enter image or movie the same kind as year or news. I don't want that there is already inserted the «image» when I add «news»

Simon Clay

Simon Clay 127 points

I think I would do it as 'articles' in a multi-item region, without the need for repeaters, in a template something like this:

<perch:content id="date" type="date" label="Date" format="%d %B %Y" required="true" />

<div class="col-sm-5">

    <perch:blocks>

        <perch:block type="image" label="Image">
            <perch:if exists="image">
                <img src="<perch:content … />" />
            </perch:if>
        </perch:block>

        <perch:block type="movie" label="Movie">
            <perch:if exists="movie">
                    <perch:content …/>
            </perch:if>
        </perch:block>

    </perch:blocks>

</div>

<div class="col-sm-5">
    <perch:content …/>
</div>

Then, if you're listing them out onto a page and you don't want to keep repeating the Date/Year for every article you should be able to use <perch:if> to only output the date if the Year is different to the previous item.

Thanks, great input! It's working fine, but the second block «type=movie» does not appear. When I use its content (class="movie-item") without perch:blocks it's ok. Any idea what could be wrong? Many thanks!

Here's my full code:


<div class="row row-centered"> <div class="col-sm-6 col-sm-offset-3"> <perch:if different="date" format="Y"> <p class="quote"><perch:content id="year" type="date" label="Date" format="Y" required="true" /></p> </perch:if> </div> </div><!-- /.row --> <div class="row voffset"> <div class="col-sm-5 col-sm-offset-1"> <perch:blocks> <perch:block type="image" label="Image"> <perch:if exists="image"> <div class="image"> <img src="<perch:content type="image" label="Bild" id="image" width="720" help="Masse mind: 720 x 480 (3:2)" />" alt="<perch:content type="text" id="alt" label="Bildlegende (unsichtbar)" help="SEO relevant!" title="true" />" /> </div> </perch:if> </perch:block> <perch:block type="movie" label="Movie"> <perch:if exists="movie"> <div class="movie-item"> <div class="video-container"> <perch:content id="youtube" label="youtube iframe" type="textarea" html="true" help="iframe-Code hier einfügen (Masse mind. 1280px breit)"size="xs"/> </div> <div class="video-lightbox"> <a href="https://www.youtube.com/watch?v=<perch:content id="youtube-link" type="url" label="youtube URL" help="Nur ID eintragen (ohne https://youtu.be/)" />"><h5 class="movie" style="background-image: url(../../../graphics/movie-button.svg), url(<perch:content id="bgimage-youtube" type="image" label="youtube Vorschaubild" help="Masse: 480 x 320 (3:2)" />);"></h5></a> </div> </div> </perch:if> </perch:block> </perch:blocks> </div> <div class="col-sm-5"> <p class="quote"><perch:content id="date" type="date" label="Datum" format="%d %B %Y" required="true"/></p> <h2 class="quote"><perch:content id="heading" type="text" label="Titel"/></h2> <perch:content id="text" type="textarea" label="Text" textile="true" editor="markitup" html="true" size="m"/> </div> </div><!-- /.row -->
Drew McLellan

Drew McLellan 2638 points
Perch Support

You're using:

<perch:if exists="movie">

but you don't have a field with id="movie" so that will always be false.

Thanks, silly fault. However, I have another problem. How can I reuse the date content again? Would be nice the editor only has to put the date once and the output is once just the year and once the exact date.

<perch:content id="year" type="date" label="Date" format="Y" required="true" />

For the moment I have the same date-attribute twice with different formats.

Thanks!

Drew McLellan

Drew McLellan 2638 points
Perch Support

Yes, that's how you do it. Reuse the same tag with different options.

Thanks a lot, works all fine now!