In this training, we’re going to tackle creating a blog post template in oxygen. Our goal for this template is simple. We wanted to be as accessible as possible. We wanted to have a really good HTML5 structure. We wanted to be SEO friendly, so we want the headline above the fold. We want to use a real featured image instead of a background image. And we wanted to be dynamic in the sense that we can have an auto-generated table of contents. We have our Gutenberg body content so that we’re not using the oxygen builder for every single blog post. At the footer, we’re going to have an author card. And then we may want to have a related post section as well. Now, this is one example of a blog post template. There’s many, many different ways you can design a blog post template. But by following this tutorial, you’re going to learn best practices. And then what I would recommend is if you want a different looking template, take these best practices and build on them or iterate on this actual layout and design to create your own thing. Like I said, there’s many, many different styles of blog post templates. So it all comes down to exactly what you’re looking for or needing to build for your specific site. But the underlying best practices are not going to change. All right. So let’s go ahead and dive in and get started. All right. So I’m going to go to oxygen templates. And I’ve already, well, before we do that, let’s just look at the post section.
It’s very important that you have, because I’ve noticed a little bug in oxygen that if you don’t have any blog posts and you create a blog post template and assign it to post. And then you add blog posts later, it can’t seem to find them in the builder in the preview. And it does still assign it properly. But you can’t preview what you’re doing in the template anymore. At least I’ve had this happen, you know, a couple different times. So what I recommend is put some blog posts in there. As you can see, I just have dummy content. I used fake or press to just drop some in here. They all have featured images. And now we’re ready to go. So once you actually have some blog post content, then you’re safe to create a template. So I’m going to go to oxygen and templates. I’m going to hit add new template. Now with blog templates, there’s not just one template. There’s going to be a template for your single posts. That’s what we’re going to build in this tutorial. There’s also going to be an archive template for your posts. There’s also going to be an archive template for your categories. There’s going to be a search results template. All of these things are related to the blog, right? So how we name these templates is actually kind of important. I typically start with blog and I put a colon and then I put exactly what it is a template for. So this is the single post. When I do a blog category template, it’ll say blog colon category.
When I do a search results, it’ll say blog colon search results. And so all of them are organized with this naming convention. Next thing I’m going to do is I’m going to assign my main template. We have a primary to main just to refresh your memory. Primary has our navigation in our footer. Main has our HTML5 main tag, but the main inherits the primary. So if you want your template that you’re working on to have the primary header and footer and the HTML5 main tag, then you use the main template, right? If you don’t want the main tag because you’re going to put the main tag somewhere else in a template, you use the primary template. But in this case, we do want everything wrapped in the main. All right? So I’m going to choose main. Under singular, I’m going to assign this template to all posts. So any posts are going to inherit this template automatically. And then I’m going to go ahead and hit publish here. All right, while that’s doing that, let me just check my recording. Make sure we’re all good with sound and audio. Okay, good. So I am going to edit this with oxygen. Okay, the first thing that we need to do is talk about the HTML5 structure of this article template. So I already have a main tag because I’ve used my main template. I’m going to open the structure panel here. And before I add anything else, I need to add a blank div because we actually need yet another wrapper. So I’m going to add a div. And this div over here under tag, I’m going to give it the tag of article. Now, I’ve talked about the article tag a little bit in the past. You can use article tags in a lot of different ways. For example, a blog post card, it can get the article tag. A service card can get the article tag. A product card can get the article tag. Why are all of these things considered to be articles? An article in HTML5 is a piece of content that can actually live outside of the context of the current section or site that it’s on or page that it’s on. I believe it came from the initial use of an article like a blog article because a blog article can obviously live off of the website that it’s published on. It can live anywhere and be relevant to people. A product card or product could actually technically probably do the same in a service, etc. So they all get the article tag. But we are creating a blog post template, an article, so to speak, and this absolutely could live off of this website.
So it gets the article tag as well. And the way that we do this is we create a blank div as a wrapper. And we just simply give it the article tag. Now I’m also going to give everything that we’re doing here, custom classes using the BIM naming convention to make sure that everything is as organized as possible. You could make the argument that hey, we’re doing this work in a template. The template is the single source of truth for these items. Therefore, we could potentially do this all at the ID level because we have a single source of truth to edit the styling for these things. But my argument would be it’s just get in the habit of creating custom classes and organizing it. Plus when we have to write a little custom CSS much much much easier to target custom classes than it is to target IDs that have no relevant names or anything like that. And it’s just not good practice to do stuff at the ID level. So I would say this, make custom classes for everything. Get in the habit of doing that. You’ll never go wrong with that method. Okay. All right. So what I’m going to do is I’m going to say that this is the article blog article wrapper. Blog article wrapper. It’s not just going to be an article wrapper because like I mentioned lots of things can be articles. So this is the blog article wrapper. All right. So we’re going to do that. And I’m going to also make sure that this width is 100% because even though it appears to be 100% in the builder already, I’ve run into issues in the past where on the front end it shrinks everything down. It cuts everything off. So just make this 100% and we can avoid some issues there. All right. So I’m going to also label this over here so that we can see that in the structure panel because everything else that we add related to the actual article needs to go inside of that div not below it. So the next thing I’m going to do is add three sections. There’s section one section two by duplicating and section three. These are a note in the structure panel. These are inside of the article div. I’m going to rename this first section header. I’m going to rename this bottom section footer and I’m going to rename this middle section body. Now I’m also going to give and this is really it’s a header but it’s also a hero. So I’m going to do that header hero. And these are just for internal naming for you know organization purposes. It doesn’t really matter but I am going to come over here to the tags and give these HTML5 tags. So this one right here we’re getting a little bug action there. I is header. I’m giving it the header tag and then over here on footer I am giving this the footer tag and you might say hold on Kevin I’m confused your site already has a header and it has a footer. Why are we doing another header in a footer? Because an article is a self-contained piece of content. Therefore it can have its own header and its own footer. And this is a good thing to just help crawlers and screen readers understand the structure of the page. So they know that hey here’s an article but you know different parts of this article are for different purposes. The header appears for the hero where the h1 tag is and the featured image the body section which is literally just a section is going to have the body content. And then there’s also going to be a footer which is going to have our author bio. Okay so we have that structure down. The next thing that we need to do is outside of this article we are going to add another section and let me actually drag it out here. Sometimes it has trouble going on its own. Okay there you go. And that’s probably going to be where we’re going to put our related posts. Okay so this is going to be related posts. Okay so we’ll get to there when we get there. Why is that div looking a little whacked out on me? Doesn’t look like all the others. I didn’t add. Oh hold on hang on. All right repeat it. Oh because it’s got it’s randomly got a repeater in it somehow. All right so I’m going to hit, I don’t remember adding that. All right so I’m going to go ahead and hit save. Now before we’re technically finished with this part of the tutorial we do have to give everything a custom class. So I’m going to click on the hero section here and we’re going to call this blog hero. I’m going to click on body. That’s going to be called blog body. I’m going to click on the footer. That’s going to be called blog footer.
And then I’m going to click on the blog related posts. That’s going to be called blog related posts just like that. Okay I will hit save and now we’re ready to move on. So for the hero there’s actually this is going to be one of the most technical parts of the tutorial and there’s a lot of problems that we have to solve as we build this and think about as we build this. First things first we need to have a real image up here not a background image. So automatically this is going to create a little bit of complication. We’re going to need some absolutely positioned elements. We’re going to need to think about section overflow and what happens if content in this section gets bigger can we control the section with height should we control it with padding. There’s actually some different approaches that we could take. You know you could build a section like this two or three different ways and all of them can be right. Some of them may have pros versus cons but they could all technically be right. We’re just going to tackle a version of it and see what we get and if we run into any problems we’ll address those as they come up and I’ll tell you what pitfalls to look out for as we do this. So I like to use a section here because I like the default padding. It makes us have to do less work overall I think and so we could just start by adding the image. We know that we’re going to need a featured image up here and so I’m going to call this blog hero double underscore featured image because the featured image is part of this hero section. It’s an element in the hero section so I’m going to go ahead and do blog hero featured image and I’m just going to straight away because I actually want to see a real image here. I’m going to dynamically pull in the featured image of the blog post that we are previewing. I’m going to make sure that this is the large size and there you go. So we see the featured image that we’ve pulled in. That’s the featured image associated with this blog post right here that you see in the preview tab.
You can preview any of the blog posts that are available and this is what I said will bug out and not populate properly if you add the template before you add blog posts. Sometimes maybe it’s not every time but definitely for me it’s happened on occasion. Okay so I’ve given it a class of blog hero featured image. What we need is text to be able to sit on top of this effectively but we also need this image to grow as the section grows which means that the section actually needs to dictate the height. Right now because I just added an image in here the image is dictating the height of the section because it’s a physical component right. So if I made this height like a thousand rim it’s going to dictate the height of the section like the section is going to get as tall as the image gets and we don’t want that to happen. We want all of our hero sections to be pretty much the same height so that all of our articles look very consistent and if for example a client uploaded a crazy aspect ratio photo like a tall photo or a square photo it doesn’t blow out our hero section right. We want the image to adapt to the section it’s in we don’t want the section to adapt to the image that’s placed there. Alright so in order to do that what we’re going to want to do is we’re going to make the image position absolute. We’re going to take it out of the flow of the document and just say hey you you don’t dictate anything you just live here right.