Hi,
first i have to say that i really love couch.
I finished my first project a while ago based on the tutorial but it evolved much further thank to this great project and its documentation.

Im currently on my next project, a portfolio Site based on Prologue (http://html5up.net/prologue).
most parts were very easy but i have problems with the portfolio gallery.
The Portfolio part sits in 3 different containers that are hold in another container:

Code: Select all

<div class="row" id="gallery" >
<div class="4u">
<cms:show_repeatable 'portfolio_1'> 
<article class="item">
<a href="<cms:show port_image />" class="image fit"><img src="<cms:show port_image />" alt="" title="<cms:show port_image_text />" /></a>
<header>
<h3><cms:show port_image_text /></h3>
</header>
</article>
</cms:show_repeatable>
</div>
<div class="4u">
<cms:show_repeatable 'portfolio_2'> 
<article class="item">
<a href="<cms:show port_image />" class="image fit"><img src="<cms:show port_image />" alt="" title="<cms:show port_image_text />" /></a>
<header>
<h3><cms:show port_image_text /></h3>
</header>
</article>
</cms:show_repeatable>
</div>
<div class="4u">
<cms:show_repeatable 'portfolio_3'> 
<article class="item">
<a href="<cms:show port_image />" class="image fit"><img src="<cms:show port_image />" alt="" title="<cms:show port_image_text />" /></a>
<header>
<h3><cms:show port_image_text /></h3>
</header>
</article>
</cms:show_repeatable>
</div>
</div>

<!-- 
<div class="4u"> holds the repeatable image part, there are the 3 containers for the 3 rows of images. 
-->

Im using 3 repeatable tags at the moment for each of the 3 rows and planned to convert those to a full functioning image gallery but i dont know how to get this working right with this 3 different containers. there is no single region i could use as a template.

Now i wonder if its possible to fix this with couch itself without editing the page and the method used to list those pictures. I tried some quick hacks allready but either broked the scaleability of the site or didnt arrange the pictures as nice as it is in the moment.

Thanks for any help!

Nils

[KK]

Hi and welcome Nils

planned to convert those to a full functioning image gallery but i dont know how to get this working right with this 3 different containers. there is no single region i could use as a template.

Can you please elaborate on what you had in mind for making it a fully functioning image gallery? Do you want to do away with the repeatable-regions and use a separate template instead (perhaps using the 'gallery' feature - http://www.couchcms.com/docs/concepts/p ... llery.html)?

Please let us know. Thanks.

Thanks for the fast reply.
At the moment i have 3 repeatable regions (for every of the 3 div containers)
if i had only one region/div container (instead of 3) my plan would be to change the repeatable region to to the pages tag like described here: http://www.couchcms.com/docs/concepts/p ... llery.html (part 4).

A solution would be to create the first gallery item in the first div container, second in the second and third in the third... after that the forth in the first container again, fifith in the second and so on.
But i dont know if its possible or how i could do that

a workaround could be using virtual folders for the three different containers but a working method without having to rely on this would be better.

Thanks for any help!

[KK]

create the first gallery item in the first div container, second in the second and third in the third... after that the forth in the first container again, fifith in the second and so on.

Right. Assuming you use a clonable template named 'gallery.php' that has regions named 'port_image' and 'port_image_text', the following code will do just that -

Code: Select all

<cms:pages masterpage='gallery.php' >

    <cms:set current_column="<cms:zebra '1' '2' '3' />" />
    
    <cms:capture into="my_column_<cms:show current_column />" 'global' >
        <cms:get "my_column_<cms:show current_column />" />
        
        <article class="item">
            <a href="<cms:show port_image />" class="image fit"><img src="<cms:show port_image />" alt="" title="<cms:show port_image_text />" /></a>
            <header>
                <h3><cms:show port_image_text /></h3>
            </header>
        </article>
    </cms:capture>
    
</cms:pages>


<div class="row" id="gallery" >
    <div class="4u">
        <cms:show my_column_1 />
    </div>
    
    <div class="4u">
        <cms:show my_column_2 />
    </div>
    
    <div class="4u">
        <cms:show my_column_3 />
    </div>
</div>

I realize that the code above might be a little too complex for you (considering that you are just getting started with Couch) so a little explanation on what it is doing -
This is the regular cms:page loop that will fetch all cloned pages in a linear fashion.

Code: Select all

<cms:pages masterpage='gallery.php' >

</cms:pages>

We want to collect the pages in three columns (first in column_1, second in column_2, third in column_3 and the fourth back in column_1).

For that we build a counter 'current_column' that gets value from cms:zebra that will go like 1, 2, 3, 1, 2, 3, 1 .. and so on.

Code: Select all

<cms:set current_column="<cms:zebra '1' '2' '3' />" />

This we use in cms:capture block to set variables 'my_column_1', 'my_column_2' and 'my_column_3' -

Code: Select all

<cms:capture into="my_column_<cms:show current_column />" 'global' >

</cms:capture>

The first statement in the cms:capture block is -

Code: Select all

<cms:get "my_column_<cms:show current_column />" />

which outputs the existing value of the same variable back into the variable thus effectively concatenating values into the columns.

Finally your old code -

Code: Select all

<article class="item">
            <a href="<cms:show port_image />" class="image fit"><img src="<cms:show port_image />" alt="" title="<cms:show port_image_text />" /></a>
            <header>
                <h3><cms:show port_image_text /></h3>
            </header>
        </article>

So what happens is that as cms:pages loops through the pages, we put the first page in my_column_1, the second in my_column_2, the third in my_column_3 and the fourth back in my_column_1 (appending it to the first page that is already in my_column_1).

This way the my_column_1, my_column_2 and my_column_3 variables come to hold the pages divided in three groups.

In the end we simply output the three columns as follows -

Code: Select all

<div class="row" id="gallery" >
    <div class="4u">
        <cms:show my_column_1 />
    </div>
    
    <div class="4u">
        <cms:show my_column_2 />
    </div>
    
    <div class="4u">
        <cms:show my_column_3 />
    </div>
</div>

Hope I was able to explain it properly
Do let me know if it helped.

wow thanks for the detailed answer and explanation
will try it this week and report back.

Works perfectly fine!
Thanks again, especially for the explanation, will use the same method for other stuff as well now

[KK]

You are welcome
I'm glad it helped.