[Resolved] wpv-item: adding a class

[Author]

Posts

[Gavin]

I'd first like to add a class to each of the wpv-item shortcodes, so each group is wrapped in it's own div, as follows.

<wpv-loop>
[wpv-item index=1] (ADD A CLASS TO THIS)
Meta HTML to be output for the first item returned by the loop
[wpv-item index=2] (ADD A CLASS TO THIS)
Meta HTML to be output for the second item returned by the loop
[wpv-item index=other] (ADD A CLASS TO THIS)
Meta HTML to be output all other items returned by the loop
</wpv-loop>

[Beda]

Classes are written in HTML hence, that is where you add it.
It needs to act on something, so you need to bind it to a tag.
https://toolset.com/documentation/user-guides/digging-into-view-outputs/#vmeta-wpv-loop-parameters

The ShortCode itself does not produce that for you, it has no such attribute:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-item

Only index (number-of-post | other | pad | pad-last | split | odd | even) can be set there.

But it's as explained as well not the purpose of the ShortCode, which is to "subdivide" your loop and address specific Items.. with your Custom HTML which can include classes.

[Gavin]

Thank you Beda - unfortunately, adding a class to the html wraps each individual post. I want to wrap the group of posts.

So rather than this:
<wpv-loop>
[wpv-item index=1]
<div class="post-one">Post One</div>
[wpv-item index=2]
<div class="post-two">Post Two</div>
[wpv-item index=other]
<div class="other-posts">Other Posts</div>
</wpv-loop>

... which returns something like:
<div class="post-one">Post One</div>
<div class="post-two">Post Two</div>
<div class="other-posts">Other Posts</div>
<div class="other-posts">Other Posts</div>
<div class="other-posts">Other Posts</div>

... I want it to return something like the following:
<div class="post-one">Post One</div>
<div class="post-two">Post Two</div>
<div class="other-posts">
Other Posts
Other Posts
Other Posts
</div>

Thanks.

[Beda]

This is different, and not possible like this.

The logic of a Loop is to do things for each item a time.
With "Item Index" you can address single items in that process.
You cannot group them, that is technically a second loop, within the first loop.

To achieve the exact output you describe you can follow this steps or similar:

1. Create a View that Queries your posts, and limit it's output to the exact amount of total different outputs you want.
In your case, this is 3. (2 first posts are handled with index1 and index2, and the third output is with indexOther)
2. Create a second View and Query those same posts and exclude the first 2 posts. Note that all ordering and sorting must be identical to the First View
3. In this second View, insert anything you want to show about the posts in the Loop.
4. Head back to the First View and insert the View you just created in your Loop, just after Index=other, within the Custom HTML you want for this Group of posts:

<wpv-loop>
[wpv-item index=1]
First Post, specific HTML
  [wpv-item index=2]
  Second Post, specific HTML
    [wpv-item index=other]
    All Other Posts (Since there are just 3 in this View, this is the last item in this View
    Below We insert the View, that has the loop with "all other posts" and can wrap this View in anything we like
      [wpv-view name="view-with-remaining-posts"]
    Here, we close the Wrapping code again for the last Item which is the Group of remaining posts.
</wpv-loop>

You need however to be aware that Views wraps it's results in a native and not customizable HTML code.
This is currently only removable with Custom Code, or you can wait for a soon-to-be-released feature that will allow you to customize/remove that.

[Gavin]

Thanks Beda - this works great if my posts are ordered by post date, with the third view having an offset of 2.

However, the effect I'm trying to achieve is for posts to return randomly, and of course, as the second view is not part of the first, there is duplication of posts. Please see the attached image where the post 'June 12th Post' is duplicated.

Thanks again.

[Beda]

Yes, as I explained the settings need to be identical, and random is not an identical setting for the order by.

What you try to achieve as shown in the last screenshot is again something else.

It seems a slider, which even if static, is created with 2 views, always.
We have great tools to build sliders with less effort:
https://toolset.com/documentation/user-guides/using-toolset-module-manager/
https://toolset.com/home/module-manager/

Remember that even if that is a static layout, it requires 2 iterations if you want to wrap HTML around groups.

This is not particularly different in PHP or any other Loop.

[Gavin]

Hi again Beda - I may have found a solution (by accident):

<wpv-loop>
[wpv-item index=1]
<div class="first"> (ADDED THE CLASS)
HTML
</div> (ADDED THE CLOSING DIV)
<div class="second"> (ADDED THIS CLASS)
[wpv-item index=2]
HTML
</div> (ADDED THIS CLOSING DIV)
<div class="third-featured-post"> (ADDED THIS CLASS)
[wpv-item index=other]
(NO CLOSING DIV)
</wpv-loop>

It's not elegant but the html viewed in the Inspector seems to be sound.

This is all one view, not multiples and so randomised (and filtered) posts seems to be working too.

[Beda]

Well if you want to miss the closing div tag, that is up to you.

If this works for your situation you can use it, I however do not suggest to " miss" the HTML.

[Gavin]

Any particular reason not to miss the closing div in the view editor?

When viewing in the Inspector, the closing div seems to be automatically inserted.

It also seems to works across different browsers - Chrome, Firefox, Opera, and Edge.

[Beda]

hidden link

While a browser may compile things, Views my fail in certain scenarios where you have incorrect HTML added to a Editor (for example in nested ShortCode scenario or similar and missing (previous to the nested ShortCode) HTML).

And is is simply wrong, strictly speaking.
In WordPress Native editors for example, if you do the same (miss a closing div) it even automatically adds it for you.

So, I cannot suggest this approach.
Of course, you are free to use it if it causes no issue for you.

[Gavin]

Thanks Beda - I don't know if it's possible to achieve, but could I make a feature request for the ability to add a class to the wpv-item so that the whole group of posts can be wrapped and styled.

I'm using flexbox, and having that div around those posts is essential.

Thanks again for all your help.