Transcript

00:00 part three time to get our blog on hey
00:10 everybody Joe workman here and this is part three of our total CMS implementation overview
00:16 video series and in the first two videos we did we took the foundation project
00:24 that we created in the getting started with foundation series okay and we see a mess if I did right
00:30 we made all the text editable images we added a gallery we did a cool feed on
00:36 the about Us page right video so that was nice but the next thing we need to
00:44 do which ships in total CMS 1.2 is new and it's awesome is our new blog now
00:52 we're gonna try to implement an entire blogging system here in this one video from scratch so I'm not gonna dive deep
01:01 into every single blog stack we will have extra detailed videos about each of
01:07 those stacks so make sure you check those videos out if you've watched any of the blog overview videos that we have
01:13 you probably know that the blog essentially is four components okay to
01:20 admin components to content components right on the admin side we have a admin
01:27 list stack that'll lists all your existing blog posts that are inside the
01:33 CMS and then obviously we have the form side which is the form where you can
01:40 create new blog posts edit existing blog posts so on and so forth alright pretty
01:47 straightforward the admin side right we're gonna do that first next is the content side and that is
01:54 essentially two components of that are the blog list okay which lists out all
02:00 your existing blog posts for customers so people can sprows through your blog posts right and filter through them the
02:08 last part on the content side is the actual blog post Paige so when someone clicks on your
02:15 listing and your blogpost list it'll take you to the individual page that is
02:20 for that blog post right so without
02:26 further ado let's jump into the same project that we've been working on and we're gonna add in the admin stuff right
02:33 now so here we are inside the rapid uber project that we've been working on in the past couple of videos now if you
02:40 notice I've already pre kind of prepared this file for the new pages that we're
02:46 gonna have to add for blog let's review what those are right now so first I've
02:51 added a new page to my menu called blog and what this blog page is going to
02:56 contain is the blog listing so all of the listings of all of our blog posts so
03:02 that people can peruse through our blog posts click on them and ultimately take them to the individual blog post page
03:09 which here I have set up as a sub page to the blog okay now if you notice I
03:16 just created duplicates of these pages and the main blog page does have a couple CMS attributes like we did on
03:22 other pages so we have a page title specific to this blog page as well as a sub title next if we go down to our
03:29 admin portal if you remember we created tabs for each page that we have in our
03:35 site so what I've done is I've simply added a new tab to the tab stack and I've indicated that is for the blog page
03:43 if we scroll down to the content of that tab number five you'll see that we have
03:48 various CMS settings similar to the other pages that we had already set up for header so page title and subtitle
03:54 okay now below that you'll notice some new specific stacks for blog first we have
04:02 blog list now if we look at the settings for the blog list stack you'll see that
04:07 the CMS ID is set to be blog right now now if you recall in video 1 we uploaded
04:13 some sample CMS data to our web server and if you use the CMS idea of blog for
04:19 a blog you actually get a lot of great sample data to use without having to
04:24 create any of your own blog posts the next two important settings inside the blog list
04:29 stack is the edit form page and the post view page the Edit form page needs to be
04:39 set to the actual blog form page in this instance it's going to be the new post
04:45 page which we haven't seen yet but we'll look at shortly and what you'll notice is once I set that setting a Red Alert
04:53 has gone away a warning has gone away inside the blog list stack because that
04:58 really is required in order to edit your blog post by clicking on them in the admin area next is our post view page
05:06 and if we click on that this is going to be the actual page where blog posts are viewed by our visitors so here it's
05:14 going to be the blog post page that we saw earlier now above the blog list stack I just added a simple button that
05:22 says new blog post now this is just a normal button stack it's not necessarily
05:27 a seam a specific stack but what I want to use this button for is to link to the
05:33 new blog post forum page this way there's a nice clean button where
05:39 Keyser's can click on it and they know that that's going to take them to the new blog post page to actually create a
05:45 new blog post the next step in the blog admin interface is to create the new
05:51 post page now I had already created this page earlier so that I can easily link to it inside my blog list stack and
05:59 essentially what this page is going to be it's gonna be a dedicated web page for our blog form stacks now under total
06:09 Simas admin you can drag out the blog form stack and what you'll see is that
06:14 we now have a child of stack interface where you can add as many fields as you
06:20 want for your blog form now the one field that is required inside the form
06:26 is the blog permalink the blog permalink is the unique identifier for each individual blog post
06:35 let's go ahead and build out this form a little bit we can do that very soon by clicking on the plus button and
06:40 selecting the stack that we want to add for example this is the form field for
06:48 the blog title and I can add the summary and then I can add content ok now what's
06:58 great about the blog form stack is that you're not limited to just the form fields that we saw inside the child of
07:05 interface as you see here I've added a two column stack to actually make my
07:11 form fill two columns and then over here I have another two column stack which
07:17 controls the draft and featured toggles for this blog post now what you'll
07:23 notice at the bottom is I have a save and a delete button when you add a blog
07:29 button and set it to be a delete button that delete button will only be shown when you're actually editing an existing
07:36 blog post instead of just creating a new one now if we look at the settings for
07:42 the main blog formstack you'll see that we've set our CMS ID to be blog because this is the CMAs ID for
07:49 our blog next is the post view page and you're gonna want to set this to be the
07:57 URL or link it to the page for the actual blog post page the page where
08:04 your blog posts will be viewed by your end-users this is important because this
08:10 page is used to display RSS feeds to
08:15 configure sitemap files right this is a very important setting if you want a lot
08:22 of the extras inside your blog to function properly so if we preview this
08:28 page we'll see that we have a nice simple clean form to submit new and edit
08:34 existing blog posts and if we head over to our main admin portal for this site
08:39 and go to the blog tab you'll see that we have a nice way to view and edit
08:45 existing blog posts directly here in rapidweaver so as you see configuring the admin
08:52 interface for a blog it's pretty straightforward and simple we have the blog admin list
08:57 stack that lists out you know all of the existing blog posts that we have in our CMS and there's a few important settings
09:05 there right obviously CMS ID that's important for every you know CMS stack okay
09:10 but those linkages right those are very important for everything to work properly we need to link to the blog
09:17 form page like the Edit form page and then also the blog post view page now on
09:25 the form side okay I I really breezed right through and you know I kind of
09:31 automated a lot of the steps in terms of now in terms of the blog form page you
09:38 see that you can really easily add all of the form fields and then use other stacks to enhance that form right
09:45 whether that be column stacks or you know some other organizational or layout stacks maybe you want to add some
09:52 headers or descriptions so your clients can actually easily know exactly what
09:57 they're supposed to put inside each field now again I glanced over some of
10:04 the settings I didn't go into depth on everything so make sure you check out our more detailed videos on each you
10:11 know blog and CMS stack if you want a more in-depth review of all the settings
10:16 for those stacks so now that we've set up our admin interface okay we can add
10:23 new blog posts we can view existing ones we can edit existing ones okay let's go
10:30 ahead and look at the content side of blog okay I've already created a couple of those
10:36 pages right the blog page and the blog post page okay I created those beforehand just so that it was simple to
10:43 link to them in the admin interface so let's jump in and we're going to
10:49 configure those two content pages that we saw for blog lists and blog post content so here we are on the main blog
10:57 page that we see inside the menu right so this is going to be the page that contains the listing of all of our blog
11:06 posts for our customers so what we're gonna do is there is the blog list
11:12 content stack you'll notice a red warning right away saying that we need
11:18 to make sure that we actually link the blog list stack to the blog post page right this is so that when people click
11:26 on your blog post it knows where to take them to right so if we look at the
11:32 settings for blog list will see that the CMS ID and again we want to set the CMS ID here to be blog because that's the
11:39 CMS ID of the sample day that we've loaded into our project on the post view
11:45 page I'm going to go ahead and select the blog post page again this is the
11:51 page that will contain all the details for each blog post we haven't created we
11:56 haven't created all the content on that page yet but we need to create that link so that it all works later on now before
12:05 we dive into some settings for the blog list stack you'll notice that this is
12:10 similar to the blog forum stack and that it is a child of stack now essentially
12:16 what we're going to be doing in the blog list stack is going to be building a layout for a single blog post now unlike
12:26 the blog forum stack that we saw earlier we are not allowed to add any external
12:32 stacks into this the blog list stack is limited to just these blog list stacks
12:38 now I've created a generic layout utility stack in here and this allows us
12:44 to do things like you know adding columns and up to a two column and you know interface inside of our blog list
12:51 let's say for instance I wanted to create a layout that had two columns where the image was on the left and then
12:58 some of the blog post content was on the right I could easily add a layout a two column
13:05 layout and then add an image and add the image over here and then I can add a
13:12 title and drag the title over here I can then add the summary and
13:18 then add the summary below the title okay and then add maybe a read more
13:24 button okay and add that below the summary so again the blog list is
13:32 creating a layout for what one blog post will look like and then the that layout
13:41 will be applied to each blog post that is viewed on the page and if we preview
13:46 this again you'll see that this is really starting to look like a lot of the traditional blog post layouts that
13:53 we see out there on the web now another thing that is common in blogs on the web
13:59 is that they'll have a sidebar that contains maybe a search box and some you know predefined filters maybe a list of
14:06 categories or tags that you can click on to help filter your lists of blog posts
14:11 out we can do that with total blog as well so what I'm going to do here is I'm
14:17 going to add a two column stack and then let's go ahead and add the blog list
14:25 over here let's adjust the split of this a little bit and then what we're gonna want to do is we're gonna add a blog
14:32 filter stack into this sidebar here and
14:37 the blog filter stack we have many things that we can add first let's say let's say we wanted to add a blog search
14:45 bar this adds a search bar and obviously when we have a search we want to be able to submit that search so we're going to
14:51 go ahead and add a blog button as well if we go into the settings we want that
14:57 to be let's say it's go make that a tiny button align right and let's make it
15:06 secondary little less in-your-face so it's preview our page as you see now
15:12 we have a nice search box where we can search our blog and click the Go button
15:18 or hit the enter key and it will automatically submit that search for us
15:23 now in order for the search to work inside the blog filter stack you're
15:29 going to want to make sure that you set the blog list you so this basically defines the blog page
15:36 that the filter results will be displayed on if you leave that as blank
15:41 it will use the current page that you're on however I do suggest that you even if
15:46 you're using the current page just go ahead and set that on inside that setting now if we add another blog
15:53 filter stack on there let's look at some of the other great options that we have available if I click on plus let's go
15:59 and look at blog links okay now blog links it's a great way if I click on
16:06 this and let's say let's show all categories okay we need to go into the blog select stack
16:12 change our CMS ID to be blog and then set our blog list URL just as we did in
16:18 the search stack okay and there we go so you set the CMS ID to be blog you set
16:25 the blog list URL to be blog as well or to the page that contains your blog lists and this particular filter stack
16:31 is now going to display all of the categories as links for this blog there
16:39 we go we have our search box and then we have a nice convenient list of all of the categories in this blog that I can then
16:45 click and this blog list will be dynamically filtered to only display the
16:51 blog posts that are within that category so we have taking it a little bit farther and I've added a categories
16:58 header and then I've also added the count for each category as well and then
17:04 I also added tags below so you can see all the tags that are for every single blog posts how many blog posts are
17:10 related to those tags so that you know that when you click on that how many blog posts are you supposed to be able
17:16 to see now I'm really happy with how this blog list page has turned out let's
17:21 go ahead and start configuring the blog post page so that when users click on our individual blog posts
17:28 inside the list it takes us to the full detail page so now we're coming down the
17:34 final stretch this is the last blog related page that we need to add to our
17:39 site and this is the blog post page the dedicated page where we will view all
17:45 the tails for our blog posts when they're clicked on a blog list somewhere
17:50 throughout our site so obviously what we're gonna do is there is a blog post stack inside the total CMS content area
17:58 if we add that to the page you will notice a very similar interface to the
18:04 last couple blog stacks that we've interfaced with we have a child of interface where you can add all of the
18:10 various fields for a blog post now just
18:16 like the blog post form on the admin side you can use any stack that you want
18:22 inside the blog post stack to help with your layout and visual appeal of your
18:29 blog posts and just like any of these child of interfaces you simply select
18:35 the stack that you want to add and it will add that stack inside the blog post and then you can move that stack around
18:41 to where you want it to be inside that particular layout now you will also
18:46 notice a child of stack called blog post macro hints now earlier on on in this
18:54 video series we looked at CMS core and all of the text macros that are
19:00 available there blog post pages have access to another set of macros that are
19:06 specific to the blog post page this allows us to integrate our blog content
19:14 within our rapidweaver sites and pages and third-party stacks so I've gone
19:21 ahead and created a sample layout it's pretty basic up at the top I have a blog
19:27 post image then have a one column stack that allows me to add a little bit of padding I have the blog post date that's
19:33 aligned to the right the title the author and then if you notice here I'm
19:39 using my columnist stack the columnist stack allows us to break up large
19:45 amounts of text into textual columns and then in order to integrate into the
19:51 columnist stack I'm actually using one of the macros for the blog content
19:59 then below the main blog content area I also have the blog post gallery which
20:06 will be a gallery of all the images that are added into this blog post then below
20:12 that I've added a list of the categories that this blog post is associated with
20:17 as well as tags now inside the blog post stack obviously there are some important
20:25 settings here the CMS ID is obviously blog because that is the idea of our blog and this is going to be using the
20:32 sample data that we used earlier which uses the CMS ID of blog okay
20:38 now the preview post setting this needs to be the permalink of a blog post that
20:47 exists on your blog server now the sample blog data that we used has a blog
20:54 post with a permalink of San Francisco now this preview post is only used
21:00 inside rapidweaver and it allows us to preview that particular post on the page
21:07 this makes it easier to format and you know determine layouts for our blog
21:12 posts if we actually have live data from an actual blog post on our system now
21:20 below this is where we can actually add social meta tags to our blog post pages
21:27 so the when we use the description tag that will insert the blog post summary
21:33 it has the description meta tag okay Facebook Open Graph tags will be added
21:39 using the blog post title the description or the summary of the blog post as well as taking one of the images
21:48 from the blog post gallery and using that as the social share image and the
21:53 same thing for Twitter and Google+ so if we preview our blog post page we'll see
21:59 that we have a nice beautiful kind of banner image from one of the images that was added to the blog post gallery we
22:06 have our nice blog content that has been added to the columnist stack and further
22:12 down we have full-blown gallery for all of the images that were added to that blog post then
22:19 we have a link to the categories and tags that were associated with this blog post as well now another common thing
22:27 that blogs tend to do is on the blog post page they have the ability to show related posts so let's give that a shot
22:34 I didn't go ahead and add a small divider between that call that maybe
22:45 then we're gonna add a blog list stack below that now obviously we need to set
22:52 this Simas ID and our blog list stack to be blog and then our post view page is
22:58 going to be the URL to the blog view page which is technically the page were on at this moment and that warning goes
23:06 away now we need to build out the layout that we want and I want it I want this to be relatively simple and I think all
23:12 we're gonna do is we're gonna do an image and then below that image we're just gonna do the title and that's it I
23:19 think that's all that we want now I want to change a little bit the defaults from the blog list stack now with the display
23:27 count I only want to display a few blog posts at most so I'm gonna set this to be three four and really I just I'm
23:36 gonna shuffle actually because I just want it to be a random three posts that are related I don't necessarily need it
23:42 to be any order if you always wanted to ensure that you got the three latest posts you could you could definitely do
23:49 that I think it'd be fun just to set that to be shuffle on date we only want
23:54 to display past posts featured let's display with posts high drafts and let's
24:02 this is where we define where we want the things to be related on in this case I'm gonna set the related to be by
24:08 author so I'm going to check filter by author and then related author from post
24:14 this checkbox is critical and if this checkbox only works if you're on a blog
24:19 post page because it will get related posts from the post that's on this page
24:25 so in this example we're going to be displaying related blog posts from the same author
24:32 as this blog post you can do it you can do it with category and with tags as well okay um now instead of the list
24:40 layout I actually want to go to a cards layout so that we have three cards and
24:47 I'm kind of envisioning maybe three blog posts in cards okay side side by side
24:53 with each other so that's exactly what the cards layout will do for us now I've gone ahead and tweaked some of the
24:59 layout settings just so that everything matches up properly and let's go ahead and preview this so here we have our
25:07 nice blog post as we saw earlier and if we scroll down to the bottom we'll see that we now have related blog posts that
25:14 we can then click and it would take us to that particular blog post and view
25:19 its details so this is a great way to allow your users to see other blog posts
25:26 that you have available for them to read and if you do relate a post based on tags or categories this allows users to
25:33 see exactly potentially the category of blog posts that they want to be interested in now before we leave I
25:41 wanted to add one more thing to our home page because I thought it would be interesting to show the latest three
25:47 blog posts that we have directly on the home page so as you see here's another
25:52 layout that we can do with the blog list stack this just shows you the
25:57 flexibility that the blog list stack has now you have countless ways to display
26:03 your blog posts here's another one of my favorite layouts for the card view if
26:09 you notice what it does here is not only does it display images but if a blog post has enough images it will display
26:16 multiple thumbnails for each image inside that blog post we then have
26:22 equalized heights on the cards as well as read more buttons that are fixed
26:28 directly to the bottom this is just a really clean and elegant layout for your
26:33 blog posts okay so whoa we just took time and we implemented and
26:38 higher blog with customized content everywhere custom layouts in under 20
26:46 minutes that's pretty awesome right I hope you see the power of blog right it
26:53 is really powerful especially in the hands of total CMS with all of the other
26:59 things that it could do now hopefully you were able to follow this I could have split this up into two
27:04 videos but I thought I'd just chug it all out and get blog done all in one video so I hope that you love total CMS
27:13 and the blog and really see the power of it you can have multiple blogs per page
27:18 or sorry multiple blogs per site right so really if you start thinking out of
27:24 the box that you could do so much with blog and inside its really simple to set
27:30 up with blog that you do have to be careful there's a lankan to things right so you have to make sure you set your CMS ID and you set the linking
27:37 especially like for the filters set the link to be the blog list stack and you have to whenever you have a blog list
27:44 stack you have to link that to the blog post page right because all these components need to talk with each other
27:50 and that is how the talking is done right it's via linking those pages
27:55 together so those are very important that you make sure that those link
28:01 settings are set or else things probably won't work properly in your blog um use
28:08 the demo data that we supply you it has some great blog posts in there has I
28:15 think a different blog post with many categories and many tags and different authors already set up for you
28:22 so you don't need to worry about entering in tons of data just simply
28:28 throw that sample data on your server and start playing with it now right
28:34 start playing with the layouts that you can do and all the possibilities there there's so many possibilities with that
28:40 blog list stack so you're gonna want to make sure that you check out the detailed video on that especially if you
28:46 want to learn all the ins and outs and the intricate settings that some of those have
28:53 I don't want to take up much of your time I hope you love blog and total CMS
28:58 it really is revolutionary and it's really gonna take your websites to the entirely new level because you can
29:06 design things in rapidweaver and then manage all the content and add new
29:11 content online without ever needing to interact with rapid error this is
29:16 perfect for for you on the go for your clients and your customers of your designing websites for others I mean it
29:23 really is an invaluable tool so I hope you've enjoyed this series on total CMS
29:30 and how we've kind of taken that project from nothing right in the foundation
29:36 getting started series we did three videos there and then we did three more videos here taking that same project and
29:44 we now have full online editing capabilities of it on top of that we've
29:49 added a blog right pretty mind-boggling what we've done in just six videos right
29:56 so thank you very much enjoy total CMS and have a wonderful day
30:10 you"}]