Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
10 posts Page 1 of 1
As suggested by KK Sir, I am posting this topic here:

I am trying to use these tabs (as in attached image).

The code for the same, without the couch tags, is:

Code: Select all
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <title>Soap</title>
       <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
   
    <!--[if lt IE 7]>
        <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
    <![endif]-->

                                <!-- ///////////////////////////////////
                                   TABS
                                //////////////////////////////////// -->
                              
                                
                                   <!-- Tab Container -->
                                      <div class="tab-container">
                                   
                                         <!-- Navigation for Tabs -->
                                         <ul class="tab-nav left">
                                            <li data-tab="tab1" class="active">Tab 1</li>
                                            <li data-tab="tab2">Tab 2</li>
                                            <li data-tab="tab3">Tab 3</li>
                                         </ul>
                                   
                                   
                                          <!-- Tab Content -->
                                         <div class="tab-content-block clearfix">
                                            <!-- Tab Content -->
                                            <h3 class="v_nav v_active" data-tab="tab1">Tab 1</h3>
                                             <div id="tab1" class="tab_content clearfix">
                                                  <p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>   
                                            </div>
                                   
                                            <!-- Tab Content -->
                                            <h3 class="v_nav" data-tab="tab2">Tab 2</h3>
                                            <div id="tab2" class="tab_content">
                                                   <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                                            </div>
                                            
                                            <!-- Tab Content -->
                                            <h3 class="v_nav" data-tab="tab3">Tab 3</h3>
                                            <div id="tab3" class="tab_content">
                                                <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                                            </div>
                                            
                                         </div>
                                         <!-- End Content -->
                                      </div>
                                       <!-- End -->

                                
                                
       <!-- Start Scripts -->
      <script type="text/javascript" src="js/vendor/jquery-1.8.3.min.js"></script>
      <script type="text/javascript" src="js/fitvids.min.js"></script>
      <script type="text/javascript" src="js/fancybox/jquery.fancybox63b9.js?v=2.1.4"></script>
      <script type="text/javascript" src="js/cleantabs.jquery.js"></script>
      <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
      <script type="text/javascript" src="js/main.js"></script>   
            
                     
      
                
   </body>
</html>


and the required files are also attached in the zip folder.

What i want to achieve is that:
1. I want the entire tabs add the content for the tabs to be in a repeatable section. (That will be visible in the code)
2. I want to be able to add new tab and its content as would be the requirement.

Please throw light on the same!!!

Attachments

Image
where innovation meets technology
Hi,

It is actually quite straightforward and uses the regular technique described in our tutorials.

Following is the relevant portion of the code we'll work with -
Code: Select all
<!-- Tab Container -->
<div class="tab-container">

    <!-- Navigation for Tabs -->
    <ul class="tab-nav left">
        <li data-tab="tab1" class="active">Tab 1</li>
        <li data-tab="tab2">Tab 2</li>
        <li data-tab="tab3">Tab 3</li>
    </ul>


    <!-- Tab Content -->
    <div class="tab-content-block clearfix">
        <!-- Tab Content -->
        <h3 class="v_nav v_active" data-tab="tab1">Tab 1</h3>
        <div id="tab1" class="tab_content clearfix">
            <p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>   
        </div>

        <!-- Tab Content -->
        <h3 class="v_nav" data-tab="tab2">Tab 2</h3>
        <div id="tab2" class="tab_content">
            <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
       
        <!-- Tab Content -->
        <h3 class="v_nav" data-tab="tab3">Tab 3</h3>
        <div id="tab3" class="tab_content">
            <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
       
    </div>
    <!-- End Content -->
</div>
<!-- End -->

As can be seen form the code above, two sections of the markup are being repeated thrice (with very minimal changes) - one is for the 'tabs' and the other is for the 'contents' ('data-tab' attribute ties the two together).

Following the standard technique, we'll isolate only one instance of each repeated section. The code now becomes -
Code: Select all
<!-- Tab Container -->
<div class="tab-container">

    <!-- Navigation for Tabs -->
    <ul class="tab-nav left">
        <li data-tab="tab1" class="active">Tab 1</li>
    </ul>


    <!-- Tab Content -->
    <div class="tab-content-block clearfix">
        <!-- Tab Content -->
        <h3 class="v_nav v_active" data-tab="tab1">Tab 1</h3>
        <div id="tab1" class="tab_content clearfix">
            <p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>   
        </div>
    </div>
    <!-- End Content -->
</div>
<!-- End -->

The idea is to repeat the single instances using data from repeatable regions.
For this example, I defined a very simple repeatable region -
Code: Select all
<cms:repeatable name='my_tabs'>
    <cms:editable name='my_tab_content' type='nicedit' />
</cms:repeatable>

After creating some dummy contents, we now use the show_repeatable tag to loop through our data and repeat the markup sections we isolated above to create a tab/content pair for each row.

Following is the completed code -
Code: Select all
<!-- Tab Container -->
<div class="tab-container">

    <!-- Navigation for Tabs -->
    <ul class="tab-nav left">
        <cms:show_repeatable 'my_tabs'>
        <li data-tab="tab<cms:show k_count />" <cms:if k_count='1'> class="active"</cms:if> >Tab <cms:show k_count /></li>
        </cms:show_repeatable>   
    </ul>


    <!-- Tab Content -->
    <div class="tab-content-block clearfix">
        <!-- Tab Content -->
        <cms:show_repeatable 'my_tabs'>
        <h3 class="v_nav <cms:if k_count='1'>v_active</cms:if>" data-tab="tab<cms:show k_count />">Tab 1</h3>
        <div id="tab<cms:show k_count />" class="tab_content clearfix">
            <cms:show my_tab_content />
        </div>
        </cms:show_repeatable> 
       
    </div>
    <!-- End Content -->
</div>
<!-- End -->

The k_count variable is used to give each repeated section an identity of its own thus generating the same HTML as the one we started with.

Hope this helps.
@KK Sir!!!

Thanks a ton for the help. I got the stuff working. I made a little changes, I wanted the tabs also to be named.

So I did the following:

In template:
Code: Select all
<cms:repeatable name='my_tabs'>
       <cms:editable name='my_tab_name' label='Tab Title' type='text' />
       <cms:editable name='my_tab_content' label='Tab Content' type='nicedit' />
</cms:repeatable>


In Body:
Code: Select all
<!-- Tab Container -->
<div class="tab-container zerogrid">
   <!-- Navigation for Tabs -->
   <ul class="tab-nav left">
          <cms:show_repeatable 'my_tabs'>
             <li data-tab="tab<cms:show k_count />" <cms:if k_count='1'> class="active"</cms:if> ><cms:show my_tab_name /></li>
      </cms:show_repeatable>   
   </ul>
   <!-- Tab Content -->
   <div class="tab-content-block clearfix">
   <!-- Tab Content -->
   <cms:show_repeatable 'my_tabs'>
          <h3 class="v_nav <cms:if k_count='1'>v_active</cms:if>" data-tab="tab<cms:show k_count />">Tab 1</h3>
      <div id="tab<cms:show k_count />" class="tab_content clearfix">
   <cms:show my_tab_content />
       </div>
        </cms:show_repeatable>
</div>
<!-- End Content -->
</div>


Sir you rock and so does your idea of CouchCMS rock!!! Thanks a ton for such a lovely system that is so friendly.

Until now we use to install a CMS and then use the templates specified.
But with couch we can choose any template we want and then code the CMS into it.

Thanks once again.
Image
where innovation meets technology
You are welcome :)
hello sir,

Repeatable tabs are done, but i want repeatable images with description in repeatable tabs. please help me how can i do .
Image
where innovation meets technology
Hi,

I am afraid but repeatable regions cannot have nested repeatable regions.

I think you'll have to restructure your solution a bit to use normal cloned pages as 'tabs' and have a repeatable region within the pages to hold the images.
Hello sir,

I could not understand . So please elaborate this.
Image
where innovation meets technology
Hello Sir,

I m waiting for your reply.
Image
where innovation meets technology
Hi genxcoders,

In all fairness, there is nothing I can tell you that has not already been explained pretty profusely in the docs.
Using cloned pages with cms:pages tag is the standard procedure of how Couch is used and, I think, if you could please go through our tutorial you'll know almost everything worth knowing about the concept.

Anyways, this is how we can use cloned pages to create the tabs -
Create a separate template (say named 'tabs.php'), add it to Couch using the include statements etc.

Define the following editable region within it -
Code: Select all
<cms:template clonable='1' title='Tabs'>
    <cms:editable name='my_tab_content' type='nicedit' />
</cms:template>

As you can see, this is the same region that we defined in the repeatable region we used previously. We don't need a 'my_tab_name' region as every cloned page has a mandatory name and title region.

Now, for each tab create a cloned page. Give it the name and fill the data.

To output the tabs on the front-end, we can use the cms:pages tag to loop through the pages representing each tab like this -
Code: Select all
<!-- Tab Container -->
<div class="tab-container">

    <!-- Navigation for Tabs -->
    <ul class="tab-nav left">
        <cms:pages masterpage='tabs.php' >
        <li data-tab="tab<cms:show k_count />" <cms:if k_count='1'> class="active"</cms:if> ><cms:show k_page_title /></li>
        </cms:pages>   
    </ul>


    <!-- Tab Content -->
    <div class="tab-content-block clearfix">
        <!-- Tab Content -->
        <cms:pages masterpage='tabs.php' >
        <h3 class="v_nav <cms:if k_count='1'>v_active</cms:if>" data-tab="tab<cms:show k_count />">Tab 1</h3>
        <div id="tab<cms:show k_count />" class="tab_content clearfix">
            <cms:show my_tab_content />
        </div>
        </cms:pages> 
       
    </div>
    <!-- End Content -->
</div>
<!-- End -->

Please compare the code above with the one we used previously with repeatable regions. The two are almost identical except that now we use cms:pages for looping through the data.

Since now we are using cloned-pages, we can add other editable regions to it. You need repeatable images - simply add a region for that
<cms:template clonable='1' title='Tabs'>
<cms:editable name='my_tab_content' type='nicedit' />

<cms:repeatable name='my_images'>
<cms:editable name='my_img' type='image' />
</cms:repeatable>


</cms:template>

Each 'tab' (i.e. each cloned page) now can have n number of images.
On the front-end, the repeatable region can be displayed the usual way e.g.
Code: Select all
<!-- Tab Content -->
<cms:pages masterpage='tabs.php' >
<h3 class="v_nav <cms:if k_count='1'>v_active</cms:if>" data-tab="tab<cms:show k_count />">Tab 1</h3>
<div id="tab<cms:show k_count />" class="tab_content clearfix">
    <cms:show my_tab_content />
   
    <cms:show_repeatable 'my_images'>
        <cms:show my_img />
    </cms:show_repeatable>
   
</div>
</cms:pages>

Hope this helps.
Here is another example of creating tabs using pages picked from our forums -
viewtopic.php?p=13016#p13016
10 posts Page 1 of 1
cron