I have a question that might be simple, but I’m quite new to this whole Wordpress & Bricks thing so please bear with me. I want to create a portfolio site, with a home page containing a simple 3x3 grid and each element clickable leading to a different project.
I created a Header / Footer template, a home page and a post template which I want to use as a project template. How do I link each grid cell to my project / post template? I don’t really understand how to bridge that step via Wordpress or Bricks. Any help is appreciated!
I’m not sure to understand what exactly you want to do and what you have already done?
But in general you have to query the projects inside a div in home page.
Then change the HTML tag to “a[link]” and choose dynamic data for link post link.
Then add image inside this div and choose dynamic data featured image
then style.
If I understand correctly, you want to display projects on your homepage as a 3x3 grid, and on clicking the project, it’ll take it to its respective post page which has the Post Template you created, right?
You can create this easily by using the Query Loop in Bricks Builder. Here’s an article by Bricks on how to use the Query Loop - Query Loop – Bricks Academy
Here’s how it works:
You create a container and enable the Query Loop on it. This gives you the option to load Posts, Pages, or any other custom post type.
If your projects are added as Posts in WordPress, you select Posts. The Query Loop gives you options to set the order, no. of items to display, etc.
Happy new year! Sorry if I wasn’t clear… you summed it up quite well @iamahfaz.
I checked out Query Loop and now I can wrap my head a bit better around dynamic datas. I realised that I needed to use a Post template to format the text / header of every project then will have to add images independently in my layout for each—like that:
My grid has a ‘repeat(3, 1fr)’ attribute and the block has a 33rem height with featured image as dynamic data in their layout (I tried on the container level instead but it just stretched one image across the whole container’s width).
I don’t really get why they’re stacking up vertically like that… how could I make it so that each page’s featured image would line up to my chosen block layout, from left to right then down to the next row, with gaps and all? It’s almost like the query loop layout is extending outside the container somehow.
Ah… your post made me realise that I enabled Query Loop at the container level and not block level (which just had the featured image), hence the builder’s screwup—it was only a matter of having both the Query Loop and Featured image at the same block rank with the container “just” holding the grid layout. Now it seems to work just fine:
post link.
