[Resolved] Conditional Output Based on Loop Iteration Number?

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

This topic contains 9 replies, has 2 voices.

Last updated by Luo Yang 2 years, 8 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#550529

Hello,

Is there a way to display conditional output based on the loop iteration number? Hopefully I'm just not seeing how to do this...

For example, let's say I want to display a list of 5 posts. I want the first post to display an image and the following 4 not to show an image. So in this case, I'd like to wrap the image code, or any amount of code, inside a conditional ouput tag that equates to "If loop iteration equals 1...".

So you could use the conditional output to show/hide a single item based on the loop iteration number...

<wpv-loop>
<div>
[wpv-conditional if loop iteration equals 1"]<img src="...">[/wpv-conditional]
<span>Title</span>
</div>
</wpv-loop>

... or show/hide entirely different layouts etc...

<wpv-loop>
[wpv-conditional if loop iteration equals 1"]
<div>
<img src="...">
<span>Title</span>
</div>
[/wpv-conditional]
[wpv-conditional if loop iteration greater-than 1"]
<div>
<span>Title</span>
<span>Author</span>
<p>Text</p>
</div>
[/wpv-conditional]
</wpv-loop>

Is this possible now in Views? If so, I don't see how to do it. All I can think of is to create 2 or more different views which isn't great seeing as each one adds another database query to the page when a single database query could accomplish the same thing with proper conditional options.

Thanks

#550610

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Dear peter,

In the Views loop, you can use shortcode [wpv-item index=xxx] to specific the loop iteration number, for example:

...
<wpv-loop>
    [wpv-item index=1]
      Meta HTML to be output for the first item returned by the loop
    [wpv-item index=2]
      Meta HTML to be output for the second item returned by the loop     
    [wpv-item index=other]
      Meta HTML to be output all other items returned by the loop    
 </wpv-loop>
...

See our document:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-item
Used in the loop. Sets a condition to be met for subsequent lines in the loop to be executed.
If the condition is true, the all subsequent lines will be executed until the next wpv-item shortcode encountered, or the end of the loop.

#550998

Hello,

From what I can tell, this wpv-item isn't as intuitive or flexible as conditional output. For testing, I tried to create a view of 5 records that should output...

Big Image - Odd
Small Image - Even
Small Image - Odd
Small Image - Even
Small Image - Odd

So using wpv-item, I added the following code to wpv-loop...

<wpv-loop>
          [wpv-item index=1]
          Big Image[wpv-item index=odd] - Odd[wpv-item index=even] - Even
          [wpv-item index=1]<br>
          [wpv-item index=other]
          Small Image[wpv-item index=odd] - Odd[wpv-item index=even] - Even
          [wpv-item index=other]<br>
</wpv-loop>

But this produced unexpected results...

- Even - Odd - Even - Odd

I also tried...

<wpv-loop>
          [wpv-item index=1]Big Image
          [wpv-item index=odd] - Odd<br>
          [wpv-item index=even] - Even<br>
          [wpv-item index=other]Small Image
          [wpv-item index=odd] - Odd<br>
          [wpv-item index=even] - Even<br>
</wpv-loop>

Again, this produced unexpected results...

Big Image - Even
- Odd
- Even
- Odd

Are you only allowed to use 1 wpv-item per record or something? Again, these shortcodes aren't very intuitive. Why isn't this sort of conditional functionality included in the standard conditional output tool??

It would make much more sense if this functionality could be used in the way I demonstrated in my original post.

#551161

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

In your original post:
https://toolset.com/forums/topic/conditional-output-based-on-loop-iteration-number/#post-550529

You are asking for this:
. I want the first post to display an image and the following 4 not to show an image.

It is very easy to achieve it with shortcode [wpv-item], for example:

...
<wpv-loop>
[wpv-item index=1]
Big Image[wpv-item index=1]
<span>Title</span>
<p>This is the first item</p>
[wpv-item index=other]
[wpv-item index=other]
<span>Title</span>
<span>Author</span>
<p>This is the other items</p>
</wpv-loop>
...

Can you confirm it first?

For your new question:
Big Image - Odd
Small Image - Even
Small Image - Odd
Small Image - Even
Small Image - Odd

Since there are only 5 items in your view result, you can simply use below codes:

...
<wpv-loop>
[wpv-item index=1]
Big Image - Odd
[wpv-item index=2]
Small Image - Even
[wpv-item index=3]
Small Image - Odd
[wpv-item index=4]
Small Image - Even
[wpv-item index=5]
Small Image - Odd
</wpv-loop>
...

And please create new thread for the new questions, this will help other users to find the answers. thanks

#551175

Hello,

I think you're misunderstanding me. My previous post was not a new question, it was merely a test example used to try and understand how wpv-item works. I made the post because wpv-item does not appear to function as one would expect and your reply unfortunately did not explain anything.

For example, in your reply you wrote this:

<wpv-loop>
[wpv-item index=1]
Big Image[wpv-item index=1]
<span>Title</span>
<p>This is the first item</p>
[wpv-item index=other]
[wpv-item index=other]
<span>Title</span>
<span>Author</span>
<p>This is the other items</p>
</wpv-loop>

Why is [wpv-item index=1] written before AND after "Big Image"? Why is [wpv-item index=other] written twice in a row?? This does not appear to be very intuitive.

In your second example where you wrote:

<wpv-loop>
[wpv-item index=1]
Big Image - Odd
[wpv-item index=2]
Small Image - Even
[wpv-item index=3]
Small Image - Odd
[wpv-item index=4]
Small Image - Even
[wpv-item index=5]
Small Image - Odd
</wpv-loop>

This does not address what I was trying to test, which was trying to use 2(or more) wpv-item shortcodes on a single record... one(wpv-item index=1 or wpv-item index=other) to detect if the record is the first record(or greater than first) and display either a big image or a small image, and a second one(wpv-item index=odd or wpv-item index=even) to detect if the record's position is odd or even and display some content accordingly. What I wrote was just an example, there could be any number of rows, not just 5.

I'll create another example. In the example I want to hide or show various content depending on the record's position. I'll show you how I would accomplish this if wpv-item were part of the Conditional Output feature. If you'd be so kind, please show me how I would accomplish the same using the wpv-item shortcodes as they are.

So in my example, my goals are to...
a) Show a big image on the first record and a small image on every record after.
b) Show the title only on odd numbered records. (Doesn't make sense, but just for example)
c) Display an ad half way through the list of records

Example starting code:

<wpv-loop>
  <div class="wrapper">
    <img src="Big Image">
    <img src="Small Image">
    <h2>Title</h2>
    <p>Author</p>
    <div class="ad">
      Advertisement
    </div>
  </div>
</wpv-loop>

How I would accomplish the above goals if wpv-item were part of Conditional Output...

<wpv-loop>
  <div class="wrapper">
    [wpv-conditional if wpv-item index=1]<img src="Big Image">[/wpv-conditional]
    [wpv-conditional if wpv-item index=other]<img src="Small Image">[/wpv-conditional]
    [wpv-conditional if wpv-item index=odd]<h2>Title</h2>[/wpv-conditional]
    <p>Author</p>
    [wpv-conditional if wpv-item index=split2]
      <div class="ad">
        Advertisement
      </div>
    [/wpv-conditional]
  </div>
</wpv-loop>

Please demonstrate how I can accomplish the above, but using just wpv-item as it is...

Or maybe you'll agree that wpv-item should be merged into Conditional Output to increase its intuitiveness, flexibility and ease of use?

Thanks!

#551274

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Yes, I agree, there are some misunderstands.

Q1) Show a big image on the first record and a small image on every record after.
It is the original question of this thread:
https://toolset.com/forums/topic/conditional-output-based-on-loop-iteration-number/#post-550529

...
<wpv-loop>
[wpv-item index=1]
Here display the first item with big image
[wpv-item index=other]
Here display other items without big image!
</wpv-loop>
...

Q2) Show the title only on odd numbered records. (Doesn't make sense, but just for example),
I assume you are going to combine the condition of Q1) with Q2), you can try this:

...
<wpv-loop>
[wpv-item index=1]
Here display the first item with big image
[wpv-item index=odd]
 Show the title only on odd numbered records
[wpv-item index=other]
Here display other items 
</wpv-loop>
...

Q3) Display an ad half way through the list of records.
I assume you are going to combine the condition of Q1) + Q2) + q3), you can try this:

...
<wpv-loop>
[wpv-item index=1]
Show the first Item with big image
[wpv-item index=odd]
Show the Item:  title only
[wpv-item index=split2]
Show the Item + Advertisement
[wpv-item index=other]
Here display other items 
</wpv-loop>
...
#553239

I think you're telling me that I have to duplicate my entire code block for each wpv-item used, which seems like a lot more work than it would be if wpv-item was part of Conditional Output.

As I requested, can you please demonstrate using the code I provided:

<wpv-loop>
  <div class="wrapper">
    <img src="Big Image">
    <img src="Small Image">
    <h2>Title</h2>
    <p>Author</p>
    <div class="ad">
      Advertisement
    </div>
  </div>
</wpv-loop>

Thank you.

#553280

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Yes, you will need to "duplicate my entire code block for each wpv-item used".
You can put those HTML codes and shortcodes you mentioned above into a content template:
https://toolset.com/forums/topic/conditional-output-based-on-loop-iteration-number/#post-553239
then display it with Views shortcode [wpv-post-body] insider the Views loop:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-body
If you still need assistance for it, please provide a test site with same problem, and fill below private detail box with login details, also point out the problem page URL and view URL, I can setup a demo for you.

For your question:
which seems like a lot more work than it would be if wpv-item was part of Conditional Output.
This :
There isn't such a feature within [wpv-conditional] shortcode, if you agree, we can take it as a feature request.

#554894

Yes, please make this a feature request.

Thanks.

#554967

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Thanks for the feedback, I have forwarded your request to our supporters who is responsible for the Views feature request, our developers will evaluate it, but there isn't any ETA for it.