I’m fairly new to using Contentful and the example projects aren’t really helping me here.
I’m using Gatsby.js with Contentful and it’s been great for a simple blog. Each content model contains the specific things you need and isn’t modular.
This is fine but if I want to make all pages on a site accessible to an editor (not just blog posts) I’m unsure what to do. A home page, for instance, will have a hero, paragraph, image, another paragraph etc. I want to know how I can create this kind of model in Contentful.
From an editors perspective, when creating a new page I would expect to click New > Page. The page would have a title, slug and then simply a button for adding a component or module - this would be a hero, paragraph, image or whatever. You can add as many as you want and reorder them as you like.
I get the feeling references are used in some way, but I’m not sure how. Any help would be appreciated.
You’re on the right track. Create a Page content type with a title, slug, and any other information every page should have. Also add multiple reference field called Components or Modules or whatever makes the most sense.
Next, create several other content types for each of the modules you want the editors to be able to choose from: hero image, paragraph, image like you mentioned and add the fields the editors should fill out for each one. E.g., the Hero Image content type might have a name short text field and an image media field.
Last, go back to the validation settings of the Page content type and set up the Accept only specified entry type validation and select each of the module content types you made above. That way the editor can only link or create entries of these content types.
Thanks a lot, I had pretty much the right idea. I’m gonna have lots of content entries now though because each component is an entry. When I make a page it could add 20 entries and the whole thing is gonna get messy quickly?
Could you share with us what you mean by “noise”?
For example, is it “components that you’re not going to use in other pages?”. Is there anything else?
Also could you tell us what is the bulk of the components that create this noise? Text modules, image modules, etc?
I’m sorry Alex, I meant to ask what you mean by “messy”, not “noisy” :). I’m interested in your content modeling around these components. For example, what kind of components do you have? Text, Image etc?
Ah, ok. So what I mean is, say I create a page which is made up of componenets such as text, images etc like you said. When I publish a page it creates lets say 10 entries - one being the pages itself and the others are the text, images etc. It would be nice to hide this from editors because they only want to see the actual page entries, not every technical entry. It would also be nice if creating the reference components (text, images etc) felt more integrated into the page creation rather than a seperate conponent thats being linked. I don’t know if that makes sense?
There’s a feature of the webapp called shared views which should solve the messy information overload issue by helping your editors only see the main content they are interested in (and not see the ‘technical entry’ as you call them) . Here’s a blog post about the topic as well (written by @spiros )
)