Show Talks as Cards

[melvidoni]

First of all, thank you for creating this template, as it is perfect for academic websites.

I want to ask if it is possible to configure Talks to look like the Project Cards. I find that the 'Detailed' style is too big, and either 'Stream' or 'Simple' are just too small. Is this possible without wrangling with the CSS? Could this option be included in the theme?

Thanks.

[melvidoni]

I did something with JavaScript and CSS. This is how my widget looks:

I'm going to share the solution here, in case anyone is interested. This is done for the talks_selected widget, and the talks_selected.md widget must have list_format = 3.

On config.toml I added a custom javascript and css:

  custom_css = ["style.css"]
  custom_js  = ["script.js"]

My CSS has the following key elements:

#talks_selected .row {
    flex-grow: 1 !important;
}

#talks_selected .projects-container {
    display: flex !important;
}

#talks_selected .card {
  padding: 1em;
}

And I created the following JavaScript: script.zip. I know this is something made... by coercion, to say it, but I think it looks quite nice!

[gcushen]

Thanks for sharing your customization.

Since there is already a choice of popular layouts and card style is relatively easy to apply to non-card layouts by customizing CSS, I am unlikely to support further layouts at this stage.

Perhaps in the future I may look at implementing a card option in config which would apply a card style to all list items across all widgets etc.

[DavidPatShuiFong]

It is possible to customize the pages widget (used for 'talks'/'posts'/'publications') of Hugo Academic 4.8.0 to have a cascading cards layout (using isotope/masonry), just like portfolio widget (used for 'projects').

Parts of [ROOT]/themes/hugo-academic/layouts/partials/widgets/portfolio.html can be copied to [ROOT]/themes/hugo-academic/layouts/partials/widgets/pages.html. The modified pages.html can be stored in [ROOT]/layouts/partials/widgets/pages.html.

Here is part of my modified pages.html, which adds a view 6, which is the cascading card view.

<div class="row {{ if eq $st.Params.design.view 6 }} isotope projects-container js-layout-masonry {{end}}">

  {{ range $idx, $post := $query }}
    {{ if eq $st.Params.design.view 1 }}
      {{ partial "li_list" $post }}
    {{ else if eq $st.Params.design.view 3 }}
      {{ partial "li_card" $post }}
    {{ else if eq $st.Params.design.view 4 | and (eq $items_type "publication") }}
      {{ partial "li_citation" $post }}
    {{ else if eq $st.Params.design.view 6 }}
      {{ $link := $post.RelPermalink }}
      {{ $target := "" }}
      {{ if $post.Params.external_link }}
        {{ $link = $post.Params.external_link }}
        {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
      {{ end }}
      {{ partial "portfolio_li_card" (dict "widget" $st "index" $idx "item" $post "link" $link "target" $target) }}
    {{ else }}
      {{ partial "li_compact" $post }}
    {{ end }}
  {{end}}
</div>

View 6 can be used in [ROOT]/content/home/posts.md

[design]
  # Toggle between the various page layout types.
  #   1 = List
  #   2 = Compact
  #   3 = Card
  #   4 = Citation (publication only)
  #   6 = Cascading cards
  view = 6

I describe this in more detail in a blog post, a picture of an example (modifying the features widget) is below: