Join the Webstudio community

Updated 4 weeks ago

I think I need help with Conditional Visibility

Pulling from Ghost.
Posts have tags. They are Book, Blog, News.
I have a dynamic tag page that lists whatever tag is passed to it.
Clicking on one of the post items takes to to the single post page.

My challenge is that different post types need different page layouts and styling. Blog posts look different than Book posts.
I assume the best approach is to use conditional visibility on the 'post' page. Depending on what the tag is, different components will be displayed with the different stylings.

Assuming this is the right approach, my main challenge is the expression editor. I've tried following a previous discussion, but not quite understanding it. Given my setup above, how would I compose an expression for 'show' to check for what the tag is. If tag == blog, then show.... type thing.
1
J
S
B
37 comments
Yeah that's probs your best bet. So the expression needs to evaluate to true. The general framework is this

somevalue ? true : false

In your case you'd find the tag (idr exactly where it's at) but something like

ghost.data.tags.0 == 'mytag' ? true : false

You can have multiple tags on a post so be careful with that... might break it if you add multiple and you're only checking for the first tag.
Thank you! got it. My main stumbling block is the expression editor. I could really use a comprehensive a-b-c resource on what the syntax is. I don't know much JavaScript. I suspect you might look at making it a bit more 'no-code' at some point. But for now I do struggle with it.
Attachment
image.png
I spoke too soon. Let me work on this...
For some reason it never evaluates to true, showing the element.
Open "Inspect" on "Ghost tag" variable please
If you are on a blog post, and want to see which tags are on that post, you should use the variable that has your post data. In your screenshot, it looks like you have a variable called "Ghost Tag" which I don't think you need.

I just tested on my Ghost and accessed the primary tag of the current post with the attached
Attachment
image.png
I've recorded a video. Sometimes hard to explain things in text. https://vimeo.com/1011691892/6492e6bdd8?share=copy
Use autocomplete to drill down into the data... you cahnged "primary_tag" to some custom value that doesnt exist and it's literally supposed to be "primary_tag"... heres how to do it https://www.tella.tv/video/steve-1-gbei
Amazing. Thank you. Didn't know the drill down thing. And syntax.
You get. I definitely recommend watching those youtube vids if you havent already. Little time spent up front will save you lots of time down the road
I've gone through the wordpress, aritable and Hygraph videos, but can't find the right approach. On the front page I need to display a number of featured posts from two tag collections. So on the home page there will be a section that displays featured 'media' posts and a section that displays featured 'news' posts. My assumption is that I would get up to 50 post items on page load, then in one collection list display the posts that have tags 'media' and 'featured' and in another collection list display posts with tags 'news' and 'featured'. The idea being that the client can tag items they want featured on the front page. How would I do that?
1 option: request all posts matching news and media. Then in your collections you check each item and if they are news, display it, otherwise hide it.

2nd option: you create 2 requests, one for media and one for news then simply bind each one to their own collection. This is more reliable but slighly slower. more reliable because in the first what happens if your latest 50 posts are media? Then you woulnd't get any news items
Yeah seems like option 2 might be best. So this is the get for all posts up to limit. What would be the syntax to limit this get to posts that have two tags - 'media' and 'featured'.?
Attachment
image.png
I actually Ghost does have a "feature this post" toggle. So that means I don't need to search for two tags.
I just need to filter for tags. In the tutorials, when filtering by tags, there is always a page slug like posts/tag-name. In this case I need to filter without there being a slug as this is the home page.
This feels like it should be close. I have a var called tag-media with a string value media.
Attachment
image.png
I also have one called event.
But the resource above is still getting all posts.
Okay, this works if i remove the public filter part. Any problems with doing that?
Attachment
image.png
public filter is there so if you hide the post (or make it not public like members only) then it won't fetch it. I would recommend using it in case you hide a post in the future
heres one of mine that uses multiple filters
Attachment
image.png
we really need to add the query builder ui πŸ˜…
Yeah I'm sorry I have needed so much help with this. I really want to make Webstudio work for me. I love that this project exists. But the API stuff is not something I have worked with before. I've always just relied on the built-in CMS for Webflow and WP.
I've been learning a lot from your help here as well as the videos. Thank you. Using %2B instead of + is an example.
Current state of the UI for API is very new, we are still learning what people struggle with.
First thing we will fix is the query builder, making it distinct fields should help quite a bit
I know this isn't Ghost or Pikapods support. But just for your info, every morning when I come back to working on the project nothing will populate from my Ghost instance. I can't even log into Ghost. Usually after I log into Pikapods it will start working again. The logs show a timeout error. If it keeps happening I will have to switch to WP unfortunatly. But with your tutorial and what I have learned it will hopefully be a smooth transition.
self-hosted ghost does let you login?
During the period where it is not responding, I can't log in, no. I have to go to Pikapods first.
It almost seems like the server is sleeping and doesn't wake up until I log into Pikapods. But I have no idea if that is what's going on. That's just how it seems.
sounds like an issue with pikapods, are they suspending your instance when its not used? I haven't used them, so I wouldn't know.
I would go to chat with pikapods people
this may be the case which is totally not okay. some platforms offers a pricing tier that don't do this but 100% check with pikapods to see what the deal is. We don't have this issue with using Ghost directly fyi so it's not Ghost
This was a learning experience for me to. I mean I know that there are HTML encodings for "special" characters, but the fact that Ghost requires them sometimes was something I had to dig in their forums to figure out. Other APIs have no problem with putting the "special" character in there
Add a reply
Sign up and join the conversation on Discord