Using drop-in component (content + partial template) in Hugo

In my home page, I have many components like hero, team, pricing partials. When rendering these partials like hero, I would like to use a as a content for rendering the hero.html partial. Is this possible? (I have a feeling that an index.html template will ONLY use file, and the only think available to hero.html is what is available in the context and not the context). I would like to confirm.

Why do I want to do this? Because I would like to create drop in components that are isolated from others and can swap them with other hero (content + template) as needed. I will be using netlifycms eventually,

Search this forum for β€œheadless bundle”.

directory structure
β”œβ”€β”€ headless/
β”‚   β”œβ”€β”€ hero/
β”‚   β”‚   β”œβ”€β”€
β”‚   β”‚   └── kitten.jpg
β”‚   └──

title = 'Headless'
date = 2022-04-20T17:07:30-07:00
draft = false
  list = 'never'
  render = 'never'
  publishResources = false

{{ partial "hero.html" . }}

{{ $p := site.GetPage "headless/hero" }}

<div class="hero-image">
  {{ with $p.Resources.Get "kitten.jpg" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}

<div class="hero-content">
  {{ $p.Content }}

1 Like

Thank you for your response! This is what I was looking for @jmooring

1 Like

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