4

I want to output my Playa relationship entries into a slideshow. The relationships are linked to a channel field that has one image per listing. The tricky thing is that I want to output 5 images per row for use in the slideshow. Any advice on how I could do this? I've posted my code below, in which all the entries are returned (All images are being spit out in one slide).

    <div class="cycle-slideshow" 
        data-cycle-fx="scrollHorz" 
        data-cycle-timeout="1000"
        data-cycle-slides="> div"
        >
        {exp:channel:entries channel="home" dynamic="off" disable="categories|category_fields|member_data|pagination"}
            <div>
                <ul class="client-list">
                    {exp:playa:children}
                    <li><div style="background: url({exp:ed_imageresizer image="{logos}" alt="{title}" maxWidth="160" maxHeight="80" href_only="yes"}) no-repeat center center; hfive: 98px;" cropratio="116:104"></div></li>
                    {/exp:playa:children}
                </ul>
            </div>
        {/exp:channel:entries}
    </div>

2 Answers 2

3

You'll need to conditionally output your html. You can do this with the switch variable (which is supported within Playa loops), or using an add-on you can use modulo.

If I understand your jQuery Cycle setup and and how you want the HTML output to be structured, then the following should do the trick:

Use switch to close the list of images and the div that represents a slide every 5 child entries. At the same time, open a new slide div and image list to contain the next round of children.

{exp:channel:entries channel="home" dynamic="off" disable="categories|category_fields|member_data|pagination"}
    <div>
        <ul class="client-list">
            {exp:playa:children}

                <li><div style="background: url({exp:ed_imageresizer image="{logos}" alt="{title}" maxWidth="160" maxHeight="80" href_only="yes"}) no-repeat center center; hfive: 98px;" cropratio="116:104"></div></li>

                {switch='||||</ul></div><div><ul class="client-list">'}

            {/exp:playa:children}
        </ul>
    </div>
{/exp:channel:entries}
1
  • This is exactly correct and works perfectly! Thanks Alex. Commented Jan 2, 2013 at 16:59
0

If the issue is that you only want five list items per ul.client-list, {exp:playa:children limit="5"} should work, I think.

Otherwise, you'll need to look at the switch option outlined by Alex.

1
  • Thanks Nick, it's Alex's solution I was looking for. Appreciate your input. Commented Jan 2, 2013 at 17:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.