I am trying to get a slideshow that has a video as the first slide and images as the other slides working with couchcms, I've looked on google and came up with the following coding from what I have seen in similar posts but the HTML is not right and can't work this one out, the coding I have is below. I thought I would try and get it working on a cms demo site first before putting it on the clients site

Code: Select all

<cms:template title='Slideshow Page' order='10'>

<cms:repeatable name='content_slides' >

<cms:editable type='image' name='my_image' label='Photo' />
<cms:editable type='text' name='youtube_id' label='Youtube Video ID' />
<cms:editable type='text' name='my_heading' label='heading' />
<cms:editable type='textarea' name='my_caption' label='description' />
<cms:editable type='text' name='my_link' label='button text' />
   
</cms:repeatable>

</cms:template>

     <div id="MiddleCarousel" class="carousel slide UACarousel" data-ride="carousel">
  <div class="carousel-inner">
  <cms:show_repeatable 'content_slides'>
  <cms:if k_count=='1'>
      <cms:if "<cms:not_empty youtube_id />" >
  <div class="carousel-item active">
      <cms:else />
    <div class="carousel-item">
    <iframe width="100%" src="//www.youtube.com/embed/<cms:show youtube_id />" frameborder="0" id="video" allowfullscreen></iframe>
        </cms:if>
      </cms:if>
            <cms:else />
      <img class="d-block w-100" src="<cms:show my_image />" alt="" />
          <div class="carousel-caption">
                <h4 class=""><cms:show my_heading /></h4>
                <p class="">
                   <cms:show my_caption />
                </p>

                <a class="button readmore" href="<cms:show my_link/>"><span class="buttontext"><cms:show my_link/></span></a>
            </div>
    </div>
   </cms:show_repeatable>
  </div>
  <a class="carousel-control-prev" href="#MiddleCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#MiddleCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
        
    </div>

The HTML in the source code is below

Code: Select all

<div id="MiddleCarousel" class="carousel slide UACarousel" data-ride="carousel">
  <div class="carousel-inner">
            <div class="carousel-item active">
                              <img class="d-block w-100" src="" alt="" />
          <div class="carousel-caption">
                <h4 class=""></h4>
                <p class="">
                                   </p>

                <a class="button readmore" href=""><span class="buttontext"></span></a>
            </div>
    </div>
                       <img class="d-block w-100" src="https://www.beechwoodsolutions.co.uk/sites/cmsdemo/cms/uploads/image/cleaning-banner-1.jpg" alt="" />
          <div class="carousel-caption">
                <h4 class=""></h4>
                <p class="">
                                   </p>

                <a class="button readmore" href=""><span class="buttontext"></span></a>
            </div>
    </div>
     </div>
  <a class="carousel-control-prev" href="#MiddleCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#MiddleCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
        
    </div>
        
      </div>

The url is https://www.beechwoodsolutions.co.uk/si ... w-page.php

I have got it working now with moving some coding around, my last question is the link button text

I have added READ MORE in the button text but is there a way the admin user can put a link in themselves so they can choose what page the link goes to, my coding I have now is below

Code: Select all

<cms:template title='Slideshow Page' order='10'>

<cms:repeatable name='content_slides' >

<cms:editable type='image' name='my_image' label='Photo' />
<cms:editable type='text' name='youtube_id' label='Youtube Video ID' />
<cms:editable type='text' name='my_heading' label='heading' />
<cms:editable type='textarea' name='my_caption' label='description' />
<cms:editable type='text' name='my_link' label='button text' />
   
</cms:repeatable>

</cms:template>

<div id="MiddleCarousel" class="carousel slide UACarousel" data-ride="carousel">
  <div class="carousel-inner">
  <cms:show_repeatable 'content_slides'>
  <cms:if k_count=='1'>
  <div class="carousel-item active">
      <cms:else />
    <div class="carousel-item">
    </cms:if>
      <cms:if "<cms:not_empty youtube_id />" >
          <iframe width="100%" src="//www.youtube.com/embed/<cms:show youtube_id />" frameborder="0" id="video" allowfullscreen></iframe>
        </cms:if>
      <cms:else />
      <img class="d-block w-100" src="<cms:show my_image />" alt="" />
      <div class="carousel-caption">
                <h4 class=""><cms:show my_heading /></h4>
                <p class="">
                   <cms:show my_caption />
                </p>

                <a class="button readmore" href="<cms:show my_link/>"><span class="buttontext"><cms:show my_link/></span></a>
            </div>
    </div>
   </cms:show_repeatable>
  </div>
  <a class="carousel-control-prev" href="#MiddleCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#MiddleCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
            
      </div>