How to set a layout for a partial view?

support
1

Hi there,

How do you set a master template for a partial view?

In my case, I want to create a layout file for a modal window, sort of an HTML overlay wrapper, and then have multiple partial views (modals) reusing the same wrapper (layout). So the partial view would only contain the inner content of the modal window. I need these partial views (modals) injected into my master template baseof.html.

Thanks in advance!

2

Unless I’m missing something, this seems like a nested partial.

layouts/baseof.html --> layouts/partials/modals/wrapper.html --> layouts/partials/modals/modal-1.html
1 Like
3

Hey @jmooring, thanks for a quick reply!

I created the file and folder structure the way you suggested, but when I inject the “modal-1.html” into my template using {{- partial "modals/modal-1.html" . -}} it only renders the “modal-1.html” content (not wrapped with the “wrapper.html” code).

What do I need to specify in the “wrapper.html” to tell Hugo where to render my inner content, and how do I tell the “modal-1.html” to use “wrapper.html” as a layout?

4

You need to parameterize the call to the wrapper. Here’s an example:

git clone --single-branch -b hugo-forum-topic-38299 https://github.com/jmooring/hugo-testing hugo-forum-topic-38299
cd hugo-forum-topic-38299
hugo server

Look at:

  • layouts/_default/home.html
  • layouts/partials/modals/wrapper.html
  • layouts/partials/modals/modal-1.html

Related:

5

Brilliant! This is superior support, thank you so much @jmooring!!

6

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