Change post layout per page

Themes
1

I’m new, sorry if this is basic, i think i just need some pointers where to look
I’m trying to use a custom post feed layout in a theme for different routes. I’ve modified the routes to use separate hbs files and that works. in the hbs file for the specific route i tried to use this #match on the post_feed_layout which is an option in the theme. i think its trying to do a match on the posts with that layout because now its not showing the posts. i think it needs to go into the main or div classes but not sure how to specify that.

<main class="gh-main gh-outer">
    <div class="gh-feed gh-inner">
        {{#match @custom.post_feed_layout "Classic"}}
            {{#foreach posts}}
                {{> "loop"}}
            {{/foreach}}
        {{/match}}
    </div>
</main>

i figured out how to modify the package.json to add other post_feed_layouts, that might be a better option so i can change the format for each route in the ui, but still unsure how to set the post feed to use that value

2

What your current code says is that IF the @custom.post_feed_layout (which is a site-wide variable, not for an individual post) is “Classic”, then do this:

            {{#foreach posts}}
                {{> "loop"}}
            {{/foreach}}

So if it isn’t Classic, no posts show up. I think that matches your symptoms?

If you want each custom template to have different layout, you can just set each one up differently. If that doesn’t quite get you where you need to be, please post again with some more explanation on what you’re trying to do?

3

Yeah after some reading i figured thats what was happening.
I’m trying to mod the solo theme a bit and there are three different feed layouts, i copied index.hbs and made a recipe.hbs from it for example. in the routes i have a specific route use the recipe.hbs. i want the recipe.hbs to have the “typographic” feed layout and the main home page to be “parallax”. after some reading ive been doing i think this is going to be more just setting the classes for the different sections in the recipe.hbs more to how i want. is that correct or is there an easier way?

4

I think your approach sounds fine. You could basically start from index.hbs (from the recipe.hbs) change the #match parts that are looking for the other formats to {{#match 1 “eq” 0}} and the one for typographic to {{#match 1 “eq” 1}}

Or you could cut out the parts you don’t want (that render the other layouts) and keep the parts you do.

5

I think thats where im stuck trying to understand where to override the site wide settings for the feed. i think it looks like the {{> “loop”}} line might be referring to the partials\loop.hbs which has the {{post_class}} at the top, which if thats the case perhaps thats the spot i should be modifying what i want

<article class="gh-card {{post_class}}"{{#if primary_tag.accent_color}} style="--tag-color: {{primary_tag.accent_color}};"{{/if}}>

sorry, like i mentioned i just picked this up over the weekend and trying to learn how everything is laid out.

6

You’re doing great.

You can read about post_class here: Ghost Handlebars Theme Helpers: post_class

If you want to change what’s going on inside the loop, making a copy of loop.hbs and editing it is something you can do, but I don’t think that’s where you need to edit. Check out this last line of index.hbs:

{{#contentFor "body_class"}}{{#match @custom.header_section_layout "Side by side"}} has-side-about{{/match}}{{#match @custom.header_section_layout "Large background"}}{{#if @site.cover_image}} is-head-transparent has-background-about{{else}} has-side-about{{/if}}{{/match}}{{#match @custom.header_section_layout "Typographic profile"}}{{#if @site.icon}} has-typographic-about{{else}} has-side-about{{/if}}{{/match}}{{/contentFor}}

That’s passing the layout up to default.hbs, in teh form of a bunch of classes. You can totally change that part to pass body_class whichever of the layout options you want applied to your recipe.hbs page.

Hope that helps!

7

great, i saw that line and started breaking it out to proper readable format and i was thinking it looked like something conditional but wasn’t quite sure. ill play with that part after work and it sounds like that might be what i need. Thanks!

1 Like
8

its friday… work can wait lol
that got me pointed in the right direction and im seeing how this works together a lot better now. I was able to remove the matches for the feed layout on the default.hbs in the body class and specify it in the recipe.hbs in the contentfor section. probably a better way to do that and still allow it to be changed in the theme ui but ill get to that later, going to play with what i was trying to accomplish for the other pages now.
Thanks much!

1 Like