Now that we've got things hooked up, let's take a look at the project that we're actually trying to build. Here on the screen I'm using a program called Balsamiq to just give you a quick little mock-up of the portfolio website that I want to create. The site will include a hero section with a headline and a sub headline along with an image over on the right hand side. And then underneath that we'll have some featured projects so that somebody can come to our site and see what we've worked on.
And if they click on one of these featured projects, it would take them over to a page that looks something like this. A page dedicated to each project with the project title, an image for the project, and then maybe just a little description for it. As of now, we don't have this kind of structure for our content set up in StoryBlock. Instead, what we have is the teaser and the grid.
These are known as blocks in Storyblock. Essentially, they're used to create different blocks of content that we can kind of mix and match in order to create our stories. Kind of fancy, right? We create our stories with blocks, hence we use Storyblock.
Anyways, we don't have a hero block currently defined that has fields like headline, subheadline, and image. So let's create one of those now. I'll click this arrow up in the top left hand corner to get back to StoryBlock's main menu. Then I'll navigate to the block library on the left hand side.
To create our new hero block, I'll click plus new block, and for now we'll just stick with nested block. Don't worry though about the other two, we'll discuss them a little bit more later. But a nested block is absolutely perfect for Hero. Oh, and of course we should give our block a name as well.
So I think Hero would be perfect. Okay, we'll click Add Block. And now we're able to add the particular fields that we want to make up this block. Remember I said we want a heading.
Okay, and we can add that. A subheading. And add that. And lastly an image.
And we can add that. Now down here you can see that all of our fields are currently registered as text fields and that's great for heading and subheading But for image we want this to be a different type of field, right? We want it to be an image field. So I'll click on it and under field type here just choose Let's see.
What are we looking for? We're looking for asset. Okay, so this is basically any kind of file asset In order to limit this to only images, I'll scroll down and choose images from the fall types here. Next we can save, go back to our fields, and with that we are done with our hero block.
Back on our home page now, let's add our hero block and remove the boilerplate blocks that are already there. Lastly, let's go ahead and fill out the hero's content. The heading will be the same as it was in the mock-up. I'll say, hello, I'm Daniel.
Notice on the left-hand side, we're still getting that awesome automatic real-time update. My subheading will be, I don't remember what it was in the mock-up, but I'll just say, view school instructor. And then we can add an image. I'll look for one of my headshots on my desktop.
Oh, cool. There's one in Delmas. Perfect. Notice over on the left hand side now we have our heading our subheading and then even our image with a URL here file name is called so that we can display that image on our web page alright in this lesson you learned what a block is and story block and How to create your own custom blocks in order to model your content for displaying on the page in the next lesson we'll use a story block component from the Nux module in order to actually display the hero on the page as you'd like to see it on the site.
Now that we've got things hooked up, let's take a look at the project that we're actually trying to build. Here on the screen I'm using a program called Balsamiq to just give you a quick little mock-up of the portfolio website that I want to create. The site will include a hero section with a headline and a sub headline along with an image over on the right hand side. And then underneath that we'll have some featured projects so that somebody can come to our site and see what we've worked on.
And if they click on one of these featured projects, it would take them over to a page that looks something like this. A page dedicated to each project with the project title, an image for the project, and then maybe just a little description for it. As of now, we don't have this kind of structure for our content set up in StoryBlock. Instead, what we have is the teaser and the grid.
These are known as blocks in Storyblock. Essentially, they're used to create different blocks of content that we can kind of mix and match in order to create our stories. Kind of fancy, right? We create our stories with blocks, hence we use Storyblock.
Anyways, we don't have a hero block currently defined that has fields like headline, subheadline, and image. So let's create one of those now. I'll click this arrow up in the top left hand corner to get back to StoryBlock's main menu. Then I'll navigate to the block library on the left hand side.
To create our new hero block, I'll click plus new block, and for now we'll just stick with nested block. Don't worry though about the other two, we'll discuss them a little bit more later. But a nested block is absolutely perfect for Hero. Oh, and of course we should give our block a name as well.
So I think Hero would be perfect. Okay, we'll click Add Block. And now we're able to add the particular fields that we want to make up this block. Remember I said we want a heading.
Okay, and we can add that. A subheading. And add that. And lastly an image.
And we can add that. Now down here you can see that all of our fields are currently registered as text fields and that's great for heading and subheading But for image we want this to be a different type of field, right? We want it to be an image field. So I'll click on it and under field type here just choose Let's see.
What are we looking for? We're looking for asset. Okay, so this is basically any kind of file asset In order to limit this to only images, I'll scroll down and choose images from the fall types here. Next we can save, go back to our fields, and with that we are done with our hero block.
Back on our home page now, let's add our hero block and remove the boilerplate blocks that are already there. Lastly, let's go ahead and fill out the hero's content. The heading will be the same as it was in the mock-up. I'll say, hello, I'm Daniel.
Notice on the left-hand side, we're still getting that awesome automatic real-time update. My subheading will be, I don't remember what it was in the mock-up, but I'll just say, view school instructor. And then we can add an image. I'll look for one of my headshots on my desktop.
Oh, cool. There's one in Delmas. Perfect. Notice over on the left hand side now we have our heading our subheading and then even our image with a URL here file name is called so that we can display that image on our web page alright in this lesson you learned what a block is and story block and How to create your own custom blocks in order to model your content for displaying on the page in the next lesson we'll use a story block component from the Nux module in order to actually display the hero on the page as you'd like to see it on the site.