Show only those starting with the initial letter

Hi @whakamua

Not at the moment but we’ll add that feature and release an update tomorrow.

Wow great.
In the meantime, can I ask you a design question?
For mobile devices, how can I put “authors-list-item-thumbnail” inline-block or inline with “authors-list-item-main”?

I tried using something like this, but it doesn’t work for me:

@media only screen and (max-width: 1025px) {
.authors-list-item-thumbnail: display: inline-block;
}

Hi @whakamua

The update is released.

The new shortcode parameter is “name_starts_with”, her’s an example of usage:

[authors_list name_starts_with="a"]

And that would show only authors with the first letter (of the display name) as a.

As for the CSS question, I think this is what you’re looking for:

@media only screen and (max-width: 1025px) {
    .authors-list-item { display: flex !important;  }
    .authors-list-item-thumbnail { margin-right: 10px; }
}

Keep in mind that it’s going to force the thumbnail and main area to be side by side so some of the titles are going to be broken up into multiple lines since they won’t fit.

On phones it looks good but on tablets not as good.

So you might want to lower the media query to start as of 768px

The mobile is spectacular, it is true that the title is divided into two lines, but I will lower the size of the font.
Gracias mil (Thanks a thousand)!

Now, how could I combine name_starts with style?
I have this: [authors_list style=”1″ columns=”4″ amount=”4″ show_count=”yes” show_link=”no”]

Where should I place, for example, name_starts_with = “G”? ??

And, About Tablets?
How could I display the list in rows? (like on the phone?)

Hi @whakamua

The full shortcode would be:

[authors_list style="1" columns="4" amount="4" show_count="yes" show_link="no" name_starts_with="g"]

It’s not case sensitive, so you can use lowercase g, no need for uppercase G. But works either way.

And the order of all those attributes doesn’t matter, can be in any order.

To also switch it to use one item per row on tablets, this is the full CSS code (includes previous code):

@media only screen and (max-width: 1025px) {
    .authors-list-item { display: flex !important;  }
    .authors-list-item-thumbnail { margin-right: 10px; }
    .authors-list-cols-dir-horizontal .authors-list-col { width: 100% !important; }
}

Everything works great.
Millions of thanks!!!

Best regards. ??

You’re welcome. Happy to hear that ??