Tweaking Projects Widget in Academic?

support
1

I’m looking for a way to tweak the Projects widget. The goals are to

  • make the card grid the full page width
  • standardize the card size regardless of preview image size/proportion
  • perhaps shrink the card size to fit 4 columns

The general idea is to end up with something like https://github.com/aerohub/hugrid so I can fit lots of projects neatly together in this section.

I’m new to Hugo. Academic is a slick theme but it’s a bit more complex than your average single pager and I find myself going around in circles to accomplish these probably very basic tasks.

Thanks.

2

A cursory look by me shows it’s running bootstrap, so, you might look into bootstrap’s css classes and tweak the widget. See the link below.

As for making just the project section wide, I think that’s more “major surgery” since the theme is looping over the various kinds of content it can display.

3

Thanks, @RickGogley, that’s the bit I was looking for. The section title disappears when I comment out lines 6-9:

<div class="col-xs-12 col-md-4 section-heading">
  <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
  {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
</div>

So far so good. The two columns of project cards shift to the left. But I can’t seem to add a third (or fourth) column to the right to fill out the width of the page. I’m a Bootstrap ignoramus, so I’ve been experimenting with instructions at https://getbootstrap.com/docs/4.0/layout/grid/#grid-options. But adding columns in this way squeezes everything to the left without adding another column to the right.

Is there more to adjust in the HTML file, or maybe I need to make adjustments to the CSS file instead/as well?

FYI I don’t want to make the individual projects section-wide, just the 3- or 4-column grid.

4

Found a fix: https://github.com/gcushen/hugo-academic/issues/133

My last wish would then be to have an even grid regardless of preview image size or project title length. Guessing that has to do with <div class="row isotope projects-container js-layout-masonry"> but unsure how to tweak it…