Building a set of list items using Stash. Not working as expected

Question

A while back I built a simple image slider that used "featured" entries from an EE channel. This all works great but did mean that I had to run 2 {exp:entries} tag pairs - the first to get the big images, the second to get the thumbnails. The items were ordered by entry_id so it all worked great.

I now need to randomise the order of the items in the slider - not normally a problem since I can just add an order_by="random" parameter. The issue comes in that I'm using 2 tag pairs and need the order to be random but the same for both pairs.

I figured I could use a single entries tag pair, ordered randomly and use Stash to build a set of list items that I can use to output the image thumbnails but I'm having trouble getting it to output more than just one item.

Here's a slightly simplified code block showing the basic premise of what I'm trying to do. The only real difference is that I've removed the ce_image tags for outputting the images themselves.

{exp:channel:entries channel="properties" dynamic="off" search:property-featured="=y" orderby="random"}

    {if {count}==1}<ul class="slides" id="slides">{/if}
        {!-- first output the big image --}
        <li><img src="{big-image}" alt="{alt-text}"></li>

        {!-- now I want to append a list item to a Stash variable for use a bit later --}
        {exp:stash:set append="yes" name="thumbs" parse_tags="yes" replace="no"}
            <li><a href="{file}"><img src="{small-image}" alt="{alt-text}"></a></li>    
        {/exp:stash:set}

    {if "{count}"=="{total_results}"}
    </ul>

    <div id="slidethumbs">
        <a href="#" id="prev-slide" class="pager-arrow"><img src="/images/leftarrow.png" alt=""></a>
        <ul id="slidethumbs-list">

            {!-- this is where Stash should output the list items --}
            {exp:stash:get name="thumbs"}   

        </ul>
        <a href="#" id="next-slide" class="pager-arrow"><img src="/images/rightarrow.png" alt=""></a>
    </div>

    {/if}
{/exp:channel:entries}

I haven't used Stash before so may be missing something obvious but I thought this was how Stash worked. Have I got the wrong end of the stick or am I simply overlooking something?

Answer 1

You are running into a parse order issue. Here is a somewhat simplified version of what you did but another way to approach it:

{exp:channel:entries channel="properties" dynamic="off" search:property-featured="=y" orderby="random"}
    {exp:stash:append name="big_images"}
        <li><img src="{big-image}" alt="{alt-text}"></li>
    {/exp:stash:append}

    {exp:stash:append name="thumbs"}
        <li><a href="{file}"><img src="{small-image}" alt="{alt-text}"></a></li>    
    {/exp:stash:append}
{/exp:channel:entries}

<ul class="slides" id="slides">
    {exp:stash:get name="big_images" process="end"}
</ul>

<div id="slidethumbs">
    <a href="#" id="prev-slide" class="pager-arrow"><img src="/images/leftarrow.png" alt=""></a>
    <ul id="slidethumbs-list">
        {exp:stash:get name="thumbs" process="end"}
    </ul>
    <a href="#" id="next-slide" class="pager-arrow"><img src="/images/rightarrow.png" alt=""></a>
</div>

So you set the stashes in the channel entries, and then outside of it retrieve it.