Forum for discussing general topics related to Couch.
14 posts Page 1 of 2
Hi. So first real world project on couch, will be purchasing a license soon. It's a simple 3 page site and everything's going smoothly, except for one issue. We are forced to use backend logic (since CSS does not natively support equal height columns in rows - except for flexbox, perhaps).
Screenshot attached.
Basically, I need to output two divs within a 'row' div (I'm using CSS tables for this to get equal height divs in each row. My programmer has helped me with the same and it works as expected, but we were wondering whether this is the optimal solution.
Here is the code we are using and it works, would be great if you can go through and advise if there's a better option.

<div class="recentProjects">
<cms:show_repeatable startcount='0' 'home_projects'>

<cms:set remainder="<cms:mod k_count '2' />" />

<cms:if remainder='0'>
<div class="projectEachRow">
</cms:if>
<div class="projectEachBlock">
<div class="projectEach">
<div class="projectImg">
<img src="<cms:show home_project_image />" alt="<cms:show home_project />">
</div>
<div class="projectText">
<div><strong><cms:show home_project /></strong></div>
<div class="projectDesc"><cms:show home_project_text />Researched and wrote report contrasting "green" and "gray" (natural vs. engineered) approaches to climate change adaptation in California.</div>
</div>
</div>
</div> <!-- /projectEachBlock -->

<cms:if remainder='1'>
</div> <!-- /projectEachRow -->
</cms:if>

<cms:set count_1="<cms:add k_count '1' />" />
<cms:if (remainder='0') && (count_1 == k_total_records)>
</div> <!-- /projectEachRow -->
</cms:if>

</cms:show_repeatable>


</div> <!-- end recent projects -->


If you need to take a look, here is the markup generated from the code above, pasted from viewing the source

<div class="projectEachRow">

<div class="projectEachBlock">
<div class="projectEach">
<div class="projectImg">
<img src="http://jimdowning.local.com/cms/uploads/image/dummy-1.jpg" alt="Hi there lovely">
</div>
<div class="projectText">
<div><strong>Hi there lovely</strong></div>
<div class="projectDesc">Weather&#039;s great aint it?Researched and wrote report contrasting "green" and "gray" (natural vs. engineered) approaches to climate change adaptation in California.</div>
</div>
</div>
</div> <!-- /projectEachBlock -->

<div class="projectEachBlock">
<div class="projectEach">
<div class="projectImg">
<img src="http://jimdowning.local.com/cms/uploads/image/clients/us-fish-wildlife.jpg" alt="foobar">
</div>
<div class="projectText">
<div><strong>foobar</strong></div>
<div class="projectDesc">uhuhu ygygygygygyResearched and wrote report contrasting "green" and "gray" (natural vs. engineered) approaches to climate change adaptation in California.</div>
</div>
</div>
</div> <!-- /projectEachBlock -->


</div> <!-- /projectEachRow -->
<div class="projectEachRow">

<div class="projectEachBlock">
<div class="projectEach">
<div class="projectImg">
<img src="http://jimdowning.local.com/cms/uploads/image/dummy-1.jpg" alt="yessir">
</div>
<div class="projectText">
<div><strong>yessir</strong></div>
<div class="projectDesc">i knowResearched and wrote report contrasting "green" and "gray" (natural vs. engineered) approaches to climate change adaptation in California.</div>
</div>
</div>
</div> <!-- /projectEachBlock -->
</div> <!-- /projectEachRow -->

Thanks,
Karen

Attachments

Hi Karen,

We programmers follow an unwritten law - so long as something works, it is fine :)
There can be several ways of coding up the same thing and your approach is as good as any.
One way could also be the following -

First to reiterate the problem - we want to 'wrap' every two projects within a particular div (keeping in mind that the very last project might not have a 'partner' project if it is an odd number e.g. 11)

Here is some code that does just that (I have not outputted the project to keep the focus on the relevant portion only)
Code: Select all
<cms:show_repeatable 'home_projects' >
    <cms:set my_count="<cms:zebra '1' '2' />" />
    <cms:if my_count='1'>
        <div class="projectEachRow">
    </cms:if>
   
    <!-- display project block here the normal way -->
   
    <cms:if my_count='2' || k_count=k_total_records>
        </div> <!-- /projectEachRow -->
    </cms:if>
</cms:show_repeatable >

The logic is simple. We use the cms:zebra tag to with two parameters '1' and '2' to set a variable named 'my_count'. This makes the value of my_count '1' at first iteration, '2' at second iteration, '1' again at third iteration, '2' at fourth and so on..

When my_count is 1, we output the opening div.
When my_count is 2 (or we are at the last project), we output the closing div.
Simple :)

Hope this helps. Do let us know.
Thanks.
Hi Karen,

I see that you mention equal heights columns, I don't know if JavaScript is ok, but there is a solution named equilaze.js.

You can check it here, http://tsvensen.github.io/equalize.js/
Ha ha this is a nice and clean solution. Works perfectly! The other snippet was a bit convoluted, as you can see. Good use case for zebra. Thanks so much. It's crazy how quickly you respond, thanks again :)
KK wrote:
Code: Select all
    <cms:set my_count="<cms:zebra '1' '2' />" />
    <cms:if my_count='1'>
        <div class="projectEachRow">
    </cms:if>
   
    <!-- display project block here the normal way -->
   
    <cms:if my_count='2' || k_count=k_total_records>
        </div> <!-- /projectEachRow -->
    </cms:if>


Using the code above I tried to output on 2 columns pages of a clonable template in list view. Everything works fine except the situation when there is no page to display on 2nd column. In this case the div doesn't close, and the right sidebar of the webpage is moved in this 2nd column. So it's something related to k_count=k_total_records or should I change something in the code above?
For cases where there is nothing to display in the second div (i.e. there are odd number of rows in the repeatable region). the k_count=k_total_records statement should close the div.

Please put a cms:dump tag and see whether 'k_count' increments upto the 'k_total_records' as expected.

Thanks.
Dear madebym,
This is with reference to your response on Oct 5th to use JS to achieve equal heights (Sorry just saw it now). Just to clarify, whether one uses CSS or JS, one still has to output the divs in a wrapper 'row div', so that the height of the tallest div is calculated and applied to the other div, for equal heights. This was more a question of how to use couch to output the divs in rows..

For equal height divs, the new flexbox CSS spec is wonderful. I'm experimenting a lot with it, though it's a bit early to adopt on real world projects :)

Regards,
Karen
KK, as it seems pagination is the guilty one for not closeing the div. I forgot to mention that I use pagination with limit set to 6, so k_count increase to 6 on first page and after that on the second page it starts again with 1. That's why k_count never reach k_total_records and the div doesn't close at last odd page. It is possible to fix this?
Thank you.
@atisz,

I am a little confused - pagination with repeatable regions?
I think I'll need to take a look at the exact code you are using to know how you've structured things.

Could you please post in (or PM me a zip) of the code you are using?

Thanks.
Sorry, KK. It seems that sometimes I can't make myself clear enough :) No, it's not about reapetables, it's about cloned pages. Here is the code:
Code: Select all
<cms:pages masterpage='blog.php'
                        folder=k_folder_name
                        start_on=k_archive_date
                        stop_before=k_next_archive_date
                        limit='6'
                        paginate='1'
                                folder='NOT Featured' >
          <cms:set my_count="<cms:zebra '1' '2' />" />
          <cms:if my_count='1'>
              <div class="article-row">
          </cms:if>
          <div class="article">
            <h1><a href="<cms:show k_page_link/>"><cms:excerptHTML count='13'><cms:show k_page_title /></cms:excerptHTML></a></h1>
               <!--<cms:if k_page_foldertitle >
               <cms:set my_category=k_page_foldertitle />
               <cms:else />
                  <cms:set my_category='Uncategorised' />
            </cms:if> -->
            <img class="articleimg" src="<cms:show foto />" width="420" height="115" alt="<cms:show fotoalt />" />
            <div class="article-info">
               <ul>
                  <li><i class="icon-calendar"></i> <cms:date k_page_date format='d.m.Y' /></li>
                   <li><i class="icon-user"></i> <cms:show autor /></li>
                   <li><i class="icon-comments"></i> <cms:show k_comments_count /> comments</li>
                   <li><i class="icon-folder-open"></i> <cms:show k_page_foldertitle /></li>
               </ul>
            </div>
            <cms:excerptHTML count='60' ignore='img'><cms:show article /></cms:excerptHTML>
         <a href="<cms:show k_page_link/>" class="button">Read more</a>
          </div>
          <cms:if my_count='2' || k_count=k_total_records>
              </div>
          </cms:if>
          <cms:paginator />
        </cms:pages>
14 posts Page 1 of 2