Loop_plus dynamic variable not parsing

Question

So I am using the loop_plus plug-in to generate dynamic variable names with each iteration of a section of the page. My code is as follows:

<div id="portfolio_items">
  {exp:channel:entries channel="portfolio-section" url_title="{segment_3}"}
    {exp:loop_plus start="1" increment="1" parse="inward"}
 <div class="portfolio_item overlayed_animated_highlight portfolio_item_3 design">
   <div class="overlayed">
     <img src="{image-{index}}" alt="">
    <div class="overlay">
    <p>
    <a href="{image-{index}}" class="fancybox" data-fancybox-group="portfolio"><i class="icon-search"></i></a>
    </p>
         </div>
    </div>
       </div>
  {/exp:loop_plus}
     {/exp:channel:entries}

The resulting HTML that is returned is correct except for the EE shortcode is not parsed:

<div id="portfolio_items">


<div class="portfolio_item overlayed_animated_highlight portfolio_item_3 design">
  <div class="overlayed">
<img src="{image-1}" alt="portf20">
  <div class="overlay">
   <p>
    <a href="{image-1}" class="fancybox" data-fancybox-group="portfolio"><i class="icon-search"></i></a>
   </p>
  </div>
 </div>
</div>

I used parse="inward" as suggested in this post: https://stackoverflow.com/questions/16654301/expression-engine-dynamic-variable-names-slide-index-title. I get the feeling that the parse="inward" is not performing. I've tried it without parse="inward" and it returns the same results. Is there something I am missing?

Answer 1

It's a parse order issue. You need to wrap the channel:entries tag inside the loop_plus tag rather than the other way around as you current have it.

That should solve the issue and get the EE tags to parse and the loop_plus tags to add their increment counter. However it wont be too efficient because it means that the channel:entries tag will be called several times. To prevent this and increase performance use the loop_area tag pair to specify exactly what you want to loop. (You can use as many instances as you need within the loop_plus tags. So you should end up with something like:

<div id="portfolio_items">
    {exp:loop_plus start="1" increment="1" parse="inward"}
        {exp:channel:entries channel="portfolio-section" url_title="{segment_3}"} 
            <div class="portfolio_item overlayed_animated_highlight portfolio_item_3 design">
                <div class="overlayed">
                    {loop_area}
                        <img src="{image-{index}}" alt="">
                    {/loop_area}
                    <div class="overlay">
                        <p>
                            {loop_area}
                                <a href="{image-{index}}" class="fancybox" data-fancybox-group="portfolio"><i class="icon-search"></i></a>
                            {/loop_area}
                        </p>
                    </div>
                </div>
            </div>
        {/exp:channel:entries}
    {/exp:loop_plus}
</div>

Two loop_area tags are used to add the increment counts to the EE tags and the channel:entries tag is only called once so it's nice and efficient.