Different profile pictures in sidebar for different sides from the menu

support
1

I’m new to Hugo (and making websites in general) so I have a potentially naive question. Is it possible to make the profile picture in the sidebar change when different pages from the menu are being opened? I’m creating an academic portfolio website with pages such as: About, Research, Teaching, Contact, etc. in the menu, and would love to be able to assign a different profile picture in the sidebar to each of them.

Thanks for your help.

2

It all depends on how you want to implement that. You can add an image through CSS or tag. Then you can construct your sidebar layout to serve differently on a different page.

For example, if is a homepage, serve one, if is path /about/ different etc.

Some rough examples (from the top of my head).

{{ if .IsHome }}
<sitebar class="main homepage">
 <!-- code for sidebar -->
</sitebar>
{{ else if .IsPage }}
<sitebar class="main page">
 <!-- code for sidebar -->
</sitebar>
{{ else path.Base "about" }}
<sitebar class="main about">
  <img src="about.png" />
 <!-- code for sidebar -->
</sitebar>
{{ else }}
<sitebar class="main">
 <!-- code for sidebar -->
</sitebar>
{{ end }}
3

Page Resources might help you with this. See this example (ensure you are using the exended version of Hugo).

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.