For those that have Poster 2 from @Jannis and Grid Plus Pro from @me, I have put together a project file to demonstrate how these 2 stacks can be integrated to create the grids/layouts for your blog items.
There are 7 demo pages - all of the grids are quite similar in structure but each is used to introduce a new technique (e.g. spanning columns/rows or setting background images).
I’ve also added a support page on the Knowledge Base (which is also where you can download the demo project from!).
I’m sure you’ll be able to create some great looking blogs with this combination of stacks!
Great job. There are some clever and creative layouts there that we haven’t seen created in RW before. Source and Poster2 are a very good fit.
Very interesting trick to use CSS to be able to treat poster items differently in the list view. However, one remark for all those who might have been as puzzled as I was when digesting the demo …
The knowledge base article reveals that Stuart seems to be using a pre-release version ‘2.3.1’ of Poster2, which must allow to assign CSS classes to individual items. When I searched my V2.2 high and low for where to put in the CSS class for an item … there is no such place ;) Consequently, when you run the demo with your current Poster2 installation, you will not see the featured item spanning e.g. two columns.
Stuart’s link to the demo pages on his server, however, shows us what we can expect to have before long, when @Jannis releases the next upgrade ;)
Hi @GKs - apologies for the confusion. That version is available though - just check RW for updates and it should come through. Was released a couple of days ago.
I stand corrected - when I just checked for updates … V2.3.1 was there ;) I should have checked it before writing my comment. Time to explore … ;)
Good to see someone digging into these demos. With the last couple of releases of Poster2, when used with Source, this has taken creative grid layouts to a new level.
That last demo is great. Looks really good.
I’ve bought Poster 2 and downloaded the Source Grid Plus demo project file.
I can’t seem to work out how to get the Tags and Categories info to show?
A demo file of the STH blog page
https://source.shakingthehabitual.com/source-blog/source file would be extremely helpful to see how the implementation with Source works.
Any help appreciated!
To add tags and categories you need to add a little code snippet into an HTML stack. See the Blog Archive info here:
Hope that helps?
Thanks Stuart! Yes, that helped. Now to work out how to add it to a “sidebar” type column
You can use Grid Plus / Grid Plus Pro to create a sidebar. An example is below. Over 900px there is a sidebar at the right that is 30% of the available width. You could adjust this to be whatever value you liked. Below 900px everything stacks and the ‘sidebar’ grid item is set to go on above the main grid item.
Here’s a demo of what I think you are trying to achieve using Poster2/source to add Tags, Categories and Search, in a fixed sidebar.
In this page I am using a fixed width of
220pxfor the tags/categories/search and then the main content will fill all available extra space i.e.
1fr. So the Row template is
The height of the fixed sidebar is set to a height of
100vhand the tags/cats will always be verticaly centered.
Using the Source Grid makes this easy to achieve. With any fixed sidebar layout, the other challenge is to convert the fixed sidebar into a conventional single column below a certain width threshold. Again, simple with the Source Grid by chosing a breakpoint of your choice, set the row template to
Many thanks Gary,
I’ll certainly grab that project and see if it helps my brain get around these grids!
If you need a hand with it just let me know.