Relationship, Stash and Channel Images outputs same image

Question

I'm working on EE 2.8.1, Stash 2.5.2 and ChannelImages 5.4.15.

I'm new to Stash. In a channel entry with limit 1 if've got the following:

{exp:stash:set_list name="l_portfolio" parse_tags="yes" parse_depth="2"}

            {portfolio_related_home}
                {stash:item_title}{portfolio_related_home:title}{/stash:item_title}
                {stash:item_id}{portfolio_related_home:count}{/stash:item_id}

                {portfolio_related_home:portfolio_images limit="3" prefix="ci"}
                {if ci:count == '1'}
                     {stash:img1{portfolio_related_home:count}}{ci:url:medium}{/stash:img1{portfolio_related_home:count}}
                {/if}
                {if ci:count == '2'}
                    {stash:img2{portfolio_related_home:count}}{ci:url:small}{/stash:img2{portfolio_related_home:count}}
                {/if}
                {if ci:count == '3'}
                    {stash:img3{portfolio_related_home:count}}{ci:url:small}{/stash:img3{portfolio_related_home:count}}
                {/if}
                {/portfolio_related_home:portfolio_images}

            {/portfolio_related_home}
{/exp:stash:set_list}   

I know that it would be best to use a nested list for the portfolio images. But I only need three images and they need to be parsed in different order per related entry. Portfolio_related_home is the relationship field. portfolio_images is the ChannelImages field.

When I output stash. It almost works. The only thing is that the images per related entry are the same. So I'm getting three images witch are the same. The ci:count works but when I output ci:id or ci:url they keep the same.

{exp:stash:get_list name="l_portfolio" }
            <div>               
                {if item_id <> '2'}
                    <div class="hp-img-container" ><img src="{img1{item_id}}" />
                    <div class="hp-content"><h4>{item_title}</h4>
                    <p>{item_content}</p>
                    </div>
                    </div>
                    <img src="{img2{item_id}}" />   
                    <img src="{img3{item_id}}" />           
                {if:else}
                    <img src="{img2{item_id}}" />   
                    <img src="{img3{item_id}}" />   
                    <div class="hp-img-container" ><img src="{img1{item_id}}" />
                    <div class="hp-content"><h4>{item_title}</h4>
                    <p>{item_content}</p>
                    </div>
                    </div>                      
                {/if}
            </div>
{/exp:stash:get_list}

And the final HTML:

    <div>
        /uploads/images/18/img02__small.jpg">   
        /uploads/images/18/img02__small.jpg">
        <div class="hp-img-container">/uploads/images/18/img02__large.jpg
        <div class="hp-content"><h4>Title</h4>
        </div>
        </div>

</div>
<div>
        <div class="hp-img-container">/uploads/images/19/img03__large.jpg
        <div class="hp-content"><h4>Title 2</h4>
        </div>
        </div>
        /uploads/images/19/img03__small.jpg 
        /uploads/images/19/img03__small.jpg         
</div>

I must be doing something wrong. Or there must be a better way to do this. I hope someone can help me out?

Tnx

Answer 1

Solved it. Ended up using just stash set instead of set list. I tried a lot of variations but they didn't work. Like: set list for just the images or a nested list. I also noticed that using prefix on Channel Images inside Stash and a Related entry doesn't work. Outside the related entry it works fine with Stash.

This is what worked for me:

     {!-- ## Related entry --}
{portfolio_related_home}

        {!-- ## set stash. Don't know if procces end should be there --}
        {exp:stash:set parse_tags="yes" process="end"} 

             {!-- ## loop images and set unique stash names --}
            {portfolio_related_home:portfolio_images entry_id="{entry_id}" limit="3"} 
            {if image:count == "1"}
                {stash:img_{portfolio_related_home:count}_{image:count}}{image:url:medium}{/stash:img_{portfolio_related_home:count}_{image:count}}
            {if:else}
                {stash:img_{portfolio_related_home:count}_{image:count}}{image:url:small}{/stash:img_{portfolio_related_home:count}_{image:count}}
            {/if}
            {/portfolio_related_home:portfolio_images}
        {/exp:stash:set}


                {if portfolio_related_home:count <> '2'}
                    <div class="hp-img-container" >
                    {exp:stash:get name='img_{portfolio_related_home:count}_1'}
                    <div class="hp-content"><h4>{portfolio_related_home:title}</h4>
                    </div>
                    </div>

                    {exp:stash:get name='img_{portfolio_related_home:count}_2'} 
                    {exp:stash:get name='img_{portfolio_related_home:count}_3'}         
                {if:else}
                    {exp:stash:get name='img_{portfolio_related_home:count}_2'}     
                    {exp:stash:get name='img_{portfolio_related_home:count}_3'}     

                    <div class="hp-img-container" >
                    {exp:stash:get name='img_{portfolio_related_home:count}_1'}
                    <div class="hp-content"><h4>{portfolio_related_home:title}</h4>
                    </div>
                    </div>

                {/if}

{/portfolio_related_home}

Maybe it could help someone.

Cheers