I have a cloned page where all news stories and images to them are at..I would like to add news.php to my carousel.Id like to have the image for each story as well as the title in my carousel and when image clicked goes to news page from carousel...Can you show me how this is done? Ive included my code from the slider

Code: Select all

<section id="ccr-slide-main" class="carousel slide" data-ride="carousel">            
               
               <!-- Carousel items -->
               <div class="carousel-inner">
                  <div class="active item">
                     <div class="container slide-element">
                        <img src="img/slide/Agnes.jpg" alt="Main Slide Image 1">
                        <p><a href="news.html">Local resident Agnes Boggs celebrates her 100th birthday</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!--/.active /.item -->

                  
<div class="item">
                     <div class="container slide-element">
                        <img src="img/slide/kimballsite.jpg" alt="Main Slide Image 1">
                        <p><a href="news.html">ChattState Kimball Announces Early College Open House</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
<div class="item">
                     <div class="container slide-element">
                        <img src="img/slide/mcclair.jpg" alt="Main Slide Image 1">
            <p><a href="">MCHS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
                                             <div class="item">
                                          <div class="container slide-element">
                        <img src="img/slide/mcmay.jpg" alt="Main Slide Image 1">
                  <p><a href="">MCHS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
                                                <div class="item">
                                                <div class="container slide-element">
                        <img src="img/slide/mchelms.jpg" alt="Main Slide Image 1">
                  <p><a href="">MCHS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
                                        <div class="item">
                                                <div class="container slide-element">
                        <img src="img/slide/mclinedup.jpg" alt="Main Slide Image 1">
                  <p><a href="">MCHS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->

            <div class="item">
                     <div class="container slide-element">
                        <img src="img/slide/g223.jpg" alt="Main Slide Image 1">
            <p><a href="">SPHS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
                                             <div class="item">
                                          <div class="container slide-element">
                        <img src="img/slide/g260.jpg" alt="Main Slide Image 1">
                  <p><a href="">SPHS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
                                                <div class="item">
                                                <div class="container slide-element">
                        <img src="img/slide/g245.jpg" alt="Main Slide Image 1">
                  <p><a href="">SPHS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
                                        <div class="item">
                                                <div class="container slide-element">
                        <img src="img/slide/g279.jpg" alt="Main Slide Image 1">
                  <p><a href="">SPHS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
      
                                <div class="item">
                     <div class="container slide-element">
                        <img src="img/slide/young.jpg" alt="Main Slide Image 1">
            <p><a href="">WHS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
                                             <div class="item">
                                          <div class="container slide-element">
                        <img src="img/slide/blair.jpg" alt="Main Slide Image 1">
                  <p><a href="">WHS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
                                                <div class="item">
                                                <div class="container slide-element">
                        <img src="img/slide/hale.jpg" alt="Main Slide Image 1">
                  <p><a href="">WHS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
                                        <div class="item">
                                                <div class="container slide-element">
                        <img src="img/slide/whs.jpg" alt="Main Slide Image 1">
                  <p><a href="">WHS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
      
                                          <div class="item">
                     <div class="container slide-element">
                        <img src="img/slide/tate.jpg" alt="Main Slide Image 1">
            <p><a href="">RHMS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
                                             <div class="item">
                                          <div class="container slide-element">
                        <img src="img/slide/grad1.jpg" alt="Main Slide Image 1">
                  <p><a href="">RHMS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
                                                <div class="item">
                                                <div class="container slide-element">
                        <img src="img/slide/grad2.jpg" alt="Main Slide Image 1">
                  <p><a href="">RHMS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
                                        <div class="item">
                                                <div class="container slide-element">
                        <img src="img/slide/grad6.jpg" alt="Main Slide Image 1">
                  <p><a href="">RHMS Graduation</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->
      




<div class="item">
                     <div class="container slide-element">
                        <img src="img/slide/doc.jpg" alt="Main Slide Image 1">
                        <p><a href="news.html">Sick or under the weather? The doctor is just a click away</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- .item -->

                  <div class="item">
                     <div class="container slide-element">
                        <img src="img/slide/child.jpg" alt="Main Slide Image 1">
                        <p><a href="news.html">Boy dies from blunt force trauma two days before Child Abuse Prevention Month</a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!-- /.item -->

                  
               </div> <!-- /.carousel-inner -->
               
               <!-- slider nav -->
               <a class="carousel-control left" href="#ccr-slide-main" data-slide="prev"><i class="fa fa-arrow-left"></i></a>
               <a class="carousel-control right" href="#ccr-slide-main" data-slide="next"><i class="fa fa-arrow-right"></i></a>

               <ol class="carousel-indicators">
                  <li data-target="#ccr-slide-main" data-slide-to="0" class="active"></li>
                  <li data-target="#ccr-slide-main" data-slide-to="1"></li>
                  <li data-target="#ccr-slide-main" data-slide-to="2"></li>
                  <li data-target="#ccr-slide-main" data-slide-to="3"></li>
               </ol> <!-- /.carousel-indicators -->

                     
         </section><!-- /#ccr-slide-main -->

[KK]

The technique remains the same as that demonstrated in our tutorial (http://www.couchcms.com/docs/tutorials/portfolio-site/) for both the 'blog' and the 'portfolio' sections.

Essentially, you need to use only one item (slide of the carousel in this case) and then wrap it with the <cms:pages masterpage='whatever_template.php'>..</cms:pages> tag.
The 'masterpage' parameter should be set to the template you wish to show the data from.

As an example you can also see the following thread -
viewtopic.php?f=4&t=9233

The aforementioned thread uses 'repeatable regions' but you can very easily adapt it to use cloned-pages by swapping the cms:show_repeatable tag with cms:pages as follows

Original -

Code: Select all

<div class="carousel-inner">
    <cms:show_repeatable 'content_slides'>
        ..
        ..
    </cms:show_repeatable>
 </div><!--/.carousel-inner-->

Modified -

Code: Select all

<div class="carousel-inner">
    <cms:pages masterpage='whatever_template.php' limit='10'>
        ..
        ..
    </cms:pages>
</div><!--/.carousel-inner-->

Hope it helps.

Im trying to set it using the Masterpage tag however I m having an issue with the class "Active" div ..Upon choosing a div it breaks the carousel and just shows the images down the screen.

[KK]

Please do a view-source to take a look at the generated HTML. Compare it with your original static HTML and you should be able to spot the problem.

Ive been working with the slider and viewed the source code...Ive got the slider to where it will slide an image 1 time then it stops.Can you see where Im going wrong?

Code: Select all

<section id="ccr-slide-main" class="carousel slide" data-ride="carousel">            
               
               <!-- Carousel items -->
               <div class="carousel-inner">
         <cms:pages masterpage='news.php' limit='6' >         
            
<div class="item<cms:if k_count='1'>active</cms:if>">
                     <div class="container slide-element">
                        <img src="<cms:show News_image />" alt="Main Slide Image 1">
                        <p><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></p>
                     </div> <!-- /.slide-element -->
                  </div> <!--/.active /.item -->
                                       
               </cms:pages >   
               </div> <!-- /.carousel-inner -->
               
               <!-- slider nav -->
               <a class="carousel-control left" href="#ccr-slide-main" data-slide="prev"><i class="fa fa-arrow-left"></i></a>
               <a class="carousel-control right" href="#ccr-slide-main" data-slide="next"><i class="fa fa-arrow-right"></i></a>

               <ol class="carousel-indicators">
                  <li data-target="#ccr-slide-main" data-slide-to="<cms:show k_count/>"<cms:if k_count='1'>class="active"</cms:if>></li>
                  <li data-target="#ccr-slide-main" data-slide-to="1"></li>
                  <li data-target="#ccr-slide-main" data-slide-to="2"></li>
                  <li data-target="#ccr-slide-main" data-slide-to="3"></li>
               </ol> <!-- /.carousel-indicators -->

                     
         </section><!-- /#ccr-slide-main -->

[KK]

Since you are using Bootstrap Carousel Plugin, I'll give you a working example completely ported to Couch. I'm sure you'll be able to adapt it to your design.

The original static markup is this -

Code: Select all

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img_chania.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="img_chania2.jpg" alt="Chania" width="460" height="345">
      </div>
    
      <div class="item">
        <img src="img_flower.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="img_flower2.jpg" alt="Flower" width="460" height="345">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div>

As can be seen from the code above, there are *two* blocks that depend on the number of slides the carousel has -
1. Indicators
2. Wrapper for slides

Each block has an item per slide
All the items are almost identical except that
a. the first item in both sections indicates a 'active' value
b. the 'data-slide-to' attribute begins with 0 and increases with each slide.

While making the markup dynamic (as we do next) we'll have to keep these differences in mind as we'll have to recreate them perfectly.

We'll begin by deleting all items except the first one in each section. The relevant part of the static code now becomes -

Code: Select all

<!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="img_chania.jpg" alt="Chania" width="460" height="345">
  </div>
</div>

We finally add the cms:pages tag to the code -

Code: Select all

<!-- Indicators -->
<ol class="carousel-indicators">
<cms:pages masterpage='whatevertemplate.php' limit='6' startcount='0'>    
  <li data-target="#myCarousel" data-slide-to="<cms:show k_count />" <cms:if k_count='0'>class="active"</cms:if>></li>
</cms:pages>  
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<cms:pages masterpage='whatevertemplate.php' limit='6' startcount='0'> 
  <div class="item <cms:if k_count='0'>active</cms:if>">
    <img src="<cms:show some_image />" alt="<cms:show k_page_title />" width="460" height="345">
  </div>
</cms:pages>  
</div>

Please notice that we had to use cms:pages tag *twice* because there were two separate sections that varied with the number of slides. Also that we used startcount='0' because the first slide needed a '0' as its id.

The full code -

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
    <cms:pages masterpage='whatevertemplate.php' limit='6' startcount='0'>    
      <li data-target="#myCarousel" data-slide-to="<cms:show k_count />" <cms:if k_count='0'>class="active"</cms:if>></li>
    </cms:pages>  
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
    <cms:pages masterpage='whatevertemplate.php' limit='6' startcount='0'> 
      <div class="item <cms:if k_count='0'>active</cms:if>">
        <img src="<cms:show some_image />" alt="<cms:show k_page_title />" width="460" height="345">
      </div>
    </cms:pages>  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

Hope it helps.

I finally got it KK and have a much better understanding of Couch Cms now as well....Thank you for your patience and very helpful knowledge.

[KK]

You are welcome