Hi, everybody,
I am looking for someone who would be willing to share a RSS template made for ‘Feeds’ stack used in ‘Source’ framework.
@joeworkman, do you have a demo project for Feeds in Source framework? I am specifically interested in the RSS template.
I have tried to start from scratch (demo project made with Foundation has been of no use to me, since I don’t have Foundation 6). However, my attempts fell short of expectations. Although my setup does pull RSS feeds, they are all extremely rudimentary, they lack links to original articles and are completely un-styled. Help would be very much appreciated.
Hi @fapkogi -
Have you tried toggling on the ‘Data preview’ option in the Feeds stack? That will show you what data is getting pulled in along with the names for each field etc that you can then use to build out your desired structure.
Using Twig takes a bit of practice but if the data is coming through ok then there is nothing you can’t then do with it.
p.s. i’ll see if i can extract the RSS example from the demo project and rebuild it in Source as a reference.
EDIT: Here is a very basic demo that i have just pointed to the RSS feed for my Source blog. Should hopefully get you started…
2 Likes
Hi, Stuart, that would be great! Thank you so much. 😘
For now, though, I’ll try to peruse and maybe modify the demo you’ve linked to…
I will try this hint tomorrow…
At the moment, my template is basically same as yours, except mine has the {{date}} instead of {{author}}.
In my case, feeds that are consisting only of description are displayed normally (minus links to original articles). But some feeds consist of an entire content of a post/article and those show up as a source code rather than styled text and images, even if I replace {{description}} with {{content}} in my template.
Adding a link in the form of a button is awkward and superfluous. I would like a {{title}} to function also as a link to an original article.
This is a key step as otherwise you are largely working blind.
Do that then. Another alternative would be to make the full grid item a link.
You can set any like that to render the html by using the ‘raw’ modifier - e.g. {{content | raw}}
1 Like
All good advice, Stuart. I will be working on it later today. If I get any luck, I will report. If I don’t get lucky, I’ll report anyway.
1 Like
Success! All rendering is perfect now!
You’ve also helped me solve the link problem. I placed the title inside a container and made container as a link with this snippet: {{link}}.
Now, there is one more thing that I would like to improve, if possible. Is there a way to make a background of every other article different? Something like a “zebra” list:
Are you still using a Source grid to lay this out? Even as a fixed 1 column grid? That would be easiest. Then you can add something this css to the page (and first adding the class name myFeed to the parent grid stack):
.myFeed .s-cols-item:nth-child(2n) {
background-color: var(--background-color-alt);
}
This will pick up Source’s alternative background colour but you can adjust this to whatever you want.
You’d be better just making the title a link (e.g. by adding <a href="{{link}}" target="_blank">{{title}}</a> to the header stack.
1 Like
No, I am currently using Container, but I will try the Grid method you just described. I will also try to modify the link. Thanks for suggestions, Stuart.
Unfortunately, this does not work for me. I added the myFeed class to the Grid (Source) and placed your CSS snippet in Page Inspector, but I still don’t get alternate background color for articles.
Are you already specifying a background colour in the Grid stack? If so then either get rid of that or you could add !important to the css e.g.
.myFeed .s-cols-item:nth-child(2n) {
background-color: var(--background-color-alt) !important;
}
I copied the entire string (including !important) to CSS Page Inspector. However, with or without Grid background color specified, it still does not work.
You are definitely using Grid stack and not Grid Plus/Pro?
Yes. I’m using regular Grid. Here’s my template:
UPDATE (11 Nov’23): this template is no longer current.
And you definitely added the myFeed class name to the parent grid and not the grid item?
If so then send me that page i will take a look. Hard to troubleshoot in the thread like this.
in fact i can now see the issue. you are generating a new grid for each feed item whereas you really just need to be generating a new grid item for each feed item. Switch up how you set up Feeds to mirror how i had it in the demo file (with Feeds inside the Grid and the Grid item stack inside Feeds).
I tried to, but it still doesn’t work for me.
I will. Tomorrow? Thanks…
For those who might be interested, I have sent my simplified page to Stuart and he straightened up my RSS template right away. Now it works exactly like I imagined.
If anyone wants to send me a PM, I can share this Source-specific ‘Feeds’ RSS template with them.
Once again, to help, Stuart (@habitualshaker) went beyond supporting his own stacks. He can always be counted on… 👍
4 Likes
