Ok, so are Collections not working as described here and here?
I am using a test blog to test creating collections. I want to create specific collections and put them on a page called “More”, such as News, Sports, etc.
So, I edited the YAML to this:
routes:
collections:
/more/:
permalink: /more/{slug}/
template: more
filter: tag:test
/:
permalink: /{slug}/
template: index
filter: tag:-test
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
Result? Nothing shows on the page “More”, and the tagged posts with the tag of “Test” don’t show up anywhere. All other tags show up on the home page.
What have I done wrong?
Does more.hbs exist? Have you restarted ghost (if self hosting)? What does your log at /content/logs say? Template errors can look a lot like routing errors…
I’m looking at a page tagged test at more. Did you fix it, or maybe you’re looking at a stale cache?
I just fixed it by changing the template reference to index. But what I’m really trying to do is replicate this:
I presume that in the example above if you click on American, it will display all articles tagged American. Unless I’m mistaken, and it directs the user to a Page with all articles tagged American.
If more.hbs isn’t showing posts and index.hbs is, that’s an error in the more.hbs template. Check your log in content/logs - it’ll probably tell you what the problem is.
But… backing up a bit. The screenshot you showed looks a whole lot like a tags page. And then the individual pages could be at /tag/american (for example) and use the existing tag.hbs template. Not all themes have a tags page, but you can make one if your theme doesn’t include one. The important bit looks like this:
//custom-tags.hbs
{{#get "tags" include="count.posts" limit='all'}}
{{#foreach tags}}
{{> "tag-card"}}
{{/foreach}}
{{/get}}
and
// partials/tag-card.hbs
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">
<img class="post-card-image"
srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 1000px) 400px, 700px"
src="{{img_url feature_image size="m"}}"
alt="{{title}}"
/>
</a>
{{/if}}
<div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
<h2 class="post-card-title">{{name}}</h2>
</header>
<footer class="post-card-primary-tag">
A collection of {{plural count.posts empty='0 posts' singular='% post' plural='% posts'}}
</footer>
<section class="post-card-excerpt">
<p>{{description}}</p>
</section>
</a>
</div>
In terms of getting styling right, it may be better to start from your index.hbs page (for the new tags page) and change the logic, rather than trying to add the styling to what’s above.
If you set it up that way, you don’t need any routing for the individual cuisine pages - they just magically show up at /tag/cuisinename and are displayed by the tag.hbs template.
As for the code you outlined, I greatly appreciate it, but I have zero idea how and where to do that, nor do I know where to find the content/logs
Are you self hosting? If so, your theme files are in /content/theme, and your log files are in /content/logs
If you’re on Ghost Pro, you don’t have access to your logs. This is a good reason to set up a local environment for theme development. :)
Yes and no, Digital Press is hosting. I don’t believe I have access to /content/logs or any of that
Oh yeah, maybe not. If you want to post your more.hbs here, I can maybe help you debug it.
Or if you’re going to do a lot of theme editing, I highly recommend doing it locally - it’s faster AND you get access to your logs. Documentation here: How to install Ghost locally on Mac, PC or Linux
(If developing on Windows, I highly recommend WSL - card styles are broken otherwise.)
I also don’t know how to post more.hbs here. The only thing I’ve done related to more.hbs is type this out in YAML:
routes:
collections:
/more/:
permalink: /more/{slug}/
template: more
filter: tag:test
/:
permalink: /{slug}/
template: index
filter: tag:-test
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
As an aside, the above works kinda. It only shows ONE article instead of all THREE articles tagged as Test
Really, all I want to do is create 6 pictures with hyperlinks to the tags, and have them display in a grid fashion like THIS:
When you give a template, you’re telling Ghost what theme template to use. So listing a template: more that doesn’t exist is the reason that page isn’t working the way you want it to.
Ok, I switched it to:
collections:
/more/:
permalink: /more/{slug}/
template: index
filter: tag:test
/:
permalink: /{slug}/
template: index
filter: tag:-test
Still shows only ONE of THREE posts tagged with Test on More
OK. So here’s how:
- Create a Ghost page in the editor. Name it whatever you want. Check that you like what the slug is (right menu) and adjust if needed.
- Create an HTML card in the editor. (Hit the + button and choose it from the list, OR type /html on a new line and pick it from the selector that appears.) In that card, put:
<div class="my_columns">
- Upload your images (use /image or choose ‘image’ from the + menu). Click each one and select the link icon after uploading.
- Make another HTML card. In this one put:
</div> <!-- this /div is super important - don't omit it -->
<style>
/* styles to make stuff responsive. Because I refuse to write code that'll break on a phone. */
.my_columns {
display: grid;
gap: 20px;
}
@media screen and (min-width: 1000px) {
.my_columns {
grid-template-columns: 1fr 1fr 1fr;
}}
@media screen and (max-width: 999px) and (min-width: 600px) {
.my_columns {
grid-template-columns: 1fr 1fr;
}}
@media screen and (max-width: 599px) {
.my_columns {
grid-template-columns: 1fr ;
}}
</style>
Values and breakpoints for @media queries chosen semi-randomly - adjust as needed!
(Edit: added the hyperlinks.)
1 Like
Done.
Looks like such in edit page:
It also looks the same when published, viewed from a different browser. I’m out of replies for the day.
Yes, the icons are the images of choice for this test. All are hyperlinked to a Facebook page.
Our Pages (digitalpress.blog)
Doesn’t matter what it looks like in the edit page. What’s it look like on the preview/publish page?
Are those small circles your images?
1 Like
My apologies - I missed some {}'s on the CSS. Correcting that right now in the previous post - try it again in a moment!
I’m useless without VS Code to point out my syntax errors sometimes! :)
1 Like
