@All Couchies,

I am using Owl Carousel (Autoplay) to display news and events items.

"news.php" and "events.php" are two different templates. But I want to display data In a single owl carousel region from both templates. Something like, 1st Item is from "news.php", 2nd item is "events.php", 3rd item is from "news.php", 4th item is from "events.php" and so on.

A maximum of 4 items each (4 from news.php and 4 from events.php) are to be displayed (4 latest items) in an alternate fashion or in continuation will also do.

Regards,
GenXCoders

[trendoman]

Logic can be the simple.

Code: Select all

<cms:capture into='owl' >
   <cms:repeat count='3' startcount='1' >
      <cms:get "news<cms:show k_count />" /> 
      <cms:get "event<cms:show k_count />" /> 
   </cms:repeat>
</cms:capture>

What you see above is an output of info, stored in variables news1, event1, news2, event2, news3, event3.

Now, let's put data into those variables. Supposedly, you use cms:pages.

Code: Select all

<cms:pages masterpage='news.php' limit='3' >
   <cms:capture into='page_content'>
       ... output of editable fields and HTML markup for a news item
   </cms:capture>
   <cms:put var="news<cms:show k_current_record />"  value=page_content scope='global' />
</cms:pages>

Once the code above works, the data of each of 3 news pages will be put into variables named news1, news2, news3.

Do the same with events, then use the code from the first part of this solution.
Good luck.

@trendoman: Thanks a Ton!!!

This is the working code (explained):
Owl Carousel has the following HTML structure

Code: Select all

<div id="owl-demo">
     <div class="item">
          ...
     </div>
     <div class="item">
          ...
     </div>
     <div class="item">
          ...
     </div>
     <div class="item">
          ...
     </div>
</div>

In my case each <div class="item">...</div> was to be repeated. The challenge being, each alternate item had to bring in a page fetched by <cms:pages>...</cms:pages> for two different templates, "news.php" and "events.php".

As @trendoman suggested in the post above, the content of each clonable page (from news.phpa and events.php) was captured into a variable, with the <div class="item">...</div> defined, as:

Code: Select all

<!-- Step 1 & 2 -->
<cms:pages masterpage='news.php' limit='4' >
   <cms:capture into='page_content'>
       <div class="item">
           <div class="col-md-12 no-margin no-padding">
               <div class="news-card-container">
                   <div class="news-card-image-header">
                       <cms:show_repeatable 'news_banner' >
                           <cms:if k_count le '1' >
                               <img src="<cms:show news_banner_images />" />
                           </cms:if>
                       </cms:show_repeatable>
                   </div>
                   <div class="news-card-body padding-10">
                       <h4><cms:excerptHTML count='3'><cms:show k_page_title /></cms:excerptHTML></h4>
                       <cms:if k_page_foldertitle>
                           <cms:set cat=k_page_foldertitle />
                       <cms:else />
                           <cms:set cat='General' />
                       </cms:if>
                       <p><small><cms:show cat /> | <cms:date k_page_date format='jS M, Y' /></small></p>
                       <cms:excerptHTML count='15'><cms:show news_desc /></cms:excerptHTML>
                   </div>
                   <div class="news-card-footer">
                       <a class="ripple button-name" href="<cms:show k_page_link />">Read More</a>
                   </div>
               </div>
               <div class="ptop-10"></div>
           </div>
       </div> 
   </cms:capture>
   <cms:put var="news<cms:show k_current_record />"  value=page_content scope='global' />
</cms:pages>

Same code for events.php clonable template with the tweaks

Each captured page was stored into a variable "owl" as:

Code: Select all

<-- Step 3 -->
<cms:capture into='owl' >
    <cms:repeat count='4' startcount='1' >
        <cms:get "news<cms:show k_count />" /> 
        <cms:get "event<cms:show k_count />" /> 
    </cms:repeat>
</cms:capture>

And finally the variable "owl" was displayed:

Code: Select all

<!-- Step 4 -->
<cms:show owl />

And viola!!! couch handled the output as was desired.

Once again, a million thanks to @KK sir for such a lovely retrofitting cms and a million thanks to my bro @trendoman for the logical solution that he put together in no time!!!

Hope this comes handy to other Couchies!!!