[Resolved] Using ‘wpv-view wrap’ shortcode to list post fields with alphabetic index

[Author]

Posts

[Robert Campbell]

I am displaying a custom post type in a responsive grid loop based on the support ticket https://toolset.com/forums/topic/definitive-method-for-creating-truly-responsive-grid-loop-wequal-height-cells/

You can see my test layout at hidden link

I am trying to find a way to display the grid so that each alphabetic section starts in a new row, so:

A
all posts starting with the letter 'A' (in a responsive grid layout)
B
all posts starting with the letter 'B' (in a responsive grid layout)

etc.

I plan to create 'dummy' posts with the title of each of the alphabet letters. In my test layout I have created:

A dummy post with the post title 'M', so it always appears before all the other 'real' posts starting with the letter 'M'.

A 'dummy' post with the post title 'N', so it always appears before all the other 'real' posts starting with the letter 'N'.

This works okay. I have used conditional output to detect the 'dummy' post (has no image) and format the dummy post to act as an alphabetic section header.

I need help to force each alphabetic section to start in a new row. So as an example from my test layout for the letters 'M' and 'N',

After the post titled 'IGS Audio', the display should start on a new line with:

'M' (dummy post)
M-Audio, Mackie, Magix, Marshall, MOTU
'N' (dummy post)
Natal, Native Instruments, Neat Microphones, Negri Cases, Nektar, Neumann

Here is my view code

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="12" pad="true">
[wpv-item index=1]
<div class="row spacing">
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 card">
[wpv-conditional if="(NOT( empty($(wpcf-company-logo)) ))"]
<div class="card2">
<a href="[wpv-post-url]">
[types field='company-logo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='400' resize='crop'][/types]
</a>
</div>
[wpv-post-title]
[/wpv-conditional]
[wpv-conditional if="(empty($(wpcf-company-logo)) )"]
<div class="alphabet">
[wpv-post-title]
</div>
[/wpv-conditional]
</div>
[wpv-item index=2]
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 card">
[wpv-conditional if="(NOT( empty($(wpcf-company-logo)) ))"]
<div class="card2">
<a href="[wpv-post-url]">
[types field='company-logo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='400' resize='crop'][/types]
</a>
</div>
[wpv-post-title]
[/wpv-conditional]
[wpv-conditional if="(empty($(wpcf-company-logo)) )"]
<div class="alphabet">
[wpv-post-title]
</div>
[/wpv-conditional]
</div>
[wpv-item index=3]
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 card">
[wpv-conditional if="(NOT( empty($(wpcf-company-logo)) ))"]
<div class="card2">
<a href="[wpv-post-url]">
[types field='company-logo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='400' resize='crop'][/types]
</a>
</div>
[wpv-post-title]
[/wpv-conditional]
[wpv-conditional if="(empty($(wpcf-company-logo)) )"]
<div class="alphabet">
[wpv-post-title]
</div>
[/wpv-conditional]
</div>
[wpv-item index=4]
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 card">
[wpv-conditional if="(NOT( empty($(wpcf-company-logo)) ))"]
<div class="card2">
<a href="[wpv-post-url]">
[types field='company-logo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='400' resize='crop'][/types]
</a>
</div>
[wpv-post-title]
[/wpv-conditional]
[wpv-conditional if="(empty($(wpcf-company-logo)) )"]
<div class="alphabet">
[wpv-post-title]
</div>
[/wpv-conditional]
</div>
[wpv-item index=5]
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 card">
[wpv-conditional if="(NOT( empty($(wpcf-company-logo)) ))"]
<div class="card2">
<a href="[wpv-post-url]">
[types field='company-logo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='400' resize='crop'][/types]
</a>
</div>
[wpv-post-title]
[/wpv-conditional]
[wpv-conditional if="(empty($(wpcf-company-logo)) )"]
<div class="alphabet">
[wpv-post-title]
</div>
[/wpv-conditional]
</div>
[wpv-item index=6]
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 card">
[wpv-conditional if="(NOT( empty($(wpcf-company-logo)) ))"]
<div class="card2">
<a href="[wpv-post-url]">
[types field='company-logo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='400' resize='crop'][/types]
</a>
</div>
[wpv-post-title]
[/wpv-conditional]
[wpv-conditional if="(empty($(wpcf-company-logo)) )"]
<div class="alphabet">
[wpv-post-title]
</div>
[/wpv-conditional]
</div>
[wpv-item index=7]
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 card">
[wpv-conditional if="(NOT( empty($(wpcf-company-logo)) ))"]
<div class="card2">
<a href="[wpv-post-url]">
[types field='company-logo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='400' resize='crop'][/types]
</a>
</div>
[wpv-post-title]
[/wpv-conditional]
[wpv-conditional if="(empty($(wpcf-company-logo)) )"]
<div class="alphabet">
[wpv-post-title]
</div>
[/wpv-conditional]
</div>
[wpv-item index=8]
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 card">
[wpv-conditional if="(NOT( empty($(wpcf-company-logo)) ))"]
<div class="card2">
<a href="[wpv-post-url]">
[types field='company-logo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='400' resize='crop'][/types]
</a>
</div>
[wpv-post-title]
[/wpv-conditional]
[wpv-conditional if="(empty($(wpcf-company-logo)) )"]
<div class="alphabet">
[wpv-post-title]
</div>
[/wpv-conditional]
</div>
[wpv-item index=9]
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 card">
[wpv-conditional if="(NOT( empty($(wpcf-company-logo)) ))"]
<div class="card2">
<a href="[wpv-post-url]">
[types field='company-logo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='400' resize='crop'][/types]
</a>
</div>
[wpv-post-title]
[/wpv-conditional]
[wpv-conditional if="(empty($(wpcf-company-logo)) )"]
<div class="alphabet">
[wpv-post-title]
</div>
[/wpv-conditional]
</div>         
[wpv-item index=10]
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 card">
[wpv-conditional if="(NOT( empty($(wpcf-company-logo)) ))"]
<div class="card2">
<a href="[wpv-post-url]">
[types field='company-logo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='400' resize='crop'][/types]
</a>
</div>
[wpv-post-title]
[/wpv-conditional]
[wpv-conditional if="(empty($(wpcf-company-logo)) )"]
<div class="alphabet">
[wpv-post-title]
</div>
[/wpv-conditional]
</div>
[wpv-item index=11]
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 card">
[wpv-conditional if="(NOT( empty($(wpcf-company-logo)) ))"]
<div class="card2">
<a href="[wpv-post-url]">
[types field='company-logo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='400' resize='crop'][/types]
</a>
</div>
[wpv-post-title]
[/wpv-conditional]
[wpv-conditional if="(empty($(wpcf-company-logo)) )"]
<div class="alphabet">
[wpv-post-title]
</div>
[/wpv-conditional]
</div>
[wpv-item index=12]
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 card">
[wpv-conditional if="(NOT( empty($(wpcf-company-logo)) ))"]
<div class="card2">
<a href="[wpv-post-url]">
[types field='company-logo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='400' resize='crop'][/types]
</a>
</div>
[wpv-post-title]
[/wpv-conditional]
[wpv-conditional if="(empty($(wpcf-company-logo)) )"]
<div class="alphabet">
[wpv-post-title]
</div>
[/wpv-conditional]
</div>      
</div>
[wpv-item index=pad]
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1"></div>
[wpv-item index=pad-last]
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1"></div>
</div>
</wpv-loop>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]

Could you suggest way to achieve what I am trying to do?

Regards

Robert

[Luo Yang]

Dear Robert,

You might consider custom JS codes, for example:

jQuery(function($) {
    $('div.alphabet').parent('div.card').css('clear', 'both');
});

More help:
hidden link

[Robert Campbell]

Dear Luo

Thank you for the suggested JS code which I have tried.

Two issues:

1. I want to have the alphabetic header on it's own line, so like:

'M'
M-Audio, Mackie, Magix, Marshall, MOTU
'N'
Natal, Native Instruments, Neat Microphones, Negri Cases, Nektar, Neumann

2. The wpv-item index needs to be reset back to 1 at the start of each new alphabetic section, otherwise the grid layout is destroyed. Have a look at hidden link and where the 'MOTO' image is appearing on a new line which is wrong.

Regards

Robert

[Luo Yang]

Please provide your test site credentials in below private message box, also point out the problem view URL, thanks

[Luo Yang]

There isn't such kind of feature within Views plugin, I have done below modification in your website:
Edit the view "companys2":
hidden link

1) in section "Loop Editor", change the codes as below:

...
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<div class="row spacing">
<wpv-loop>
    <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 card">
      [wpv-conditional if="(NOT( empty($(wpcf-company-logo)) ))"]
        <div class="card2 [wpv-post-slug]">
          <a href="[wpv-post-url]">
          [types field='company-logo' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' height='400' resize='crop'][/types]
          </a>
        </div>
        [wpv-post-title]
      [/wpv-conditional]
      [wpv-conditional if="(empty($(wpcf-company-logo)) )"]
        <div class="alphabet">
          [wpv-post-title]
        </div>
      [/wpv-conditional]
    </div>
</wpv-loop>
  </div>
</div>
<!-- wpv-loop-end -->
...

2) modify the JS codes as below:

jQuery(function($) {
    $('div.alphabet').parent('div.card').css('clear', 'both');
	$('div.pmc').parent('div.card').css('clear', 'both');
});

It works like this:
- if it is HTML div tag ".alphabet", change a new line
- if it is PMC change a new line.

It is only an example, for your reference.

[Robert Campbell]

Dear Luo

Thank you for the suggested code.
The JS for the alphabetic purpose works fine.

However (if I understand correctly?) the use of JS derived from the post slug is not workable. This would mean I would have to manually add JS for each time an image required to go to start of a line.

The use of this view is dynamic so there will be additional images being added every day.

Have I misunderstood the intended use of the JS code derived from post slug?

Regards

Robert

[Luo Yang]

Yes, you are right, as I mentioned above there isn't such a built-in feature within Views, the custom JS codes I provided above is only an example, in your current demo site, there isn't alphabet post "P", so you would have to manually add JS codes to change a new line in "PMC" post.

If there are lots of posts, you will need to consider to setup alphabet posts for each "letter":
a, b, c, d,e ...

Then the JS codes will be able to change the line in each alphabet post automatically.

[Robert Campbell]

Dear Luo
Thanks for trying to find a solution. I'll explore another way to make the alphabetic listing feasible.
Regards
Robert