Skip Navigation

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

Ce fil est résolu. Voici une description du problème et la solution proposée.

Problem:

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', see details here:

https://toolset.com/forums/topic/using-wpv-view-wrap-shortcode-to-list-post-fields-with-alphabetic-index/#post-1212259

Solution:

There isn't such a built-in feature within Views plugin, you can consider custom codes, for example:

https://toolset.com/forums/topic/using-wpv-view-wrap-shortcode-to-list-post-fields-with-alphabetic-index/#post-1212387

Relevant Documentation:

This support ticket is created Il y a 3 années et 3 mois. There's a good chance that you are reading advice that it now obsolete.

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.

Marqué : ,

This topic contains 7 réponses, has 2 voix.

Last updated by Robert Campbell Il y a 3 années et 3 mois.

Assigned support staff: Luo Yang.

Auteur
Publications
#1212259

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

#1212387

Luo Yang
Supporter

Languages: Anglais (English ) Chinois simplifié (简体中文 )

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

Dear Robert,

You might consider custom JS codes, for example:

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

More help:
hidden link

#1212752

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

#1212874

Luo Yang
Supporter

Languages: Anglais (English ) Chinois simplifié (简体中文 )

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

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

#1213533

Luo Yang
Supporter

Languages: Anglais (English ) Chinois simplifié (简体中文 )

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

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.

#1213930

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

#1214023

Luo Yang
Supporter

Languages: Anglais (English ) Chinois simplifié (简体中文 )

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

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.

#1214340

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