Modern widgets

support
1

I am very keen on having some modern widgets on my static website so content can be digested at a better rythm. My website is a book so very very verbose and usually not very comfortable to read on web format, this is the reason i am very interested in finding ways to produce the next things;

  • Accordion content (you press a button and parts of the text unfolds) (aka toggles)
  • Tabs (various tabs have different content so you can read the content related to Linux or Mac, but I don’t have to force people to read what they don’t want.
  • Before/After widgets to show an image before and after a particular effect.
  • Filterable porfolio
  • Galleries
  • Lightboxes

Is this possible? can someone point me to examples on how to achieve these?

My reference is DIVI plugin for Wordpress that I used before.
https://www.elegantthemes.com/gallery/divi/

thanks in advance.

1 Like
2

Hi @jordibares. The things you are asking are mostly CSS/JS related, not directly Hugo related.

With that being said, off the top of my head, Bootstrap Components have much of what you’re looking for https://getbootstrap.com/docs/4.3/components/

From there you would need to build a theme for your particular needs, or search the official Hugo Themes site.

1 Like
3

Thank you, I was not aware that was the mechanism… Will start digging.

4

Hi again, it is fascinating to see Bootstrap with Hugo but I do wonder if the fact that the content is literally tied to the bootstrap library makes the whole exercise viable yet I suspect I would rather extend the markdown to do the connection to bootstrap when generating.

Is this possible? thanks in advance.

5

It’s not. Your content lives on its on as markdown, or one of the other supported formats.

6

Shortcodes
You could accomplish some of this by using Hugo’s shortcode snippets. This is great for small components that contain simple content. For example, a warning or info box, blockquotes, or buttons.

For components that will contain a significant amount of content or complexity, shortcodes might be a bit too limited to use.

Page Templates
Another option is putting all of the content within the page’s template. Doing this, you end up with:

  • Markdown file
    • Just has frontmatter
    • Required to generate the page
  • Individual Page template
    • Somewhere In your /layouts/ folder
    • Contains all of the page’s content

Now, I’m not saying you should definitely do this, as it’s not scalable. It is an option that might work when you have a handful of pages you rarely change, but need to have great control over the layout and design within the content.

Typography & Layout Design
Considering you mentioned your site is a book, here’s another option. There are many ways, with typography alone, that can really enhance the user experience and readability of a site.

For example, checkout Tufte CSS. It’s a small CSS library focused entirely on this sort of thing. Tweaking font sizing for different components (e.g. paragraph vs. header), font weights, and a few other things can make a big improvement sometimes.

To expand on that small CSS library, take note of the comments and citations that page has in the right margin. That’s something you could absolutely achieve with Hugo shortcodes.

1 Like
7

Thank you so much Travis for the notes… after some investigation I am inclined to try shortcode snippets and take it from there… I am after adding some “glitter” the text, currently bootstrap seems way overkill for my needs.
Once again, thanks for your help.

8

Just to keep you and fellow hugo users of my approaches, I resorted to use shortcodes for all those widgets and did the styling (css) within the shortcode as well to keep everything really neat and independent.

For example, my badge shortcode is as simple as this;

<style>
	.hg-badge {
		border-radius: 5px;
		border-left: 3px solid #5c8799;
		color: #495057;
		width: 100%;
		position: relative;
		padding: 1.1em;
		margin-left: 0em;
		margin-top: 2rem;
		margin-bottom: 2rem;
		background: #d6e1e6;
	}
	.hg-badge p {
		font-size: 1em;
		font-weight: 100;
		display: block;
		line-height: 1.5em;
		margin-top: 0rem;
		margin-left: 1rem;
		margin-right: 1rem;
		margin-bottom: 0rem;
		padding: 0rem;
		position: relative;
	}
</style>

<div class="hg-badge">
	<p>{{ .Inner }}</p>
</div>

and from my markdown I call it like

{{< badge >}}
Remember to save your files before closing
{{< /badge >}}

Thank you all for your help.

1 Like
9

Your page templates suggestion is similar to how Forestry.io handles these things (or can, if you so wish). Everything can live in front matter. They have a concept of “Blocks” which can be rearrangeable blocks of content with (possible) associated parameters which Hugo can then process and send through partials in Hugo templates.

@dwalkr has a nice article on that.

It’s an interesting concept if you want a CMS and can spend the time building the block data structure.

2 Likes