Widgets: Add a People widget

[basille]

Hi,

I am currently trying to set up a new website for my lab, and I truly love the Academic theme for Hugo! Very, very good job! Perfect for what I'm looking for.

One piece I am missing though would be a specific widget for people. I know I could use a custom widget, for instance based on Teaching, but what I want is a layout similar to the Projects widget: a grid of people with their portraits, and a toolbar to filter them (in my case: "All", "Current" and "Alumni").

I have been able to work around it duplicating the project widget (and associated html page), as well as the CSS and JS pieces (into custom CSS and JS files), replacing every instance of project/projects by people. It almost works, with the same problem as #100, in which filtering in the toolbar seems to be global, and filters both Projects and People.

In other words, this is redundant to #100 in the sense that the essential problem is to be able to reuse the filter toolbar, but I also think that a People widget makes a lot of sense for an academic website.

Thanks!

[emacsun]

I have almost the same requirement.

what I need is to have several topic,(such as Math and Computer) each has its own project. I love the card style for each project.

Actually, I have already duplicated the projects widget as math and computer. However, the projects are global, and projects for Math also appear in the Computer part.

[gcushen]

The project widget is now reusable.

Thanks for the feedback, I will consider how much of a need there is for a dedicated People widget.

[basille]

As a follow-up to this request, I think enabling Social buttons (see #326) for specific people (if there is a People widget!) would make a lot of sense too.

Thanks for considering my People widget request!

[binarymist]

project widget is reusable but one can not specify a seperate directory to store items?

[ethanwhite]

I second both @basille's praise for this theme and request for a People widget. Featuring lab members is a key aspect of academic websites for folks with faculty and other group leading positions and so making it easy to add pictures and information about group members would be a really valuable addition. This could be as simple as simply adding the relevant "people" material as described in #429 to the main repo.

I also very much like @basille's suggestion in #326 to support social links for individual people as part of the ideal solution.

[jtravs]

I would also love a people widget.

[nfaivre]

Now that the "project" widget is reusable, would it be an option to use the "about" widget in a new page once you click on someone's card? From what I understood, the about widget only works on the homepage, right?

[Bertbk]

If I get it right, you can create a widget page that uses widgets. With this, you can create a "homepage style" for every people (especially use the "about" widget).

[nfaivre]

Thanks @Bertbk, I get the idea, but this does not seem to work as I'm already within a widget (in that case "project"). I would have to create a page that opens the "about" widget, once you click on the card corresponding to the "project" widget. As far as I know, this is not possible. May that be an option for future devs @gcushen?

[Bertbk]

Sorry for the misunderstanding. I though you wanted a widget "project" where "people" appears as "cards". When clicking on "somebody card", say John, this would redirect to e.g. /people/john which would be, in fact, a page with the about widget of John.

If yes then this seems possible using external_url pointing to people/john and people/john/index.md being a widget page with the about widget only (or more) ?

Otherwise, sorry again! :-)

[nfaivre]

Good point, I didn't think of external_url!

Still doesn't work though:

Imagine I have /people/john/index.md which corresponds to John project's card (according to the new architecture with one folder per project)

If I create /people/john/about/about.md and /people/john/about/_index.md, I get a 404 error, even though external_url = "people/john/about/" in /people/john/index.md

But that's a good potential solution, I'll keep looking, thanks for the tip!

[Bertbk]

You're right I got the same 404 error. I don't know if it's because the file is in a "project" folder or not.

Either I missed something, too, or the only way to make it works is by using a separated aboutfolder:

• about/john/_index.md
• people/john pointing to about/john throughout external_url

This "hack" is not really elegant and it would have been better to have people/john/about as you proposed.

[nfaivre]

I confirm that everything works ok when creating a separate about folder.

One problem though is when clicking on the envelope of John's profile, it redirects to about/john/#contact, which doesn't exist (we need ~/#contact).

And we still need the possibility to show different pictures/social icons/contacts for different people.

So good temporary fix, and looking forward to v3.2!

[prateekkumarweb]

For handling multiple people, I have done something like this:

1. Created a data file for each people in data/people/ folder.
2. Then in the authors field of publications/posts/pages, if the name of the author is specified as "@john", then look for a file data/people/john.yaml and get his name and displays that. Also if url field is defined in the YAML file, then make it a hyperlink. This way updating the single data/people/john.yaml will make sure it is updated in all the publication/posts/pages authors.

Look at the changes I made to the theme here: prateekkumarweb/hugo-academic

My website utilising the above feature : prateekkumarweb/prateekkumar.in

This can be extended for creating a people widget.

Say you define widget: true in the data file. Then in the people widget, you can look for all the people with widget: true and display their information.

@gcushen : if you are interested, I can send a PR with these specific changes.

[DeMol-EE]

I ended up using "author" as a way to generate some form of people/members, and injected some own parameters in the front matter to help distinguish between our own people and actual (publication) (co)authors. There's also a meta-author representing the entire research group. I also tried copying the tag cloud widget into the author page for displaying per-author research areas. But I think I'm sort of abusing the default set up and would also not mind having a separate entity for managing members of our group (and a nice widget to go along with it - perhaps something grid-based with images and displaying extra information on hover / click for detail page), so +1 for this issue!

[DeMol-EE]

By the by, there's someone in my group with "é" in their name, and I had to end up renaming the author folder to contain the sequence "%C3%A9" so the template could find them (based off how urlize works) - but now the default author widget won't find their "avatar.jpg" anymore. Any idea what this might be? and I could only "solve" lookup problems by changing all calls to urlize .Title with replace lower .Title " " "-". I don't think this is a good permanent solution, but I don't know how else to solve this (non-url safe character in author name).

[gcushen]

The official People widget is now implemented, see f40c63d7ac0c1cba8919228370742fed21f826eb .

To test the People widget,

1. Update to the latest master version of Academic
2. Add the user_groups option for each user as per the the demo user in the commit link above
3. Download the People widget to your content/home/ folder
4. Activate the People widget by setting active = true in its front matter

However, Hugo will only generate a user profile page if there is content associated with a user (since we are using authors as a Hugo taxonomy rather than a normal Hugo section). Therefore, links to author profile pages will be broken for users that do not have their name associated with any content (via the authors setting in posts etc.).

@Warkst Any ideas how to fix this?

[DeMol-EE]

Thanks for the update @gcushen. I'm loving the new widget! It's much more stylish than the tabular alternative I had thrown together. I also noticed I got 404 pages for people with 0 pages associated to them. My workaround was to include the authors key in the front matter of each author index (I have a folder per person, containing an avatar and index.md). It's basically copy paste of the name key and changing the type to array, but then a page actually gets generated. All I then had to do was to modify the footer for the author detail page to filter out the author page from the related pages section. While doing so, I decided to modified it further so the relevant pages part is replaced in its entirety by several divs, one per (select) page type (publication, project, post, ...), and showing (only) the top K links. If there are no pages for a page type, the corresponding div is not generated. Finally, I've stripped the page header (since the author name is already strongly printed just below the picture, and adding it again just on top felt superfluous) and injected my slightly modified implementation of the tag cloud to show the top N research areas for the author just below the content placeholder. I've included a screenshot to give you an idea.

For an author with no pages (besides his own author document), the bottom section would be empty.

[DeMol-EE]

From a business point of view, I was considering modifying the tag detail page to show all relevant authors for a selected keyword, to help guide them towards who to contact. Also I'm in doubt on whether or not to keep the Interests bit, as it seems to more or less conflict/overlap with the added key research areas (which IMO are preferrable as they are auto-generated and debatably more indicative of actual active areas).

[mrustl]

@Warkst your approach for rendering authors without content worked for me. I also like your modifications (divs for talks, publications, ...) and the "key reasearch areas" (based on tags for publications/talks?).

Could you share a working example with your modifications based on the latest hugo-academic version? This would be super helpful for my use-case!

[DeMol-EE]

Override /layouts/author/list.html and replace the related-pages div by:

    {{ $pubs := first 6 (where .Pages "Type" "publication") }}
    {{ if gt (len $pubs) 0 }}
      <div class="article-widget">
        <div class="hr-light"></div>
        <h3>
          <a href="/publication">{{ pluralize (i18n "publication") }}</a>
        </h3>
        <ul>
          {{ range $pubs }}
          <li>
            <a href="{{ .Permalink }}">{{ .Title }}</a>
          </li>
          {{ end }}
        </ul>
      </div>
    {{ end }}

This will place a div with the first 6 publications for the author of the page. Should be possible to cook something up to separate first author from co-author... Anyway, copy paste and adjust accordingly for other page types.

Override layouts/partials/widgets/about.html and put this somewhere:

        {{ $author := slice $person.name}}
        <div class="article-widget">
          {{ if not (eq (len $.Site.Taxonomies.tags) 0) }}
            {{ $fontSmall := 0.3 }}
            {{ $fontBig := 1.5 }}
            {{ $max := add (len (where (index $.Site.Taxonomies.tags.ByCount 0).Pages "Params.authors" "intersect" $author )) 1 }}
            {{ $threshold := sub $max 2 }}
            {{ if lt $threshold 0 }}
              {{ $threshold = 0 }}
            {{ end }}
            {{ if gt $max $threshold }}
            <div id="tag-cloud">
              <h3>Key Research Areas</h3>
              {{ range $name, $taxonomy := $.Site.Taxonomies.tags }}
                {{ $tagCount := len (where $taxonomy.Pages "Params.authors" "intersect" $author)}}
                {{ $weight := div (sub (math.Log $tagCount) (math.Log $threshold)) (sub (math.Log $max) (math.Log $threshold)) }}
                {{ $fontSize := add $fontSmall (mul (sub $fontBig $fontSmall) $weight) }}
                {{ if gt $tagCount $threshold}}
                  <a href="{{ ($.Site.GetPage (printf "tags/%s" $name)).RelPermalink }}" style="font-size:{{ $fontSize }}rem">
                    {{ $name }}
                  </a>
                {{ end }}
              {{ end }}
            {{ end }}
          </div>
          {{ end }}
        </div>

Note how threshold is used to select only the K most frequently counted tags across all pages (not just publications/talks) whose authors intersects with the $author param, here derived from the front matter parameter name for an index.md file under content/author/xyz/. You might have to do some tweaking to find a value that works for you! Actually, it's even better to move this magic value to the front matter of the author document, so you can set a separate value per author...

Does this help you @mrustl ?

[DeMol-EE]

In follow up, something like adding this to your author document front matter (TOML here):

# Influence how many relevant research areas are shown (top K).
# Default is 2. A larger number will result in a larger amount of results.
# Values below 1 are ignored and truncated to 1.
topk = 2

and then the following modification to the template from above:

        {{ $topk := 2 }}
        {{ if isset $person "topk"}}
          {{ $topk = $person.topk }}
        {{ end }}
        {{ if lt $topk 1 }}
          {{ $topk = 1}}
        {{ end }}
    ...
            {{ $threshold := sub $max $topk }}
    ....

[basille]

Thanks @gcushen and all contributors for implementing the People widget! This looks very very interesting, I'll try to install that as soon as possible!

[fernan]

Thanks all for a great resource. Just starting with a fresh academic-kickstart fork ... and found some problems with People/Authors. Or maybe I am doing something wrong here?

I've duplicated the 'admin' profile to generate a few authors, and their pages are showing ok (/authors/admin, /authors/author1, /authors/author2). However on the front page, the 'People' section only shows the group names (Principal Investigators, Researchers, Grad Students ... see below) but these are not linked to anything (they are not clickable). Authors are not listed here in the home page, even though I'm setting 'user_groups' correctly for each user, e.g.

In 'authors/admin/_index.md' user_groups = ["Principal Investigators"]

In 'authors/author1/_index.md': user_groups = ["Grad Students"]

In 'authors/author2/_index.md': user_groups = ["Alumni"]

This is how my 'content/home/people.md' looks like,

+++
# People widget.
widget = "people"  # See https://sourcethemes.com/academic/docs/page-builder/
headless = true  # This file represents a page section.
active = true  # Activate this widget? true/false
weight = 68  # Order that this section will appear.

title = "People"
subtitle = ""

# List user groups to display.
#   Edit each user's `user_groups` to add them to one or more of these groups.
user_groups = ["Principal Investigators",
               "Researchers",
               "Collaborators",
               "Grad Students",
               "Administration",
               "Visitors",
               "Alumni"]
+++

See:

[Bertbk]

There were a problem that has been solved couple of hours ago, see issue #1070 . With a fresh update, does this still happens?

[fernan]

There were a problem that has been solved couple of hours ago, see issue #1070 . With a fresh update, does this still happens?

Indeed this solved the problem. Thanks @Bertbk

[aghand0ur]

I have just upgraded to the latest version and I got somethin similar to @fernan..

Authors name are not linked to their personal profile page (not clickable), as seen in the following page: https://www.alighandour.org/#people

Any feedback guys?

[aghand0ur]

Ok I figure it out: in /content/authors/_index.md

To publish author profile pages, remove all of the _build and cascade settings below.