Can anyone suggest a way to achieve this sort of layout? It has a bit of a masonry feel, but using a masonry stack lays things out a little more “randomly” than I’d like. I’d like to establish the layout first, and then I’ll provide images to fit…
Hi Brian, welcome.
Are you using any particular themes or frameworks at the moment? Some have the tools to build this already, if not there are various layout stacks that should be able to achieve this.
Just thought it best to ask what tools you have already to see if they can do the job, rather than saying you must buy this new shiny stack here lol
1 Like
Ah, should’ve mentioned that! I use Foundry (and have their two add-on “Thunder” and “Potion” packs). Perhaps the tools I need are included, but I’m obviously lacking the skills to figure out how to get this look!
1 Like
Afraid I don’t have Foundry, more use Source these days, can’t advise how/if it can do this.
@Fuellemann if I recall you use Foundry a lot, is it possible or would it need to be Foundry 2 or another solution?
2 Likes
I think it will work - use nested columns and inside the colums use a backgound stack for the image and an position or vertical stack for the content:
1 Like
But for this you could have a look at the Grid Plus stack from @habitualshaker:
Look at the Addons stacks, then click gridplus. You can use it in Foundry if you add the Stacks | Source to the site.
1 Like
You’d be able to get something resembling that grid using nested Foundry columns as @Fuellemann suggests but it might be tricky to get it to all line up in terms of height and spacing. You’d also not be able to re-order the items in a set way when stacked (if that is important to you).
Grid Plus can definitely do this kind of thing. Here are some examples. As Jan says though to use it in Foundry you’d also need the Grid ‘Enabler’ stack.
Have just mocked up an example. You can view it here.
Thanks everyone!
@habitualshaker, this led me to look at Grid Plus and Source and it’s led to a few questions. Hope it’s OK to ask them here:
-
I fall into the ‘regular Stacks user’ category as mentioned on https://source.shakingthehabitual.com. There, it’s mentioned that “you are damaging your page speeds by adding a full framework to your page for no good reason”. Can you explain how? I’m currently using Foundry and would definitely consider making the switch to Source if I can get better performance! I’m working on updating my business’ Foundry-based site largely because I feel that it’s slow.
-
I have Foundry’s two add-on packs, “Thunder” and “Potion”. Will I be able to use the stacks with Source?
It really depends on what you are using in the framework and whether you are getting the worth of adding all the framework code onto your page. A full framework will contain a load of code that you will very likely not be using (especially if you are using a lot of third-party stacks). If you are though then there is no harm. Here is a blog post I wrote about the drivers behind Source.
No. They are locked down to Foundry and need to be used within that framework.
1 Like
OK, sold 
BTW, I should mention you have a 404 in your project files. ‘Welcome to Source → Addon Stacks → Grid Plus - Grids - Tutorial Grid’ has a broken link to a tutorial video. Where can I find said video?
Sites can be slow for a lot of reasons. If they’re unusually slow, it’s usually because they contain lots of very large images or video files. Most frameworks are smaller than an averaged sized image, and as such they don’t usually cause a site to be slow.
If you rebuild your site and use the same content, in the same sizes, you’ll end up with a site that loads nearly the same. Make sure you know why your site is slow before you begin rebuilding it.
1 Like
Well, maybe a few images: https://shakingthehabitual.com/stacks/source/blank-page-comparisons/
But yes - images will often be the largest contributor to page size. Certainly on image heavy sites.
Not the case here, thankfully! Images are optimized, I’m using Cloudinary CDN to deliver and use @habitualshaker’s Srcrer stack to pull “right-sized” images.
I’m mostly just trying to get rid of the chaff and eke out the best performance I can.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.