hi and welcome to this little webcast my name is Ellen train and I have a small company called Co dot where I do observe freelancing last week I gave a talk a couple of Vincent and Mark showcasing how I'm actually using Ibiza regime s and a lot of different add-ons and sign patents you can call it on my website and I'm going to record it now so you guys have a chance to see this one this is the last half of October of 2018 so first of all a little bit about me I've worked at observer the company for more than ten years I've been doing research development prototyping training developers help startup episo-- USA worked in Deeb's or Prague management and a bunch of other things this September I decided to start stop adipocere and start freelancing instead so that's what I did I found it coded as my company and I developed its resolutions add-ons and integrations I also really enjoy being out with clients going through ideas of what could be done sharing vision workshops and Driggs and rapid prototyping or five years I do tech blogging on coda at dks1 so let's call my talk here add-ons in real life and I'm looking at my own situation working at co-taught now the main purpose of my side core art is basically to have a tech block and of course to showcase my skills my Shelton's to my customers or potential clients so there's a bunch of challenges using it as a blogging platform and I've adapted and you could say pimp my way out of that with tweaking EB server and to do exactly what I want let's just jump right in and do a demo here by the way afterward the video you should be able to download my slides that I'll put out for down or this one and I've made slides with screenshots of every step of the way as well as URL so you get an idea about what I'm using and how you can use it as well yeah we have my side as it looks today go dot the DK and basically you'll see that there's a blogging section and then and there we have navigation between the blocks and so on if I go into the bag in here you'll see that I structured my blocks in a way that makes sense to me which is I've put them in a structure with the block here being the route then there's a nice s feed for the blocks and then they are ordered by year and month and below that we have the actual blog posts as well as work in progress blog posts so that's all fine and well the thing is I'm a bit lazy and whenever I create a new blog post I don't want to create it you know make sure that I have the right year the right month and that everything is set up so I've added some code in order to make sure that I can just go and say new from up here on the block create a blog post and then automatically have it placed the right place that's a little bit of code that I've actually written a blog post about it's a common design pattern and exactly how it's done you can read in the blog post called automatic blog hierarchy and where you can see the structure and you get a bit of code symbols as well now while we're in this view where we can actually start to look at how you create stuff I was at the main blog page which is a list page type now there's nothing below that page except other list pages which is the structure and on ISS page but still time suggests that the blog post page type which is good because that's one one but why is that well that's because I've tweaked a bit over just a little bit I will just jump right in here in Edmund mode you'll see that I've added a little add-on I've built myself called suggested types manager and in there I've actually specified some rules like for instance in this case where I am on the very specific page block you should always suggest a blog post page type similarly I've also specified the when I'm on a blog post page and I'm working in the content folder meaning the folder for this page it's just the most common blocks that are usually my blog posts code blog : bed blog and quote block so this is little admin UI to just make sure that you you can decide what's actually being suggested if you have a lot of blog types a lot of page types this just makes it a little bit easier for the editors to pick the right one at the right time of course that's also described in a in a blog post which is here called admin mode plugins manage content such suggestions with all the examples you could want for that anyway I've set this up so that's why I get the blog post suggested here now while we're at this screen there's something else you want to notice which is all the nice icons that I'm here for the different type of page types I have I have the same four blog site as well now this is an publicly available community contributed add-on from Gaza knowing that made a really nice tool where you can just as developer at one line of code and then you can use all of the fun awesome icons to make a nice preview here I've seen so many installations where you just get the white puck for the crossover because nobody really bothers going out getting a right thumbnail or whatever you want to showcase the page type so it's a nice easy way to get around that by just picking the right font from the right icon from font awesome what you can do at font awesome comma I believe and then just adding that was one line of code so makes it easy for developers to make a nice usually experience for the editors I really like that one so let's move on and just create the blog post here let's call it the demo blog post I'm always bad at finding good namings for situations such as this one hit okay and we have our blog post created now of course you'll notice that whoa it's under October 2018 which is really cool it automatically put it there even though I started up on the block here great so we have a blog posts and that's all fine and well we could start using the blog post and the thing I am working on here now I'm kind of stupid being an editor I don't have that much experience and I have actually gone with the approach that I have the right to publish as an editor I know I shouldn't the right approach is of course to only have edit rights when you're editing and then have somebody else to review and go for approval flow and approve your changes it doesn't work like that for me because I'm just me and accidently when I've been out with a bush or customers it looks like you know 90% of the editors does he actually have published why it's so probably I'm not I'm not alone in this in a way the problem is that once you can publish you can also do damage and I have a lot of unfinished blog posts lying around as you can see I kind of start writing them and then I have them unpublished until they're done and then I hit publish but if you start writing a blog post and you start adding blocks and you published individual blogs as you make them then it's very easy to come back to the main page and just accidentally hit publish just like you want to hit save it's coming your finger so my solution for this is this one whoop published luck and safety is on now if I go and I try to hit publish I won't be able to because safety is on this is not released yet this is the work in progress ideally the publish button should be completely grayed out but it's it's a nice little feature that come out make sure that I don't mess up too much you should probably think of it a bit like this one the little plastic cover on top of the missile launch button it's a nice approach for it really make sure you can't just accidentally do a whoopsie oops publish it's working progress and it will come out as soon as I have it ready another thing you can notice here is that this is a new blog post but still this content area here in the sidebar and the one below actually have content in them already and why is that if I click on it you'll see that it's actually empty the reason is that I've set up some kind of property inheritance those that of work to be sure of a long time might remember dynamic promises I try to achieve the same thing by living developers in this case myself configure was an attribute for every single property if it should be inherited from the parent now in this case I've actually put it through multiple levels of inheritance so if this one is empty and not said it should inherit from first we'll try the parent then I'll try the parent and then it'll try this parent and this parent here there's actually specific property in this case configured to inherit from the one called default child child sidebar this way I have one place to manage what's in all my blog posts sidebars and Liz I specified on the individual blog posts which I could also do of course just by adding stuff to it that would override everything so going back to my demo blog post here this is how the content has gotten in there one more thing to notice here is how I take my content you can see I have a bunch of available topics here these are the text that I use for my content and the way they work is basically that their pages now I could use episode categories of course I could the problem with the old episode categories is that they haven't really changed since observer version three or four they're managed in the admin mode they can't really be translated and in my case I actually want a page for every single tag or category if you want so I can write a little bit about that I've actually done this stuff that I've set up a section of my site called skills and special tools and for each of these skills and specialities I have I've made that attack so in this case if I want to put this him something like take talk I simply just drag that in to a Content area that can only accept the specific type which is the tag page now that that's done it's ready to go and I can I can it will appear with that tag on it I could have multiple tags on it and the individual pages out here the tag pages will actually have their own section as well like let's take the tag page for observer here we have a little bit of a text about observer why I'm skilled in that what I've done what I work with and then we have all the blog posts that attack with that so that's a nice little approach it's really a design pattern to how you could achieve that it's not something that I have shared in my code yet does although exam was out there I believe gelareh Hampton did something like that but I'll definitely she had the code for how this is achieved as wrong so let's once again just move back here to our demo blog post the next thing that I really want to talk about here is the images you can see that this is also picked the default image because the image is not set but we could actually just go in here and use the image picker dialog and look at that it's actually changed it's not the classical image picker dialog that you might recognize which is basically just the tree structure Gregg from Webster Poland has been kind enough to make a special version of it and he shared it on his blog with code that can just be reused the cool thing here is first of all we can search for everything we have infinite scrolling in case you have a lot of pictures I could go and navigate some of my many pictures but back logs have upload capability so in this case I could go right ahead and just drag from my desktop an image up here and it'll be uploaded it's that simple in this case I upload a picture of my talk like and I can just say ok and it's used there so in the dialog and I'll get exactly the same functionality as I do out here in the media picker where I could go and look at the same images and pick them up I think that's pretty cool that you can kind of work with it that way but what if I don't think that my otherwise beautiful dark would be a nice fit for this blog post here well it's quite easy I could go and find a lot image I already have some images in my storage here and I could search for them of course but I could perhaps also start looking at other things for instance I could go and look at stock photos so this is another Iran that's not released yet that I'm working on a little stock photo add-on where you'll be able to find some my stock photos from some great stock photo providers out there in this case let's go in and let's it's for copic because that's where I'm based and we see some beautiful idyllic pictures this one right there that might be a good fit we see what the picture is about we can say use on sight the moment we click use on sight you know I've actually downloaded the picture and it saved it up here in the incoming assets folder so there we go that's the picture we can drag and drop it in and we're good to go we have the picture on our blog post another thing that's worth noticing here is a little cool detail which means that you can go into the picture select the picture go to the all provinces mode of the picture and then you actually get automatic descriptions here this is a large boat in a body of water with the city in the background water outdoor sky boat harbor a river and so on doctor all this information comes here we get a full checklist and and all of this comes automatically because I'm using the add-on from EB server using cuts of services and Escher so whenever the image is added to the image so a media storage it'll automatically be sent to Azure and it will retrieve all the all the description all the text for it and and tag it with mates later this means that I could actually search for it now and I would be able to find the image in the case that I was searching for let's see a boat we actually have the picture showing up here if I search for him anymore we actually get my talk and we get some deer that's kind of cool I think that you have an easy way of getting this stuff out there looking at the picture of the deer you'll see that it says it's a group of deer standing in a grassy field grass tree outdoor animal and if we look at the picture you'll notice that that's pretty correct beautiful deer a nice little detail we have here is that you'll notice that the picture I'm using here is fitted so it looks nice in here but it's also pretty fast download even though it's a very large remittance image in itself that's because I'm using the automatic image resizer on my site which is also a free plugin that you can use and then you can have here designers developers specify for every area where you put the image how should it appear how should it be cropped and which size should I get so basically it's just modifying the URL for the image that makes show up in the right size at the right place that's a nice little feature so you don't have to think about that you could even configure it so for special mobile versions it'll render in a specific way we've got an image we got a blog post ready to go we could start typing in some text here I like to show great demos would be a nice sub header here demo demo demo but I think these will be good words for the word demo but the key thing is of course to get some good SEO on it and to help me out a bit here you know great SEO comes from great content and content using the right words of course so for that I'm using a commercial plug-in called solitons that fits with the observer just look at it here it has a keyword helper that'll help us pick out some keywords that we can kind of target for the specific post typically you know I find free keywords are good for this one demo and then we can actually get an idea from Google you know how popular is that word which which come in search words either with that one how is the competition looking for them we'll pick demo and every server maybe we'll pick those keywords now for those it has estimated you know how could our pages and we get a score basically indicating what should I do within so what should I do to improve my SEO score for these keywords and then I can start you know modifying my content heading more text in the right places using the right vocabulary in order to get better as you know that's nice tool for authors when they're creating content another part of SEO is of course to make sure that Google indexes the site in the first place and for that if we look at admin mode that's actually another free community plugin you can use with that call the search engine side map settings search in the search engine site map and this plug-in basically just runs the schedule job and sets up your site to make sure that you get a site map generated for Google to index now you can connect the site map to your search console and Google and then that will eat the site map up whenever it indexes and make sure that you get all the all the pages that you have published and made publicly available in your site that's a nice little detail small thing but it all helps out of course once your site is life and your posts alive you can start tracking them I am using Google Analytics on my side and there's a bunch of add-ons and equations with Google Analytics one thing that I enjoy using here is the on-page viewer if we go into a specific page it could be one of the blog post that I've already published let's have a look here let's take this one this is a little blog post about how you can automatically tag content and there's even little live demo we can try taking content fun detail that's for another YouTube video I guess so basically you can look at it and have it out here in your sidebar and it'll take a look give you an idea about people visiting this page you know how many page views rather on this page from when it was published how much time do people spend on it how many of them leave the site and so on and you can start getting you know information about next pages that they go to after this one previous pages and so on so a really nice way to kind of get statistics just about this this single page right there on your ending the page gives you a nice idea about it's all fits together I'm also trying out the observer inside which is kind of cool now of course I'm concerned with gdpr but as long as it's not personal identifiable information we should be fine if you see right now actually not identified down to a personal level anybody on the side except myself and basically what you can do is you can go in and you can kind of navigate through the information about a person and you can kind of see one of the visits at the side and what if they done when they actually visited the side and you can kind of see this demo already listed here and other steps throughout the site and of course customized events and information is thought about every single visitor on the side so once again a really nice little way to to get more knowledge about who's visiting your site what are they doing on the side the last thing I want to show you guys is how can you get an overview of everything you have in your site when you start getting a really big site with a lot of content on it how can you get an idea about what's going on on the side if you want to make changes to the site so one approaches that I've another community plug-in the audit tool made by Nicola iron from Australia is a way where you kind of get an idea about all your sites and all the content types and your side where they used it's called the CMS audit and I really recommend it it's in the nougat feet just like many of the other community plugins in this version here though I've extended a little bit and I haven't yet published my changes I'll do that soon but what you can do is you can kind of go in here and you could get an idea about where are the list pages in my site well the purse on my side you can for an individual page type it'll investigate it and figure out exactly where is this page type used on which side and I want which pages same goes for the blog types of course so actually you know traverses the side and identifies the use of the individual blocks and that type somewhere they used so you can see the quote blog is used in these specific places and you could go straight to them of course so a really nice way to can idea the extent and I made it that I added information about Vista groups in this case it's actually using a scheduled job and it's not run for 24 hours so we'll just run it right now and absolutely while it'll tell me that the Vista groups I have on my side I basically just used them on the start page to identify specific Danish visitors you can get an idea about which pages are the used on so really nice little extension where you can go in and get an idea where it's my Vista groups used I've heard about customers with you know hundreds of Vista groups used many places throughout the site if you want to get an idea of where they've actually used been used and getting all of you this is a tool I could help you do that so with all that being said we could actually have a look and just go back to the presentation here and up here obviously this being a one-way webcast I can't take any questions or comments but feel free to reach out I'll be happy to answer any questions you might have leave a comment on my blog ask me if you want me to combine and do a little check and you're set up so take care until next time