Hi everyone!

I'm currently learning couch and it's amazing so far, thank you guys behind this awesome piece of art! I wonder if someone could help me with below problem I'm facing, the site i'm converting is using a really cool slider which I want to use to show the latest 3 blog posts, the problem is that the slider backgrounds is not definded in each slide DIV and hence they will be outside the loop if that makes sence? How can I resolve this? Thanks in advance!

Code: Select all

<div id="animate-slider" class="animate-slider alltogether-loadbars carousel dots-over as-overlay in-page-scroll" data-background-0="img/backgrounds/home-background-01.jpg" data-background-1="img/backgrounds/home-background-02.jpg" data-background-2="img/backgrounds/home-background-03.jpg">

                    <div class="slide hs-content">
                        <div class="hs-content-inner">
                            <div class="delay0-1s" data-effect-in="fadeInUp" data-effect-out="zoomOut">
                                <h1 class="hs-text-4 font-second">Slide 3</h1>
                            </div>
                        </div>
                    </div> 
                    <div class="slide hs-content">
                        <div class="hs-content-inner">
                            <div class="delay0-1s" data-effect-in="fadeInUp" data-effect-out="zoomOut">
                                <h1 class="hs-text-4 font-second">Slide 3</h1>
                            </div>
                        </div>
                    </div>
                    <div class="slide hs-content">
                        <div class="hs-content-inner">
                            <div class="delay0-1s" data-effect-in="fadeInUp" data-effect-out="zoomOut">
                                <h1 class="hs-text-4 font-second">Slide 3</h1>
                            </div>
                        </div>
                    </div>
                    
<div class="as-indicators"></div>
</div>

and this is the loop i'm using:

Code: Select all

<cms:pages masterpage='blog.php' 
                  folder=k_folder_name 
                  start_on=k_archive_date 
                  stop_before=k_next_archive_date 
                  paginate='1' 
                  limit='3' >

Thanks!

Hi tobbs.

It doesn't seem that it needs any resolution. The backgrounds can remain as they are. Simply loop through the slides.

Code: Select all

<cms:pages masterpage='blog.php'
                  folder=k_folder_name
                  start_on=k_archive_date
                  stop_before=k_next_archive_date
                  limit='3' >
   <div class="slide hs-content">
       <div class="hs-content-inner">
           <div class="delay0-1s" data-effect-in="fadeInUp" data-effect-out="zoomOut">
               <h1 class="hs-text-4 font-second">Slide <cms:show k_count/></h1>
           </div>
       </div>
   </div>
</cms:pages>

If you wanted to make the backgrounds dynamic also, you could loop through them separately.

Code: Select all

<div id="animate-slider" class="animate-slider alltogether-loadbars carousel dots-over as-overlay in-page-scroll" 
<cms:pages masterpage='blog.php' limit='3' > data-background-<cms:sub k_count '1' />="img/backgrounds/home-background-0<cms:show k_count/>.jpg"</cms:pages> >

It's possible that I misunderstood your numbering scheme, or the problem you're having. But try this. I think it will accomplish your goal. Let us know if you still need more help.

P.S. I removed the paginate parameter. It doesn't seem necessary in this context.

Thanks for your quick reply Tim! With that solution, will it really take the image that is attached to the specific post tho (different names) or do I missunderstand you?

In the blog template, I have created a image filed which i named "blog_image" and that's the image I want as background on the slider, and the text on the slider will be the "post_title" and a button to the full blog post. Sorry if I'm bad at explaining

This is how I what I come up with so far (which doesn't work for the bg image ) as i cant put the <cms:show blog_image /> outside the loop?

Code: Select all

<div id="animate-slider" class="animate-slider alltogether-loadbars carousel dots-over as-overlay in-page-scroll" data-background-0="img/backgrounds/home-background-01.jpg" data-background-1="img/backgrounds/home-background-02.jpg" data-background-2="img/backgrounds/home-background-03.jpg">

<cms:pages masterpage='blog.php'
                  folder=k_folder_name
                  start_on=k_archive_date
                  stop_before=k_next_archive_date
                  limit='3' >
                    <div class="slide hs-content">
                        <div class="hs-content-inner">
                            <div class="delay0-1s" data-effect-in="fadeInUp" data-effect-out="zoomOut">
                                <h1 class="hs-text-4 font-second"><cms:show k_page_title /></h1>
                                <a href="<cms:show k_page_link />">&raquo;&nbsp;Read full post</a>
                            </div>
                        </div>
                    </div>
</cms:pages >

Thanks again!

OK, good. Now, let's put another loop at the top where you're setting the bg-image.

Code: Select all

<div id="animate-slider" class="animate-slider alltogether-loadbars carousel dots-over as-overlay in-page-scroll" data-background-0="img/backgrounds/home-background-01.jpg" data-background-1="img/backgrounds/home-background-02.jpg" data-background-2="img/backgrounds/home-background-03.jpg">

becomes

Code: Select all

<div id="animate-slider" class="animate-slider alltogether-loadbars carousel dots-over as-overlay in-page-scroll" 
<cms:pages masterpage='blog.php'
                  folder=k_folder_name
                  start_on=k_archive_date
                  stop_before=k_next_archive_date
                  startcount='0'
                  limit='3' >
data-background-<cms:show k_count />="<cms:show blog_image />" </cms:pages> >

This uses the k_count variable to number the data-background parameters, and blog_image for the source of the image. Does that get it working?

You see, in both cases the pages tag is calling the same three pages in the same order. So the images match up with the blog post even though you're not grabbing them at the same time within the same loop.

Hope that helps.

I missed that you replied

Ohh man, TIM - You are the man - It works!!! Thank you so much for taking your time to help me! I dont understand how the two loops are "aware" of eachother, but I don't mind haha as it works

Have a good one mate, thanks again!