Building a website with bootstrap 4 - direct output template strategy

Posted 15th Oct 2017

#bootstrap4 #completeguide #templatestrategy

Admin > Setup > Fields

Create the following fields.

NOTE: 'featuredImage' is a SINGLE image field i.e. Maximum files allowed = 1 on the 'Details' tab of the field. You can see information about this tab here.

Creating the fields
Creating the fields Zoom

Admin > Setup > Templates

Add fields to the 'basic-page' template.

Fields on the basic-page template
Fields on the basic-page template Zoom

Admin > Setup > Templates

Create a new template called 'services-entry'. Clone the fields from the 'basic-page' template.

Why clone the fields?

I'm hoping you will be asking yourself things like this as we build this website. So, why not just use the 'basic-page' template if they are the same anyway? The 'services-entry' template is going to be used to create children of the 'services-index' template (the parent). The layout will be different on a services page than on a basic page, therefore I've found it easier to use two templates rather than adding a bunch of logic in a single template to render differently.

Another thing is that in the future you may want to add fields to the 'services-entry' template. At this point it starts to become very different from the 'basic-page' template all you'll be all smiles knowing you saw this coming and separated them early on!

Creates a new template services-entry with fields cloned from basic-page
Creates a new template services-entry with fields cloned from basic-page Zoom

Admin > Setup > Templates

Create a new template called 'services-index'. This one just needs the title.

Edit the 'home' template and add the following fields.

The home template
The home template Zoom

So now we have the required fields and templates. Time to move on!

List of available templates
List of available templates Zoom

Feedback & support

I hope you enjoyed this tutorial. You can support pwtuts by following on @pwtuts. You can also donate at paypal.me/swcarrey to help support the site which would be awesome!

Related tutorials / See all

Suggest a tutorial

Please note: I do not store any of this information, it's simply used to send me an email. Your email address is required so I can get clarification on your request if needed.