Stashing images from a Matrix field grabs only the image from the last entry on the page

Question

Inside of my entries loop I have a Matrix field called {blog_images} where the user can store up to 10 images. The user then determines where these images should appear in the content area ({blog_post_content}) using shortcodes like this:

<p>First paragraph is here.</p>
{image_1}
<p>Second paragraph is here.</p>
{image_2}
<p>…</p>

Currently I'm using Stash to loop through the Matrix images and store them for insertion into {blog_post_content}. Strange thing is if I have 10 entries appear on the page, every entry is showing only the image from the LAST entry instead of its own image.

Here is my existing code:

{blog_images}
    {exp:stash:set type="snippet" parse_tags="yes" parse_conditionals="yes"}
        {stash:image_{row_count}}
            <figure class="{placement} {size}">
                {exp:ce_img:pair src="{image}" width="{size}" allow_scale_larger="no" cache_dir="images/blog" hide_relative_path="yes" parse="inward"}
                    <img src="/assets/images/css/holder.png" width="{width}" height="{height}" data-src="{made}" alt="{alt_text}">
                {/exp:ce_img:pair}
                {if caption}
                    <figcaption>
                        {caption}
                    </figcaption>
                {/if}
            </figure>
        {/stash:image_{row_count}}
    {/exp:stash:set}
{/blog_images}
{exp:stash:parse process="end"}
    {blog_post_content}
{/exp:stash:parse}

Any idea what I'm doing wrong?

Answer 1

Are you using the latest version of Stash (as of writing 2.3.9)? Your code should work but a few versions back there was a bug in {exp:stash:parse} which meant that parse_vars didn't get run under certain circumstances.

https://github.com/croxton/Stash

EDIT: just realised you've left off the wrapping channel entries tag which would have made it clear why your code can't possibly work unless limit='1'. You are overwriting the value of {image_x} with each iteration of the channel entries tag. The solution is to use a list with the entry id as a context. I will update this answer with sample code shortly.

EDIT2: use context and the @ pointer to point to the static context:

{exp:channel:entries}
{blog_images}
    {exp:stash:set type="snippet" context="{entry_id}" parse_tags="yes" parse_conditionals="yes"}
        {stash:image_{row_count}}
            <figure class="{placement} {size}">
                {exp:ce_img:pair src="{image}" width="{size}" allow_scale_larger="no" cache_dir="images/blog" hide_relative_path="yes" parse="inward"}
                    <img src="/assets/images/css/holder.png" width="{width}" height="{height}" data-src="{made}" alt="{alt_text}">
                {/exp:ce_img:pair}
                {if caption}
                    <figcaption>
                        {caption}
                    </figcaption>
                {/if}
            </figure>
        {/stash:image_{row_count}}
    {/exp:stash:set}
{/blog_images}
{exp:stash:parse process="end" parse_depth="2"}
    {exp:stash:context name="{entry_id}"}
    {blog_post_content}
{/exp:stash:parse}
{/exp:channel:entries}

Only caveat is that you'll need to refer to the images like this in the {blog_post_content} field:

{@:image_1}, {@:image_2}, etc

Answer 2

Your exp:stash:set is inside a channel entries loop? I think you might be better off using stash:set_list in place of stash:set. stash:set is often used to surround an entries loop, whereas stash:set_list is used inside the loop, stashing elements within the loop into a list (hence the name). I think set_list may be more consistent with what you're looking to do.