Complicated Nested Setup - Is this possible?

Hi there,

We are working on a client who wanted to make their “Place to visit” page more creative but I find it challenging building it out in the CMS.

There will be collection pages of Neighborhood and inside those pages, it has different categories of Coffee, Restaurant, and others. They layout of this page is like a magazine type where you have big and small images like you normally have on a home page design.

Is that something that can be built out in the CMS where it follows that magazine style layout and will be able to display those sub categories(coffee, restaurant and others) in each neighborhood page? It should also give the ability for the client to add as any as sub categories they want and could be different from the other neighborhood page.

Here is an example of their PDF page that they wanted to translate in a web form. Probably better than this but it has the same feeling

hi @mo-pan from what I see you will need …

  1. five collections
    coffee, food, drinks, shops, other

  2. home page with these collections with set up limits of shown items like you have on example PDF
    coffee - 1
    food -7

display items should be set by date or better “published on” to display only “recent” articles limited by number to display.

  1. you will need some “Archive” page for each collection that visitors can check all articles.

  2. images should correspond with latest articles in each collection means “category”. This logic has many ways to achieve and as you do not provided at least raw mockup it will be up to you.

Issue will be with adding a new category. This should NOT be done by client if doesn’t have developer background. Reason is that any additional “section” will have impact on final delivered product (website).

They should hire you to add these to website. I will be better for them and income for you.

Only hope your client has a great budget.

Good luck

First, I’d suggest you at least partly abandon the idea of a “magazine-style” layout, because it will be very difficult to translate to mobile devices. Keep your mixing of images and text simple and when possible, separate, to keep your layout fluid and responsive.

From a content structural standpoint, I can’t tell what your overall structure is meant to look like… but I’ll assume that it is one page per Neighborhood, and then Categories and Items within that.

Start with the simplest idea of each Neighborhood page as a giant rich text element, where you simply use headings etc and enter the exact content in the exact groupings you want. That’s the most flexible in terms of layout and content selection, but the least flexible in terms of content re-use.

From that starting point, you can consider what other Collections make sense to subdivide the page. This is driven mostly by-

  • Shared data considerations, e.g. if a specific restaurant could appear on more than one neighborhood page
  • Linking and isolation considerations, e.g. a restaurant-specific page, or a category-specific page ( which then is grouped by neighborhood ).
  • SEO considerations, where you want to maximize SEO by offering specific pages for specific things
  • Automation considerations, if data is being added or updated externally to Webflow

If you end up trying to discretely represent everything in the CMS, you’ll run into grouping and data-association issues due to the limitations in the design of the CMS and collection lists.

To avoid this, the approach I use is to build a JS “layout engine”. Basically I’ll emit the categories in one collection list and then in separate collection lists I’ll emit all of the neighborhood-specific places and details. Then my JS engine will reorganize the elements so that they’re in the right places. You can build out tab elements this way, slider elements, hierarchical groupings, change sorting, etc. all without encountering the problems with nested list limitations. Then do cleanup, such as hiding any empty categories.

It’s a bit of JS work but generally the best approach for a dynamic data-driven page design. Tools like Finsweet’s CMS Nest can be useful here as well if you want to avoid custom coding, you may find a solution there.

Hi! Thank you so much for getting back to me. Really stuck and I’m about to present this tomorrow. That’s very helpful and you’re right. That’s the right route to go with. So far it’s what’s I’m presenting tomorrow:

Appreciate your explanation! I’ll check this out during the development stage and consider what you provided. So far this is what I did and was able to find a cloneable CMS grid inside those categories. Here’s what I’m presenting tomorrow:

hi @mo-pan what I see now you need another collection let say “Places” or what ever and in this collection you will add : BYWATER, FRENCH QUARTER …

Another help will be to have another collection eg. “Type” that will only contain names of collections like Coffee, Food …

Than when client will be creating a new article he/she will choose what the article will contain and where :

Type: Drinks
Place: Uptown

than you can use these data to filter content of page template to shown content based on filters.

Keep in mind that this response is like thinking loud without any preps and because I didn’t use WF actively for several months Im not sure if Im correct, but technically speaking it can be done.

So now you have more things to think about how to glue all together. ;)