I would like to use Couch for several projects and I think I am getting the hang of the basic feature set but I am not sure how I can implement the Foundation block grid, something I use a lot. The issue is a multi element repeatable region. In Perch I think I can do it fairly easily with a template but templates in Couch seem to mean a different thing (whole page as opposed to a structured input element). At the moment I am using Mustache to get data from a JSON files as follows:

Code: Select all

<script id="teamTemplate" type="text/template">
 {{#teamData}}
    <li>
         <img src="images/about/{{teamImage}}" alt="Photo of {{teamName}}">
         <br>
         <h5>{{teamName}}</h5>
         <p>{{teamQual}}</p>
         <p>{{teamTitle}}</p>
         <p class="left-align">{{teamBio}}</p>
     </li>
  {{/teamData}}
</script>
   <ul id="team" class="large-block-grid-3 medium-block-grid-2 small-hide">
        <!-- PLACEHOLDER FOR TEAM DATA -->
        <hr>
   </ul>

Mustache populates the Li's then Foundation, along with my CSS, organizes this into a series of responsive vertical blocks picture/name/qualifications/title/bio.

The rather confusing (to me at least...) documentation for repeatable regions/units makes the following statement:

Since all the editable regions forming the 'repeatable unit' appear side-by-side in a single row, you'll want to have more control over how wide individual region appears in a row.

This seems to imply that I have little control over the formatting.

What I really want to do is keep this simple and just use customer loaded data from the admin panel to fill the Li's and then let Foundation deal with the rest.

Is this possible? Is there a better way?

Thanks a lot,

Graham

[KK]

Hi Graham

Couch does not impose any restrictions whatsoever on how you format your data on the front-end.
The statement that confused you actually referred to how the repeatable regions will appear in the *admin-panel* (and not the front-end).

Anyway, coming to your use-case. It should be rather straightforward to implement it in Couch too.
If you define the repeatable-regions as follows

Code: Select all

<cms:template>  

    <cms:repeatable name='team_data' label='Team Data' >
        <cms:editable type='image' name='team_image' label='Team Image' show_preview='1' preview_width='120' input_width='120' />
        <cms:editable type='text' name='team_name' label='Team Name' />
        <cms:editable type='textarea' name='team_qual' label='Team Qualification' />
        <cms:editable type='text' name='team_title' label='Team Title' />
        <cms:editable type='nicedit' name='team_bio' label='Team Bio'  />
    </cms:repeatable>
    
    .. definitions of other editable regions ..
</cms:template>

You can use the data inputted into the regions as follows on the front-end

Code: Select all

<ul id="team" class="large-block-grid-3 medium-block-grid-2 small-hide">
    <cms:show_repeatable 'team_data'>
        <li>
            <img src="<cms:show team_image />" alt="Photo of <cms:show team_name />">
            <br>
            <h5><cms:show team_name /></h5>
            <p><cms:show team_qual /></p>
            <p><cms:show team_title /></p>
            <p class="left-align"><cms:show team_bio /></p>
        </li>
    </cms:show_repeatable>
    <hr>
</ul>

Please notice how a single <LI> element is enclosed within the <cms:show_repeatable> block which then repeats it for each row of the repeatable-regions. Also notice that it does not change your HTML markup at all.

Hope it helps.

Thanks KK!
That is truly awesome. After two months or trying to wrestle Wordpress and various other "we will tell you how to code it and what you really want is a blog" CMS systems into submission this is going to be a dream for me. I see lots of Couch sites in my future. I will try and read the documentation more carefully before asking questions in future..... Thanks for being so polite .

Graham

[KK]

You are welcome, Graham
Feel free to let us know if you have any further questions.

Hi Graham, and welcome to the Couch. I just wanted to clear up a misconception that you alluded to in your question.

...templates in Couch seem to mean a different thing (whole page as opposed to a structured input element).

That is not the case. A template in Couch is simply a php file with the Couch boilerplate code at the beginning and the end. What you do with that file is entirely up to you. It can be a whole page, or just a file for holding data that you use elsewhere on your site. It doesn't even have to have any Couch tags in it at all. I sometimes add the boilerplate code to a static page just to fit it into the pretty urls scheme. A template in Couch is a pretty open-ended thing, ready and willing to bend to your will.

Once you realize that data from any template can show up anywhere on your site using the cms:pages tag, it really opens up the possibilities. For example, in your case you could use a non-executable template to hold the repeatable region where the data is entered in the admin panel and show it on any page or multiple pages of your site. That may or may not be the best choice in this case, but it's one of the possibilities. You could also use a clonable template in the same way, never intending the "pages" in the template to stand on their own.

Anyway, I just wanted to clear away the false limitation that a Couch template necessarily equals one web page. Enjoy learning to use Couch. It just keeps getting more and more fun!

Thanks Tim,
That is an important concept that I did not pick up from reading the documentation. I would appreciate one further clarification. When you use the term 'page' in the documentation does it always refer to a complete HTML page, header/body/unique URL/etc? It was this assumption, along with the apparent association of templates with pages that got me confused.

I think what I need to do now is get familiar with the system by actually using it. My current abstract reading approach is not landing it completely.

Thanks

Graham

I think what I need to do now is get familiar with the system by actually using it. My current abstract reading approach is not landing it completely.

Yes. You'll get farther quicker by making things. The tutorial in the documentation (http://www.couchcms.com/docs/tutorials/) is designed for that very purpose by starting with a static sample site and adding Couch management to it. It starts with the simplest methods and concepts and works its way into deeper waters.

You can download the files and type your way through, or maybe just follow along reading. What I did was to start with the tutorial files, but once I was a short ways into it, I switched to applying the lessons on a static site of my own. Others just dive in headfirst with their own projects, asking questions when they run into problems. Whatever works for you.

As for your question about the term 'page', I don't know. But my sense is that it's used less rigidly than your question suggests. It doesn't necessarily refer to a full web page. One of the special ways 'page' is used in Couch is when referring to a clonable template. A 'page' is a particular cloned instance of that template. The proto-typical example of a cloned template would be a blog, thus each instance is referred to as a 'page'. But like I suggested before, you can use it for anything you can imagine. A clonable template could hold blog entries, products, contacts, art galleries, team members, restaurant items, user profiles... anything that can be profitably organized and managed in repeating chunks.

Start with the straightforward and the typical, but don't be limited by it. Couch starts with a blank slate. It's essentially a cms language. Once you learn it, you can say what you want. If you can't figure something out, you can ask.

Thanks Tim,
That starts to makes sense. I think that the slightly iffy use of the term 'page' comes from the blogging community - which I do not - hence the confusion - got it now.

Anyway I have managed to get a local site up and running with compound repeating elements as per KK's code and it works perfectly - very impressed. When there are a lot of elements in a repeating section, having them all stuffed in one row in the control panel gets a bit tight. I managed to hack the styles.CSS to make the control panel full screen width and responsive which helps a lot but it sure could do with Foundation block grids or similar .

Graham