Should I use a partial for repeatable tiles?

support
1

Hey up, first post here. I’ve done a bit of searching, but can’t seem to find anything about using a partial layout for repeatable sections, but with with different content. So, using a partial for a header or footer makes sense: it will be on every page where you want a header or footer.

But, what about creating a layout for a section of tiles (or columns, for that matter)?

Here’s my example. I have a pretty straightforward content structure:

| site
| _index
| products
- bowls
- _index
- spoons
-_index
etc…

I have the standard set of default templates in /layouts, and partials such as:

head.html
hero-image.html (used only on index layout)
hero-small.html (used on all node layouts)

I also have one called “three-tiles.html,” because I have a section on the home page that’ll use three tiles. I also want to use a three-tiled section on my list or single pages, but I’ll want the content to be different on each page.

Am I misusing partial layouts? Or, can I use a three-tiled partial to pull in content for each tile from a markdown file elsewhere in the project: reusing the html layout code, but using different content?

Cheers!

2

I have not read your post in detail, but I suspect you will find value in base templates.

1 Like
3

Thanks, mate. I’m not sure I’m following, though.

I can see how I could create blocks to call other templates, but what about calling in content? I’m probably misunderstanding some basics :slight_smile: .

I’ve got a partial template here in Github called three-tiles. Here’s an excerpt for context:

` 


            <article class="tile is-child box is-primary is-3">
                <a href="/wooden-ware/spoons" title="spoons">
                    <div>
                        <img class="image" src="tiles/spoon-axe.jpg" alt="photo of a spoon with axe">
                        <h2 class="title">Spoons</h2>
                        <p>Woden spoons stir pots and feed mouths.</p>
                    </div>
                </a>
            </article>`

I call that in my index layout using the normal partial call:

{{ partial "three-tiles" . }}

So, my index layout is just a bunch of partials, which I can then rearrange:

{{ define "main"}}
{{ partial "hero-image" . }}
{{ partial "top-section" . }}
{{ partial "three-tiles" . }}
{{ partial "video" . }}
{{ partial "about" . }}
{{ end }}

I can move the three-tiles bit above the top-section, etc. But, if I want to use the three-tiles on a different page – say a landing page – it’ll use the content from the three-tiles.html file. What I’m wondering is if there’s a way to use the three-tiles partial, but pull in the content of each tile from another place (md files?). That way, I could have a landing page layout, call the three-tiles template in that landing page, but have different content in those tiles?

Cheers!

4

Again, look at the base template documentation and note that you

  • can have as many blocks as you need
  • multiple base templates
  • have default values for the block in the base template
  • one random example from your setup would be the hero section: This is in my head a block in a base template. You may want to pull it in as a partial, but I would consider doing that in a “hero” define.
1 Like
5

Yeah, that’s possible (and often used). You just add the conditions to load things, and range through different content based on the conditions. I suggest loading up the theme showcase and looking for themes that have different layouts, and see how they do it.

1 Like