Content Reusability with Presets — Transcript

Transcript of the free Vue.js lesson Content Reusability with Presetswatch the video lesson.

One great thing about using a headless CMS is that it allows you to use your content not just on your website But you can reuse that same content in multiple other places as well like maybe on your mobile app or Any other platform really that you can think of? Because all you have to do is ingest that content via the same story block API that you use for your website So that's pretty cool means you only have to set the content in one place and you can use it everywhere But content reusability comes in a lot of different forms. One way we've already benefited from content reusability in this project is by using the same content to power the feature projects on the home page as the individual pages. Besides reusing content via relationships like this in StoryBlock, we actually have yet another way that StoryBlock gives us to help reuse content, and that's through what's called StoryBlock presets.

A StoryBlock preset is basically a block that's already been filled out with all its content. And you can reuse that same content over and over again, or use it as the default content and change out only what's needed. So let me show you how to actually do that. Inside of the StoryBlock editor over on the right-hand side, I'll choose the block that I want to create a preset for.

For us, let's say the hero. Let's say we want to have different types of heroes throughout our website. Maybe one is like a personal hero, so I'll actually show this same kind of content with, you know, with my face and with hello, I'm Daniel, and in multiple different places on the site. Okay, so to create a preset to automatically fill out these values for me, I come up here to the little ellipsis next to hero, click on that, and then choose open presets.

Right now we haven't created any presets at all in our project. So this panel is is empty Let's click add new preset. The first thing we can do here is give it a name I'll call it my personal hero Because this is the hero setup that we want to use whenever we want to kind of toot our own horn on our portfolio website We could also give it a description here, but it's not required. So I'll just leave it blank Finally, we can provide a preview screenshot to show us exactly what the output will look like when we use this preset.

I'll click to choose an image. And I've already taken a screenshot of the hero on our site. So we'll just upload that. We'll wait for that to upload.

And then I'll come down here and click Add Preset. Nice. Now under Presets, you can see we now have my personal hero. And when we hover over it, we get a little preview of what it actually looks like.

Nice. Alright, so now to put this to use. To save time, I won't actually create any new pages, but let's pretend we want to use this new hero preset on the home page. Here's how you would go about doing that.

Under body here, I'll add a new block to the bottom, and this time when I find hero here, you'll notice that it has a little drop-down icon next to it. When I click that, you can see my personal hero, and yeah, that's exactly what it looks like. So now when I choose that, the hero is added to the bottom of my page, and it's already pre-filled out with all this awesome content. Then I can change it however I'd like here.

Okay? After I hit save, we can scroll down here, and sure enough, we have the hero section down at the bottom. This is just one more way that StoryBlock helps us to reuse our existing content. That way we don't have to go about recreating things that already exist.

One great thing about using a headless CMS is that it allows you to use your content not just on your website But you can reuse that same content in multiple other places as well like maybe on your mobile app or Any other platform really that you can think of? Because all you have to do is ingest that content via the same story block API that you use for your website So that's pretty cool means you only have to set the content in one place and you can use it everywhere But content reusability comes in a lot of different forms. One way we've already benefited from content reusability in this project is by using the same content to power the feature projects on the home page as the individual pages. Besides reusing content via relationships like this in StoryBlock, we actually have yet another way that StoryBlock gives us to help reuse content, and that's through what's called StoryBlock presets.

A StoryBlock preset is basically a block that's already been filled out with all its content. And you can reuse that same content over and over again, or use it as the default content and change out only what's needed. So let me show you how to actually do that. Inside of the StoryBlock editor over on the right-hand side, I'll choose the block that I want to create a preset for.

For us, let's say the hero. Let's say we want to have different types of heroes throughout our website. Maybe one is like a personal hero, so I'll actually show this same kind of content with, you know, with my face and with hello, I'm Daniel, and in multiple different places on the site. Okay, so to create a preset to automatically fill out these values for me, I come up here to the little ellipsis next to hero, click on that, and then choose open presets.

Right now we haven't created any presets at all in our project. So this panel is is empty Let's click add new preset. The first thing we can do here is give it a name I'll call it my personal hero Because this is the hero setup that we want to use whenever we want to kind of toot our own horn on our portfolio website We could also give it a description here, but it's not required. So I'll just leave it blank Finally, we can provide a preview screenshot to show us exactly what the output will look like when we use this preset.

I'll click to choose an image. And I've already taken a screenshot of the hero on our site. So we'll just upload that. We'll wait for that to upload.

And then I'll come down here and click Add Preset. Nice. Now under Presets, you can see we now have my personal hero. And when we hover over it, we get a little preview of what it actually looks like.

Nice. Alright, so now to put this to use. To save time, I won't actually create any new pages, but let's pretend we want to use this new hero preset on the home page. Here's how you would go about doing that.

Under body here, I'll add a new block to the bottom, and this time when I find hero here, you'll notice that it has a little drop-down icon next to it. When I click that, you can see my personal hero, and yeah, that's exactly what it looks like. So now when I choose that, the hero is added to the bottom of my page, and it's already pre-filled out with all this awesome content. Then I can change it however I'd like here.

Okay? After I hit save, we can scroll down here, and sure enough, we have the hero section down at the bottom. This is just one more way that StoryBlock helps us to reuse our existing content. That way we don't have to go about recreating things that already exist.