What if our blog types could each have it's own distinct look and feel? Be much better you think? We did, so we coded it.
Jul 2018
Blog Types: Custom Templates and Styles
John Ince
Blog Types. The Story so far
In a previous sprint we refactored our blogs to have multiple blog types. To read all about it https://projectpeach.co.uk/ProjectPeach/Default/Static/def/blog_42.html here. In summary we used to have a single blog type with a single visual design. All our projects used the blogs in a different way, as diverse as a help system to FAQs to regular blogging but all were tied to one blog type and when you'd used it up that was it. That's why multiple blog types were born, to compartmentalise and primitively style using optional timelines and comments. We did the bare bones to support multiple types. In a successive sprint, as part of custom content page headers, we added blog headers as described below. But now, in the current sprint, it's time to finish what we started. Blog type page visuals per type.
A Custom Content Blog Type Header
When we did the first part of our blog types work we did very little visual work. They all looked the same visual style. So if you created a few types like 'Case Studies', 'Press Releases', 'Just Blogging' even though the blogs were in discrete categories there was no visual clue, simply the change of blog data. We wanted to make it obvious which blog type you'd arrived at. So a couple of sprints ago we did some work on custom content page headers. It's simply a banner at the head of the page where you can change the Image, Title and Strap line. It's been implemented all around the visuals side of our off the shelf web applications like in the eCommerce. It means when you arrive at a page like the newsfeed then you've a visual clue, a header, to indicate where you are. Blogs where no exception. Here's the blogs page in Project Peach and we've now a blog type for Programming blogs. Take a look. You know where you are. But this is just a nice to have and didn't change the fact that ALL blog types looked visually the same.
Blog Types: Custom Templates and Styles
Project Peach blog type: Blogs. The visual header instantly confirms your page destination. Notice the optional timeline down the left hand side
Blog Types: Custom Templates and Styles
Project Peach blog type: Programming. A differing header to visually define the blog type. As ever, to change, right click/edit/save that's it! Notice the absence of a timeline, it's optional
Templates and Styling
What's this template and styling all about? At Project Peach we're very, very keen to structure things the RIGHT way. We're engineers with engineering mentality. We strive for perfect demarcation between our functioning components and visuals, and also within these components. It helps us, and others with diverse skill sets, to work on their speciality without affecting other specialists. Our web application pages are made up of three main components, HTML templates that form the structure of the page, CSS styling that forms the visual rendering of the page and JavaScript glue code that's completely irrelevant here. Let's cover them one at a time in a little more detail:

All our pages are based on boilerplate HTML templates conforming to our framework standards. This defines the layout or structure of the page. The components that make up the content are headers, footers, any custom content like images, buttons, sliders, opening hours widgets and so on. We built these components/controls that are part of our client side framework, each has it's own specific type with built in functionality that can perform actions. Templates simply define the functional widgets that make up the page, not their positioning, colour, borders or any other styling. Templates are processed server side to replace literal data tags with actual literals which helps support user literal changes and foreign language translations. For release/production versions these templates are literal translated, minified for size and obfuscated for security so it's hard to view the template source in the browser.

Styling is the way the page looks to the user. We use CSS styling to render the page or brand the page into our clients livery. So we can make the same template appear visually different simply by changing the styling applied. Positioning, Colours, Borders, etc. Everything that defines the rendering of the template as a web page.

So, prior to this sprint, all the diverse blog types shared the same template and styling even though they had the 'new' custom content header component. We could of implemented this new feature partially by changing only the styling component. Change the visual rendering of the template per blog type as we do now across projects right now. That's how we style to our clients brand BUT how cool would it be if we went the extra mile and allowed the template to change too. That means that both the physical structure AND the look can differ between blog types. They can look completely different between blog types.
Blog Type Pages Vs About Pages
Since we've upgraded our single blog type to multiple blog types we've noticed that our clients are using them in creative ways. It's almost like we've created a user defined 'About' page. Let's rollback a little bit and define our meaning of an 'About' page. We've clear distinction between design time page design and run time client changes via our live CMS. If you'd like to know more about why we call our CMS live https://projectpeach.co.uk/ProjectPeach/Default/Static/def/blog_51.html. We build the structure and the styling of our clients websites at design time, by this we mean the way the page looks and functions, at run time our clients can alter the 'Content' using our live page components via our live CMS. These components are generally images, words, pricing, blogs, newsfeed articles and so on. The pages that we build at design time to support our clients needs are what we call 'About' pages. The client can change the content but not the template or styling. Back to the point. Since we added client created blog types our creative customers have been creating simple 'About' pages of their own using our extensible blog type feature. Legal Documents pages to support GDPR, terms and condition, help systems, etc. At the moment, even after this refactor, there's not quite enough to say we can replace 'About' pages but it's the start.
What drove this Feature to the Head of the Backlog?
An email from a client with a question. We'd like you to change the 'Team' About page to a new style that separates board, leadership and employees into a new format and there's a simple sketch out attached. The simple answer? Why not simply use a new blog type Person? Add your people as blog information and each associated blog is a resume/CV. You've also all the benefits of an 'as you type' keyword search for skills, names, qualifications or anything. BUT it has to be the same template and style as all the other blogs currently BUT a quick'ish change to our code base could fix this. One other tiny thing to add as well, we'd like to enter the blog specifying a keyword or partial keyword then we can enter and display only 'Board Directors' or 'Technical' and so on. So the 'Team' About page is simply an overview with groups of employee types and it points into an highly dynamic blog type that our client can control. Best of all since we now have total control over the templates and styling we can make it look just the same as the old 'Team' About pate. Take a look at how diverse blog types can now be in the images below.
New 'Team' About Page
Blog Types: Custom Templates and Styles
A new team overview 'About' page replaces the current 'People' About page. This is the link page to the new 'People' blogs with custom styling. The blogs can now be entered with a filtered search term that restricts the results returned, just like typing in the blog search. Right click, edit and save to add new people categories.
New Blog Type 'People' Page
Blog Types: Custom Templates and Styles
The 'People' blog type page is styled exactly like the old 'People' About page however it's actually a blog type. Looks the same however our client can now link articles, which are actually CVs, to the blog title headers which are actually people. Blog types can now be visually diverse too. Just add people like you would add a blog. Easy.
New Blog Type CV/Resume Page
Blog Types: Custom Templates and Styles
A blog with the format of a CV. We changed the 'People' blog type styling to be visually a CV/Resume. Remember ALL blog types can now be styled to look unique, we simply design and add the new style and it becomes a pick-able option when creating a new blog type.
That's All Folks!
Not quite. We've more backlogged stories around blog types to implement. We're really keen to bring our design time 'About' pages and blog types somewhat closer together. That's for the future. Watch this space.
Doing it differently since 2012. We're simply 10 years ahead. Our software is designed, coded, maintained, supported & hosted in the United Kingdom.
Why Project Peach?
The Hawthorn Gallery
DBD International
Knot 2b Missed
Monero Mine
About Us
Contact Us
Pay Us
Copyright 2020 Project Peach