Group authors in alphabetical index

  • Resolved sublines

    (@sublines)


    6 years, 9 months ago

    Hi,

    I know this is a duplicate of this request but I can’t comment there because it has been closed to new replies.

    I basically have the same request but I also want to suggest a possible solution:

    Right now, your plugin outputs something like this: 

    <div class="user with-name user-137 with-biography bio-length--1">
	<a href="author link" title="Firstname Lastname (1 post)">
		<span class="name"><strong>Firstname Lastname (1)</strong>
		</span>
	</a>
	<div class="biography">
		<p>Author Bio</p>
	</div>
</div>

    Since your plugin is already able to sort the users by the first letter of their last name, wouldn’t it also be possible to include the first letter of the last name as a class inside the div like so?: 

    <div class="letter-l user with-name user-137 with-biography bio-length--1">
	<a href="author link" title="Firstname Lastname (1 post)">
		<span class="name"><strong>Firstname Lastname (1)</strong>
		</span>
	</a>
	<div class="biography">
		<p>Author Bio</p>
	</div>
</div>

    As you can see here, letter-l stands for the first letter of the last name, which in this case is the letter L.

    If that would be included in the class of the div or the anchor tag or the span or wherever you like, I could build an alphabetical index in pure CSS and offer the code here for others to use.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Paul Bearne

    (@pbearne)

    Hi

    OK, I have pushed and patch to my Git repo can you test it for me?

    https://github.com/pbearne/wp-author-avatars

    Added filter aa_user_final_css to fileter the classes on the user div
    added name-{first_letter} class

    Thread Starter sublines

    (@sublines)

    Hi Paul, thanks for the quick reply!

    I have tested the changed files and it did add a class indeed.
    However, it doesn’t add the first letter of the last name, but the second letter of the first name..

    So an author with the name Michael Hermann now has the class group-i added to the div.

    ??

    Plugin Author Paul Bearne

    (@pbearne)

    OOPS!!

    I got the substr wrong!! please re-pull and re-test

    Thread Starter sublines

    (@sublines)

    Almost! It now uses the first letter from the first name.
    This still doesn’t help me since I am using order=last_name, which I’m guessing most people will be using as well.

    Plugin Author Paul Bearne

    (@pbearne)

    try this

    https://github.com/pbearne/wp-author-avatars/releases/tag/1.15

    I am sliting the name byh spaces and ouputing all the first leters and make the last word
    name-group-last-?

    enjoy

    Thread Starter sublines

    (@sublines)

    Great, thanks! This is exactly what I was looking for.

    Now we can easily make the beginning of a new letter group visible with some tricky CSS like this: 

    .name-group-last-a:before {
    content: "A";
}
.name-group-last-a ~ .name-group-last-a:before {
    content: "";
}

    Of course the above code is only an example for the letter A.

    This will make sure that only the first instance of a div with the class name-group-last-a will generate the pseudo element with the content A. Don’t waste your time using :first-child or :first-of-type to target them – they can’t actually do that as explained here in detail.

    It is now also possible to link to the beginning of a new name group using jQuery along the lines of this:

    $(".link-to-letter-a").click(function(){$("html,body").animate({scrollTop:$(".name-group-last-a").offset().top-50},1000)});

    In the above code, a simple span with the class link-to-letter-a could function as a link and would, uppon clicking it, trigger the browser to scroll to the first instance of a div with the class name-group-last-a, which is the beginning of the group of names starting with the letter A.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Group authors in alphabetical index’ is closed to new replies.