Despite several readings of the documentation I am still not grasping how a cloned 'page' does not need to be a complete stand-alone page with headers, URL, etc. Now I have a real-world problem that might need this capability but I have no idea how to implement it.

I am using the Foundation 5 accordion structure, which is essentially an un-ordered list of links, but each expansion has multiple small sub-sections. The structure is as follows (double square brackets to designate required repeatable regions):

Code: Select all

<ul>
  [[<li>
        <h5>main title</h5>
        <a>summary text<span>'more info'</span></a>
        <div>
            <p>expanded content</p><p>expanded content</p>
            <h6>subsectiontitle</h6>
                [[<img>opt image</img><p><strong>leader</strong>subtext</p>]]......
        </div>
    </li>]]......
</ul>

One option might be to limit the number of repeating subsections and flatten the structure but that would result in a 12 element repeating region which is completely unmanageable with the current control panel layout.

So:
1. Can I use cloned pages to create the li's with an embedded repeatable region? If so, how.
2. Is there any way to spread repeating regions over multiple rows or run them vertically in the control panel?

Any advice welcomed.

Thanks a lot,

[KK]

I am still not grasping how a cloned 'page' does not need to be a complete stand-alone page with headers, URL, etc.

I'll try to explain, Graham.

Please create a new template named 'accordian.php' and paste the following code within it -

Code: Select all

<?php require_once( 'couch/cms.php' ); ?>
    <cms:template title='Accordian' clonable='1'>
        <cms:editable type='textarea' name='summary' label='Summary text' height='80' />
        <cms:editable type='richtext' name='content' label='Expanded content' height='160' toolbar='basic' />
        <cms:repeatable name='sub_sections' label='Sub-sections' desc="Use the same 'Sub-section Title' to group rows" >
            <cms:editable type='text' name='sub_title' label='Sub-section Title' />
            <cms:editable type='image' name='sub_image' label='Image' show_preview='1' preview_width='120' input_width='200' />
            <cms:editable type='nicedit' name='sub_text' label='Sub-text' />
        </cms:repeatable>
    </cms:template>
<?php COUCH::invoke(); ?>

Register the template above by visiting it as super-admin.
Now when you see its entry in the admin-panel you'll, as expected, see all the editable regions defined for it in the code above.

Now visit the template (or any of its cloned page) from the front-end and do a view-source.
What do you see as HTML? Nothing. Completely blank.
That is because the template above only defined the editable regions and did not output any HTML.

I think now you can see how a cloned 'page' "does not need to be a complete stand-alone page with headers, URL, etc". We use such pages only for inputting data that we'll output elsewhere on any other template. Let us see how.

If you take a look at the editable regions defined in our template, you'll see that you can input within these regions the data for one complete 'accordian pane'. That is to say, we can now create cloned pages from this template where each cloned-page will represent one pane of your accordian.

To output the full accordian we'll use cms:pages to list all pages (i.e. 'accordian panes') as follows-
Suppose you want to output the accordian on the site's homepage (index.php).
Place the following code in index.php -

Code: Select all

<ul>
    <cms:pages masterpage='accordian.php' >
        <li>
            <h5><cms:show k_page_title /></h5>
            <a>summary text<span><cms:show summary /></span></a>
            <div>
                <cms:show content />
                
                <cms:show_repeatable 'sub_sections'>
                    <cms:if my_current_subsection != sub_title>
                        <cms:set my_current_subsection = sub_title />
                        <h6><cms:show sub_title /></h6>
                    </cms:if>
                    
                    <img src="<cms:show sub_image />" /><p><cms:show sub_text /></p>
                </cms:show_repeatable>
            </div>
        </li>
    </cms:pages>
</ul>

The code above should output the exact HTML you referred to in your first post (you'll need to add the 'classes' needed by Foundation to make it work).

Please notice how we are using cms:pages to repeat the <LI> blocks and how within one <LI> block we use cms:show_repeatable tag to repeat the images.

If I'm not wrong, the original markup you posted failed to capture the fact that the <H6>Subsections<H6> within a single pane also need to be repeated (i.e. the images are grouped within subsections) like this -

Code: Select all

<ul>
  [[<li>
        <h5>main title</h5>
        <a>summary text<span>'more info'</span></a>
        <div>
            <p>expanded content</p><p>expanded content</p>
            <h6>subsectiontitle</h6>
                <img>opt image</img><p><strong>leader</strong>subtext</p>
                <img>opt image</img><p><strong>leader</strong>subtext</p>
                
            <h6>subsectiontitle two</h6>   
                <img>opt image</img><p><strong>leader</strong>subtext</p>
                <img>opt image</img><p><strong>leader</strong>subtext</p>
                <img>opt image</img><p><strong>leader</strong>subtext</p>
        </div>
    </li>]]......
</ul>

To group rows from a single repeatable-region, we used a workaround. Each row has a text field named 'sub_title'. If we enter the same value into this field for multiple contiguous rows, those rows would be shown grouped together (i.e. the sub_title will be shown only once for a whole group of rows). This is what the following portion in the code above is doing -

Code: Select all

    <cms:if my_current_subsection != sub_title>
        <cms:set my_current_subsection = sub_title />
        <h6><cms:show sub_title /></h6>
    </cms:if>

OK, so that should show you how to use cloned-pages instead of repeatable-regions. Please notice how each cloned-page above is equivalent to one row of a repeatable-region.

You'll notice one problem with this approach though.
Unlike repeatable-regions, cloned-pages cannot be sorted manually (i.e. moved up/down to the desired place). They always show (in admin-panel) sorted by their publish-date and so the latest is always on top.

To tide over this problem, we can use 'nested-pages' instead (as those allow manual sorting).
The changes are very simple.
Please modify the template code to add the following highlighted parameter -

<cms:template title='Accordian' clonable='1' nested_pages='1'>

Refresh template as super-admin for the changes to take place.
Now in the admin-panel you can move the pages up/down to tweak their display order.

On the frontend, the display code will now require using cms:nested_pages instead of cms:pages to do the listing. Again the change to our original code is trivial -
Original code was -

Code: Select all

<ul>
    <cms:pages masterpage='accordian.php' >
        <li>
            ..
        </li>
    </cms:pages>
</ul>

Change it to make it as follows -

Code: Select all

<ul>
    <cms:nested_pages masterpage='accordian.php' include_custom_fields='1' >
        <li>
            ..
        </li>
    </cms:nested_pages>
</ul>

That include_custom_fields='1' is important else it won't fetch data from the editable regions.

Hope this helps. Do let me know.

KK, thanks for the very thorough response. I will get to play with it tomorrow and it should sort out my conceptual issues. The h6 looks weird but is correctly indented.