Repeating region show text left, img right then img left, text right

Hi John

Wouldn't you just use CSS for this? Perch doesn't really care about layout.

Personally I would use flexbox to reverse the order of the image and text inside the div by using :nth-child(even) to target the 2nd, 4th etc divs and flex-direction: column-reverse to flip the order of the items. But you could use floats and clearfix I guess if that floats your boat ;) !

Hope this helps,

Jon

Jon - Thanks for the reply. Unfortunately I can't do much with the CSS as this was supplied to me (created by designer in webflow), my role in this project is to integrate it with perch (which I am new to!). Hence, looking for a solution where I can branch based on the iteration of a multiple item region. I agree this is less elegant solution and less DRY than doing it with CSS. I would typically use bootstrap, if it were a project I'd created, which makes this easy.

Drew, yes - using a multiple item region, screenshot: https://bit.ly/2qWrWHV

Cheers for the help.

That is what I had done but it wasn't working. I re-saved the 'region options' page which seemed to refresh it and it started to work (almost) as intended. Is that something you commonly need to do with perch?

I now have a separate issue - no fields are showing within the nested blocks. Here's the code:

<div class="w-container">
    <div class="content-inner-wrap home w-row">
        <perch:every nth-child="odd">
            <div class="left-column w-col w-col-6" data-ix="fade-in-scroll">

                <h2 class="column-intro-title section-title">ODD
                    <perch:content id="heading_line_1" type="text" label="Heading Line 1"/>
                    <br/><span class="span"><perch:content id="heading_line_2" type="text" label="Heading Line 2"/></span></h2>
                <p class="intro-text">
                    <perch:content id="body_first_para" type="textarea" label="First paragraph of the body text"/>
                </p>
                <p class="text">
                    <perch:content id="body" type="textarea" markdown="true" editor="markitup" label="Main body text"/>
                </p>
            </div>
            <perch:blocks>
                <perch:block type="image" label="Image">
                    <div class="right-column w-col w-col-6" data-ix="fade-in-scroll-2">
                        <perch:repeater id="images" label="Images">
                            <img src='<perch:content type="image" id="image" label="Image" />' alt='<perch:content type="text" id="alt" label="Description"/>' class="img-inner"/>
                        </perch:repeater>
                        <img src='<perch:content type="image" id="banner_image" label="Banner Image" />'
                             alt='<perch:content type="text" id="banner_alt" label="Banner Image Alt"/>'
                             class="banner img-inner"
                             height="130" width="427"/>
                    </div>
                </perch:block>
                <perch:block type="video" label="Video">
                    <div class="right-column w-col w-col-6 w-col-small-small-stack" data-ix="fade-in-scroll">
                        <div class="video-home w-embed w-video" style="padding-top: 56.17021276595745%;">
                            <perch:content type="text" id="video_url" label="Video URL"/>
                            <img src='<perch:content type="image" id="banner_image" label="Banner Image" />'
                                 alt='<perch:content type="text" id="banner_alt" label="Banner Image Alt"/>'
                                 class="banner img-inner"
                                 height="130" width="427"/>
                        </div>
                    </div>
                </perch:block>
            </perch:blocks>
        </perch:every>
        <perch:every nth-child="even">
            <perch:blocks>
                <perch:block type="image" label="Image">
                    <div class="left-column w-col w-col-6" data-ix="fade-in-scroll-2">
                        <perch:repeater id="images" label="Images">
                            <img src='<perch:content type="image" id="image" label="Image" />' alt='<perch:content type="text" id="alt" label="Description"/>' class="img-inner"/>
                        </perch:repeater>
                        <img src='<perch:content type="image" id="banner_image" label="Banner Image" />'
                             alt='<perch:content type="text" id="banner_alt" label="Banner Image Alt"/>'
                             class="banner img-inner"
                             height="130" width="427"/>
                    </div>
                </perch:block>
                <perch:block type="video" label="Video">
                    <div class="left-column w-col w-col-6 w-col-small-small-stack" data-ix="fade-in-scroll">
                        <div class="video-home w-embed w-video" style="padding-top: 56.17021276595745%;">
                            <perch:content type="text" id="video_url" label="Video URL"/>
                            <img src='<perch:content type="image" id="banner_image" label="Banner Image" />'
                                 alt='<perch:content type="text" id="banner_alt" label="Banner Image Alt"/>'
                                 class="banner img-inner"
                                 height="130" width="427"/>
                        </div>
                    </div>
                </perch:block>
            </perch:blocks>
            <div class="right-column w-col w-col-6" data-ix="fade-in-scroll">
                <h2 class="column-intro-title section-title">EVEN
                    <perch:content id="heading_line_1" type="text" label="Heading Line 1"/>
                    <br/><span class="span"><perch:content id="heading_line_2" type="text" label="Heading Line 2"/></span></h2>
                <p class="intro-text">
                    <perch:content id="body_first_para" type="textarea" label="First paragraph of the body text"/>
                </p>
                <p class="text">
                    <perch:content id="body" type="textarea" markdown="true" editor="markitup" label="Main body text"/>
                </p>
            </div>
        </perch:every>
    </div>
</div>

This shows in perch admin like this (screenshot) : https://bit.ly/2qWML5U

Am I doing something wrong?

Hi John,

You can only have one set of <perch:blocks></perch:blocks> tags in a template all of your <perch:block></perch:block> tags would have to go in there.

Thanks Dexter. I have re-worked the template now to not include <perch:blocks>. Which is a little annoying but I can live with it.

Thanks,

John