I have just spotted a issue with a slideshow and couchcms, it's weird and never seen it before when first built the site, think it only started happening yesterday

on the cms side, if select the image radio button then can upload the image the normal way and if select video radio button then I can enter a youtube id which is fine but on the front end, if I remove the video slide, it shows the video slide and image underneath it, below is the coding I have and attached a screenshot of the issue

Code: Select all
<cms:editable name='slides_group' label='Top Slideshow Section' type='group' collapsed='1' />
<cms:repeatable name='slides' label='Slides' stacked_layout='1' group='slides_group'>

<cms:editable name='slide_type' type='radio' label='Select slide type' opt_values='Image | Video' />
   
<cms:func _into='my_cond' slide_type=''>
        <cms:if slide_type='Image'>show<cms:else />hide</cms:if>
    </cms:func>
    <cms:editable name='my_image' label='Image' type='image' not_active=my_cond />
   
    <cms:func _into='my_cond' slide_type=''>
        <cms:if slide_type='Video'>show<cms:else />hide</cms:if>
    </cms:func>
<cms:editable name='youtube_id' label='Youtube Video ID' type='text' not_active=my_cond />
   
<cms:editable type='text' name='my_heading' label='heading' />
<cms:editable type='textarea' name='my_caption' label='caption' />
<cms:editable type='text' name='my_button_text' label='button text' />
<cms:editable type='text' name='my_button_link' label='button link' />
   
</cms:repeatable>

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
       
        <cms:show_repeatable 'slides'>
          <cms:if k_count=='1'>
        <div class="item active" style="">
            <cms:else />
        <div class="item" style="">
            </cms:if>
        <cms:if "<cms:not_empty youtube_id />" >
        <iframe width="100%" src="//www.youtube.com/embed/<cms:show youtube_id />?enablejsapi=1&rel=0" frameborder="0" id="video" allowfullscreen></iframe>           
           </cms:if>
            <cms:else />
            <img src="<cms:show my_image />" alt="" class="">
            <div class="carousel-caption">
                <h4 class=""><cms:show my_heading /></h4>
                <p class="">
                   <cms:show my_caption />
                </p>
                <cms:if my_button_text>
            <a class="button readmore" href="<cms:show my_button_link/>"><span class="buttontext"><cms:show my_button_text/></span></a>
                </cms:if>
            </div>
        </div>
              </cms:show_repeatable>
        </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
</div>


Below is what the html looks like in the source

Code: Select all
<div class="item active" style="">
                            <iframe width="100%" src="//www.youtube.com/embed/3a3kT55-fF0?enablejsapi=1&rel=0" frameborder="0" id="video" allowfullscreen></iframe>
                        <img src="https://www.domain.co.uk/cms/uploads/image/home-slideshow/welcome.jpg" alt="" class="">
        </div>


It does seem to be only on the first slide, the slides are fine there after and showing the correct code, the next slide code is below

Code: Select all
<div class="item" style="">
                                           <img src="https://www.domain.co.uk/cms/uploads/image/home-slideshow/welcome.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">Welcome</h4>
                <p class="">
                   we aim to offer a friendly, flexible and high level of service to all our customers. We offer a range of products and management services to bring improvements in air quality, including installations, correct fitting of filters, used filter disposal and free on-site surveys                </p>
                            <a class="button readmore" href="contact-us"><span class="buttontext">Contact Us</span></a>
                            </div>
        </div>


I'm not sure if the div tags are in the wrong place or is something else

UPDATE: Sorry just solved it, I rearranged some of the code and is ok now. the new code is below

Code: Select all
<cms:if "<cms:not_empty youtube_id />" >
        <iframe width="100%" src="//www.youtube.com/embed/<cms:show youtube_id />?enablejsapi=1&rel=0" frameborder="0" id="video" allowfullscreen></iframe>
            <cms:else />
            <img src="<cms:show my_image />" alt="" class="">
            </cms:if>

Attachments