New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Widgets: Add a People widget #274

Closed
basille opened this Issue Sep 17, 2017 · 23 comments

Comments

Projects
None yet
@basille
Copy link

basille commented Sep 17, 2017

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

This comment has been minimized.

Copy link

emacsun commented Sep 20, 2017

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

This comment has been minimized.

Copy link
Owner

gcushen commented Oct 9, 2017

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 basille changed the title Enhancement: People widget Feature request: People widget Oct 17, 2017

@basille

This comment has been minimized.

Copy link
Author

basille commented Oct 17, 2017

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!

@gcushen gcushen referenced this issue Dec 2, 2017

Closed

Student widget #396

@binarymist

This comment has been minimized.

Copy link

binarymist commented Dec 5, 2017

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

@ethanwhite

This comment has been minimized.

Copy link

ethanwhite commented Apr 1, 2018

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

This comment has been minimized.

Copy link

jtravs commented Sep 9, 2018

I would also love a people widget.

@gcushen gcushen added this to the v3.1 milestone Oct 21, 2018

@gcushen gcushen added the enhancement label Oct 21, 2018

@gcushen gcushen changed the title Feature request: People widget Widgets: Add a People widget Oct 28, 2018

@nfaivre

This comment has been minimized.

Copy link

nfaivre commented Oct 29, 2018

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

This comment has been minimized.

Copy link

Bertbk commented Oct 30, 2018

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

This comment has been minimized.

Copy link

nfaivre commented Oct 31, 2018

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

This comment has been minimized.

Copy link

Bertbk commented Oct 31, 2018

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

This comment has been minimized.

Copy link

nfaivre commented Oct 31, 2018

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

This comment has been minimized.

Copy link

Bertbk commented Oct 31, 2018

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.

@gcushen gcushen modified the milestones: v3.1, v3.2 Nov 3, 2018

@nfaivre

This comment has been minimized.

Copy link

nfaivre commented Nov 6, 2018

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

This comment has been minimized.

Copy link
Contributor

prateekkumarweb commented Nov 13, 2018

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.

@gcushen gcushen modified the milestones: v3.3, v3.4 Dec 16, 2018

@gcushen gcushen removed this from the v3.5 milestone Jan 13, 2019

@gcushen gcushen added this to the v4 milestone Jan 29, 2019

@Warkst

This comment has been minimized.

Copy link

Warkst commented Feb 3, 2019

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!

@Warkst

This comment has been minimized.

Copy link

Warkst commented Feb 3, 2019

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

This comment has been minimized.

Copy link
Owner

gcushen commented Feb 5, 2019

The official People widget is now implemented, see f40c63d .

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?

@Warkst

This comment has been minimized.

Copy link

Warkst commented Feb 6, 2019

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.

image

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

@Warkst

This comment has been minimized.

Copy link

Warkst commented Feb 6, 2019

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 added a commit to KWB-R/kwb.pubs that referenced this issue Feb 6, 2019

@mrustl

This comment has been minimized.

Copy link

mrustl commented Feb 7, 2019

@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!

@Warkst

This comment has been minimized.

Copy link

Warkst commented Feb 7, 2019

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 ?

@Warkst

This comment has been minimized.

Copy link

Warkst commented Feb 7, 2019

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 }}
    ....

@gcushen gcushen closed this in 58dd61b Feb 7, 2019

@basille

This comment has been minimized.

Copy link
Author

basille commented Feb 7, 2019

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!

jannikbuhr added a commit to jannikbuhr/hugo-academic that referenced this issue Feb 11, 2019

update academic frm upstream (#2)
* update logo icon

* fix(widget): use absolute image path for Hero Carousel

relURL does not function properly in style tag under certain conditions

* feat(user): add author profile system

- Add author taxonomy to config
- Restructure user data
- Add user profile pages
- Refactor author profile box
- Refactor author link in page metadata to point to author profile page
- Enable About widget to be re-used for different users

BREAKING CHANGES
See issue below and v4 release note for details

See gcushen#752

* refactor: rename selected to featured

BREAKING CHANGES
See issue below and v4 release note for details

See gcushen#867

* refactor: restructure config using Hugo v0.53 approach

BREAKING CHANGES
See issue below and v4 release note for details

See gcushen#867

* feat: hide page modification date for talks and publications

Having both talk/pub. date and page modification date displayed may
cause confusion.

Close gcushen#891

* fix(nav): always right align search and dark mode icons

Also change nav links to be left aligned in the demo.

* refactor: restructure config and front matter parameters

- contact widget: support custom contact links with `contact_links`
- talks: add `all_day`
- custom_css/js -> plugins_css/js
- load custom css/js from `assets/` dir instead of `static/`
- minify custom css/js
- convert publication types from config params to i18n translations
- projects: always list child items (config option deprecated)

BREAKING CHANGES: Refer to issue below.

See gcushen#867

* chore: add Netlify config to build demo site

* chore: add Netlify config to build demo site

* chore: add Netlify config to build demo site

* chore: update demo URL

Also, fix Netlify ENV config

* fix: Hero and Carousel image path in edge cases

Fix gcushen#910

* feat: improve listings

- link author profile pages in listings
- display author name (rather than username) in metadata
- refactor `list_format` to `view` and use new consistent mappings
- add `citation_style` in `params.toml`
- re-order Accomplishments widget in Demo
- make params/comments more consistent in all widget front matter
- Author page: don't show username if profile exists as that will
  already show the user's display name
- Publication card: move author and publication name to metadata bar to
  be consistent with other listings
- Remove portrait.jpg from static as it was duplicated for Demo author

BREAKING CHANGES: See issue below.

See gcushen#909

* i18n: update French translation for v4 (gcushen#905)

* demo: add  blog based on Jupyter notebook

* i18n: update Italian translations (gcushen#914)

* fix: when toggling day/night mode, also toggle code highlighting theme

Fix case where code highlighting can be difficult to read after night
mode is toggled by user as the highlight theme remained unchanged.

* update post archetype

* feat: add People widget

* refactor: relLangURL no longer required in paginator

Hugo's template just uses `.URL`:
https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates.autogen.go

See gcushen#915

* refactor: consolidate list views

* fix(widget): People widget - add `authors` to user account

- add `authors` to set username in user account and force generation
  of user profile page whether or not user has published content. This
  is particularly useful for linking users from the People widget.
- People widget: only link to users which have profile pages generated -
  prevents 404 error if user did not perform the point (1) above
- add i18n "user_profile_latest" to customize user profile text

Fix gcushen#274

* feat(widget): add `css_class` option to customize widget style

Allows user to customize the style of a particular widget using the CSS
plugin feature. For example, the background of a widget could be changed
to an image or gradient.

Close gcushen#322

* feat(widget): animate Tag Cloud

* feat(search): enable searching by author name or category

Also, attempt to increase relevancy of search results in general.

Close gcushen#921

* bump version

* i18n: update Chinese translation (gcushen#925)

* fix: *_format to *_view

This fixes 7c2a85c .

See gcushen#909
See gcushen#926
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment