Archived topic
Blog Layout Customisation
11 replies · Started by scometamus on March 21, 2023
Dear GP-Team,
is it possible to achieve a blog layout like this: Link?
I'm talking specifically about the layout if you scroll down to "Previous Releases".
1. How can I create a blog page with the given layout (blog image + own (!) text (no excerpt!) rights beside)?
2. As for the single blog post pages: Is it possible to show other previous blog entries like on the example site below the post?
I've looked through your templates, and the "Sider"-Template is somewhat getting close, however I'd be curious how I'd get the specific layout from the example page.
Many thanks in advance and have a good day!
Jan
Hi there,
you ok using the Block Editor and GenerateBlocks ?
If so you can build it using a block element.
Let us know.
I'd be absolutely ok with that.
OK. Quick question(s) :
for the blog / archives will you require either Load More / Infinite Scroll or Columns with a featured column ?
Hi David!
It would be fantastic to have like in the mentioned site just one column to chronically have all previous blog entries listed.
Ok, if thats the case then.
Lets do the Blog / Archive first.
You will need the GenerateBlocks plugin installed and the Elements module active in Appearance > GeneratePress.
1. Go to Appearance > Elements -> Add New Block Element.
2. Set the Element type to: Loop Template
https://docs.generatepress.com/article/block-element-loop-template/
3. Set the Display Rules Location to: Blog and if you want All Archives so it will use this for categories tags etc.
4. The next step is to use a GenerateBlocks Query Loop block.
Take a pause here and to save you some time in a draft page or post copy and paste this Pattern:
It has 2 query loops in it, the left hand one is pretty damn similar to what you need, and you can delete / replace meeta etc. if needed.
Now with that copied paste it into your Loop Template.
5. With the Query Loop selected:
5.1 in its sidebar settings, delete any Parameters if there are any, and Check the Inherit Query from Template
5.2 form the Blocks Toolbar Click the Insert Pagination button.
6 Publish the Element.
you should now have a blog page looks similar to that example.
If that works then we can look at the related posts
Question there - are you a GB Pro user ?
Wow, David, thanks for the elaborative tutorial. Amazing to see what GP is capable of. Everything worked like a charm, brilliant!
The only thing I'd like to change is to disable the h2 heading for the blog / archives. That is easily doable by just deleting it in the blog element, but as it is supposed to also appear at the bottom of each single blog post, I'll wait for your input first.
Yes, I purchased GB Pro :)
OK awesome.
So for the Single Posts you're going to create a new element, so you can modify the other one how you want.
1. copy your Query Loop.
2. create a new Block Element - Hook.
3. set the Hook to after_content - for visual reference of hook see here
4. set the Display Rules to Post -> All Posts
5. Paste in your Query Loop.
5.1 Uncheck the Inherit Query from Template
5.2 Add Parameter -> EXCLUDE POSTS -> Current Post
6. Publish the Element.
If you want you can make the posts related to the current post taxonomy terms.
By adding a Parameter -> Taxonomy -> Category ( or tag ) -> Current Post Terms.
These Current Post options are part of the GB Pro features
Awesome! What I struggle with though is copying the query loop into the hook element and thus following steps 5.1 and 5.2 seem kind of undoable. Because in the hook element I only see html, no block view. When I copy the query loop I paste a lot of code, but nothing visual in there.
Ah, you need to us the Block element ( not the Hook ):
Appearance > Elements -> Add New --> BLOCK
Once you create the Element you can select its Element Type, by default it will be set to a Hook.
Amazing, that worked perfectly! Thanks a million times, this is so good!
Awesome - so glad to hear that!
