django CMS and Aldryn Cloud Guided Tour with Angelo Dini

yeah so welcome everyone to the guided tour through jungle CMS and all during clouds i'm angelo product manager here at DB o and one of the genre simmons core developers you can also find me under my neck nickname final angel on twitter github or IRC as mentioned right at the beginning of the presentation by mateo if you want to ask questions please ask them in the chat so later on at the end of the guided tour I can go through them and then answer them one by one basically I will showcase the guided tool or the tutorial that we published on DBA and jeonga semester dork the main goal again the of the guided tour is to setup Django CMS and implement an example theme based on the how to build a website and block with Django CMS without knowing Python or jungle tutorial that you can find on jungle semester org and for this we'll set up our project on all green cloud so we don't have to do any local mess Ness we will install and configure the desktop app so we can sync our files down to the desktop and adapt the theme that we are gonna download and we gonna get familiar with Java CMS itself like how page works how content works how I can navigate through the toolbar and ultimately will download and install the clean block theme which is an open source team provided by bootstrap theming platform and again mentioned at the end we'll have a questions and answers and where I basically go through the questions asked within the Hangout channel this will go directly to the live demo I hope everything will go smoothly as life demos go normally so I'll close this for now and we'll basically gonna start off with Divya altering clouds so if you're not yet familiar with diva altering clouds you can basically open controlled Aldrin calm and the lock-in will pop up you can then sign up if you haven't yet done we have a really nice signup step that takes you maybe less than a minute you could also sign up with get up and once you've done that you can very easily log in with some user I've now used just an example user that has basically the same rights and set up that you will have ultimately with the alternate cloud to get started what I need to do is here start with a very fresh project so I basically click on add new project and we'll start from a blank project you also have the option to start with a theme and content very have like you know if you download WordPress and install something you can have done a full-fledged emo website ready this one you should choose but in our case we are already pros and we actually would like to modify everything on our own so in this case I just create a site like demo from hang out I choose to html5 boilerplate yes you can also choose another boilerplate to start for a but for now you're gonna use this one because you want the bare minimum and you also want the CMS installed of course once I hit create the create button it will basically start up my project set all the settings correctly and that will then be led through my project Start screen then we go in this case we will have a test server in the live server we will only work on the test server for this tutorial but he in this view you have different options for example to invite other people to set you the my domain settings environment make variables and so on what we want to do now is install some adults as we don't have know the typical settings PI available to us we can just simply go through the UI here and search for add-ons like for example as you're going to use a bootstrap 3 I want some kind of bootstrap library where I can work with plugins can click on install leave the settings as it is for now and just install it and it's so very easy to actually install things on the CMS you can also do that for an application for example like the older news block which you're gonna see at the very end there again just click install all is done for you go back to the dashboard and for now we want to actually go to our site so we can add some pages so it has to click deploy test and then it starts deploying that site by this is now going on then next step is to somehow get this project to my local computer for that I need to download the app which is available for Windows and Mac click on it and then it starts to download which is basically from there you go so why these downloads I have this actually already already here just to check you how it works and this is the app once you have it installed this is how it will show up here you can do exactly the same time if the user just created on the cloud you basically type in your email and then some password and you log in and then you can see already the project I've created here in the background which is also called demo from hangout it's all available to me from here and here also have the status at the moment it's trying to deploy for a minute already I have other helpful elements like out the syncing which will be soon available to me once the first deployment is done but in the app itself also have locks like if I create or generate any errors from my local development I can set templates which will be available to me in the CMS to select which will also get to or you can also always if I for example close this window and click on add-ons here which will open again this add-on screen for me that I can then install further add-ons or the same sharing or I can then set my sharing settings on this project which is really helpful if you want to invite other people and also get them to collaborate on your project good if you go back to manage we see it's still deploying you also have the option here to set your custom settings so for example which workspace folder your projects get synced to so you can set on which path all those projects are added and you have also some client options that you can set what's also really nice is you can create projects from in here as you've seen before you can really go in here and just start to create another project from this screen so we don't always have to go then to the admin user interface basically this so far from the UI tool you also have the possibility to do local development so if you're used with jungle locally you can just fire up this and it will then provide shell for you to work with it locally and we can have you have to come and then here on the right or you can basically execute that in the shell and then the project is completely drawn to your local computer in this case what I'm doing now is I only care about the static files like templates and obviously static files such as JavaScript CSS and whatever else I wanted to make publicly available which makes it really easy for me then to work on a staging environment the other path the ordering local development is basically I copy the entire project including Python code including everything that's around it so it runs them physically locally on your computer this will still run on the cloud basically good and what we're gonna do alongside is basically we have this clean block theme which is available here we will integrate that clean block theme which was also used in the tutorial to integrate into the java CMS this is how it looks like if you go back now to the client here you can see already okay it's green actually our site is ready it's still doing some some scaling so it scales up the project if you want more servers this case I only wants to preview my site so I open it make sure that I'm correctly signed in and then I see already my Chonga CMS instance and it asks me at the very beginning for every new install if I close this it asks me hey add your very first page I can open the movie here again and say ok let's add my very first page I can double click on this editor because to go back if I decide or not to do so I can also go next but I'm lazy I like to double click and then I basically can choose home here with some example content like hello world and save it and create it and this will create my very very first page home with text hello Bert very basics at the moment but we want to go here and if you analyze this know we have like home about them to post and contact sample post we probably gonna replace this block at the moment here we only have home how can I know add more pages one approach is to hit the create button always you know the top right which opens this visit again so you can basically add the new page the next one would have been about and as a pro feature you can always hit command enter or control enter and it will then immediately save it so we have now created about you can do that the same for the next page if you want to or we can go let's say to the pages here and we can see here the full page to you what we have at the moment here I can also say hey I want a new page and in this case block and edit so we have no block and the last one you just want it is contact it again enter and we've now created four pages and we can also see here we have one language at the moment enabled and home is published we can see that because of the green icon you find additional information also in the legend here here we are previewing already JAMA CMS three point three which was released last week to make sure that the other pages are also publicly available you can basically click on this bottle and say publish and you can do that for all the other items as well basically click on them and then one by one publish them individually the CMS itself has to publishing States for go back here to home by pressing on the view icon in the heavy of the hello world has two states it has the life state which is this one here you can identify that by the blue button showing at the top right which says editing page if I click on it I have the draft view which is not yet published a venture and you will see that by having another blue button if I would change something you know there you go it's safe and you'll see her here now that you have changes in your draft that are not yet published to life if you would wish to do so we just basically click on this button and it publishes it it then immediately those are the two states that we have good we have now created home about block and contact and we have some example content available to us now this does not look appealing to me I want to look it like let's use this example content page about me I want that it looks like that how do I do that we have seen that the Alden client has the desktop it has has deployed or changes we cannot click here on all to sync this project and if I do so we can see that the client works here in this case it was already really fast can I open the destination folder which opens here this page where you can see at the folder here cannot open that in let's say sub line let's move this to the top right you can see we have already years on file so for example this template folder if I move this to the right we do multitasking here now this here to the bottom and if I go in here into the base file while having my site open I can actually adapt stuff you know so I can easily go and say here yay no FTP and just hit save and you see that the client is working here behind you can see that by the icon and it's already life so here you can see I can make changes on my files can remove this again it's safe editing and it goes immediately down to the server and does life rewrote which is really nice to work specifically if you work on templates and CSS files there's also goals of course for CSS JavaScript any other aesthetic finds your attitude but what we actually want is we have this clean blocks seam and need to download it and need to somehow import it in here so let's open the theme that we have here and open this folder so let's put them side by side here we have on the Left we have our current website that's what's being synced to my local system and on the right I have to just downloaded files just open about here and you see this is now running from my local system which is basically still this so we don't need that for now at the moment to close it and to request that this includes CSS fonts image JavaScript fine and we know that everything that's served from genre is in the static folder so if I opened the static folder or the can do now is just drag and drop that stuff to the left side and make sure it's replaced by everything that's in there and after this you will see that the desktop app is working I just copied that over and it's now trying to sync that basically to my system while that is going on I also have our getting bit confused here let's move this out that to the right side again if I always lose my progress here I can still go in your open destination folder I have it back there I can go now to my templates folder and here I also have those templates files now I I talked I wanted about dolls so let's copy about to this folder as well and you can see already it's also showing up of course here but it's not a real good area what we want actually is that vault is our first page now for this basis at the moment like in in the jungle world based on HTML is the first file it opens traditionally could also be like the index dot HTML file you can change that of course in the configuration for this example it's a space so what I can do here now is I can actually delete veins and you will see that at some point my page will throw an error that there is no template it's still sinking though so let's see if I'm bit faster so let's rename this to base now this is our new base file you can see that the aldryn client is still working so on not everything is yet zoomit let's go back to our page and you see hey template does not exist if this error is happened it can be that the live sink is not working anymore which obviously I just deleted base html5 so I can just reload and you can see base is now showing up but if I go back to my file and you can see here or if you have something new we have like the restored bootstrap stuff and I actually type in something and safe auto-sync is not working anymore this is due to the fact that I have no a complete custom HTML file not including any CMS anymore and we want to adapt this note to include the CMS and to behave correctly let's revert this change what do we need for that that's that's a good question first of all we would need to implement some kind of logic from Django boatloads like those typical text on the top and what we need here is specifically static to define our static files translation I 18 and eventually we have CMS tags for example to load the menu of the Zeki site X which we'll see later on that are used for loading assets and addition also many tanks for program menu stuff after hitting safe here nothing much will happen we still don't have CSS we still don't have a nice look and feel what we actually need to do is now adapt those lines here CSS bootstrap min actually should load no through static slash CSS instrument and he result static slash this will technically work if i refresh here though it's not that nice what happens if you ever see a CDN attached to it so we do here is make use of one of the jungle which is called static so if I add here static and to exactly the same as a dip before it actually also renders to correct path so if I heat safe here and go back to the side and still look the same but it now serves to correct path so if I would decide on renaming static to some other folder it will obviously also do that we have done that no for the CSS but we still don't have the image here so you'd have to check for JPEG somewhere there we go the same here you can just load static that's at here and they also have other static files like on the bottom normally here you can see jQuery let's make sure that this is also loaded correctly or in this case bootstrap can also make sure that this is loaded correctly correctly and ultimately also the block this will make sure that if I don't know into there inspect you and network that I don't actually have any errors here good which makes it nice looking yet no but we still don't have life reload because you don't have the toolbar showing on top at the moment you cannot start reintegrating to CMS into the project and the CMS is really not that in truth if it doesn't require much to be included one thing it requires is on the top the CMS toolbar tag if I just add that and hit save and reload manually you can see this only adds the HTML of the toolbar which doesn't help me that much I still need to have the CSS the JavaScript of it and for this we provides a Kasai where we can say hey render all the CSS in my project and for altering specific tools also the all during specific app which can also be HTML or meta tags and so on and the same we have to do then on the food iraq if I hit safe now and refresh again you can see the toolbar is here it's dialed but it can't actually open and close it so it still needs to make sure that the JavaScript is somehow render for this the same here you cannot define the end approaches and on the other hand what we also need is the snake a cool event which is rendered tail you can also define your own blocks if you want so like J is food or Jaya stop but these are the texts that are required by the CMS if i refresh now the toolbar is back on which is really nice but we have a little bit of a problem you can see if I open it I don't see the menu anymore it is not that optimal I actually would like to navigate while there the menu is open for this we also created a really nice blog post about best like frontal development with jungle CMS on best practices and one of those best practices is for example to modify your CSS if there is a sticky header with something like this so if the toolbar is available push my content 45 pixel down so I open it now after a refresh of course I have to see now I have an area I added it correctly I think so we have some custom code there which doesn't we don't have yet the right code but then technically if I open it ya know it works there you go if you open it the menu jumps to the bottom if you close it again to the top which is a clean solution then to still navigate your website obviously but we actually cannot navigate it yet because it's still static HTML which leads to post HTML file which doesn't help me so I have to figure out a various - navigation let's make this a bit closer or more white so you can see here is our navigation this has to be generated now dynamically by Django CMS how can we do this you have this show many tack in CMS which is written like this so you can say show menu then you can define three values which are sometimes confusing or can be confusing and if we check out the documentation on those you can see that the first two parameters defined start level and the end level so if you would like to start from the first level nested system you could add from here go from 1 to 50 or if you only would like to have the first level rendered you would do something like this and if I go back here now into my side you can see after a quick reload that it's not correct I've home about block and contact which I just added so if I click on about you also can see that the URL is appropriately handle is no good of course also add more in our what would like to so I have no the menu working now we can start on the more detailed things like for example the title that should also be dynamic and in CMS is something like request dot site dot name which renders the same that you can see here at the moment Dima from hang out and you can see on top here demo from hang out this rendered this would go the same as here star bootstrap I would like to have the name of my website like request dot site top name and then start bootstrap will change to demo from hang out but I would like to have a bit more bit better name so I can go to my administration goes to sides here and change it here so I can easily go in here and now say for example and shop.com safe then you can see title here title here and type leer have been adapted which is really nice but for SEO reasons I would like also to like you know do something like that home - whatever and for this this you can access the page attributes so if I go to edit this page let's go for example to home make this more and then go to page and page settings I have those attributes like title a new title page title description meta tag they could actually use them like I could write your welcome on the page title and render that here and for this we use something that's called I have to look for that quickly I think it's called page name page attribute I think so something a page attribute and then the name for example H on the score title so if I hit save here I was a bit too fast so go advanced settings again and say here basic settings of course so here welcome it's safe I'd see I'll come on top you know or I can also just use the title that we have before there switch back and it goes to home to go even further I can go back here and say page attribute and this case was meta description so I can just add my meta description here and this is extendable the system so we can add more attributes to your page and for example then also rendered also if you wish so that's one example of how you can how we can make things more accessible now the nice thing and the title is I can wrap this a block like this and then override it on a template basis so like my base template defines this block title but if I would have any other template like let's say this content this content template extends from base so I can now go in here and say block block title and override it here that can also then happen on like your own custom add-ons that you're writing so here I could then say hello world and I would override the default directly in this page let's see on top header words of course we don't want that in this case because I wanted to use the global undefined in base another one that you can do here is the language code cookie right language code and then it would add the correct code on top of your markup which can also be really helpful if you have multi site pages let's check the code of the remaining side what do we have here if you for example to keynesian if you wish to translate this you could write trends and then total navigation which would still work fine and this will see later on on how to do the header this is basically this part here so what we've done now is we have a logo that can be defined as a working menu the header will show later on but we cannot add content yet like this is the example content that I would like to overwrite which is rendered here as you've seen this template basically if I make this cookie this site uses templates the content template you've seen this already in here basically you can define default templates that are accessible from the CMS through this template section now I have to find content which means then the CM is loads the first page that actually loads is no base but content and if I would remove everything in here and just write it again has a word this page would look mythically different because what this template does is again it extends space HTML file and it loads CMS tanks which is if I only do that not too much you can see your page still looks almost similar basically extends what we have there but what I can define now is here a block content with a placeholder and in my base file in this area I can then also write block content and then the CMS will take this content and render something differently now so it now has here an empty place I could say hey here is nothing and this will still not show up because it will actually go to the content template and probably have a title check we have block competence there we go and then we have to make sure of course that the content template is selected let's see what's happening here here we have another one well it's safe to quickly probably isn't safe yet or synced there we go hello world changes we have something else now here this comes from the template we or from the creation page that we did at the beginning there we go on top here like a no at actually content if I go back to the about Us page yeah here we have this default text now saying hey this page is no content yet make sure you're in edit mode blah blah blah and this is the placeholder system that we have in here if you go into structure here is very add your content if you go back to home we have here something already we have here the content has a word example if I would simply delete this one we'd see the example text again here this page is no continuity make sure you edit mode and how this works is basically you have this placeholder system which looks like that if if you have it simplified like placeholder content and what that does is it allows us to define areas in the CMS that can be where we can add content I can also define something else like I could add a feature here and then after a quick refresh you can see here feature shows up now and the nice thing is you can add plugins to it like click on the plus here and then search for like something like text and then say and the word again that it says it's added there you can see it's shown you doesn't matter in this case if it's now in feature or content it will just define the ordering basically but it can be that features for example this area here on top which we'll go to quickie for this case we only need content and what's nice and the placeholder system is we can define placeholder content or so if there is no add-on show me this content otherwise show me what's added to the placeholder now I've just removed the feature 1 but the feature holder the plug-in for me so I can go back feature go back in here and lock locking is still there just drag and drop it there it's the lead it again so it's still have my hair over content but actually I would like to have discounted just that the template looks like exactly as ahead and here I can simply go over the text double click you can edit content insert it basically it's safe and now our page looks almost identical to to clean talk 1 here the only thing that we haven't covered yet is to about me and if I go back to the this page we have we have it defined here I could no use for example the page attribute system again and say hey I want you the page title rendered for example which technically would work I could just go into the page title at custom page title for every page that I have here and it's rendered than like that could also do the same here for example write my own custom field but I could also use something entirely different like what we just had here with the placeholder system I could say hey okay I want to use the title let's remove this for now but also define a placeholder so I can say placeholder feature or render this not here and placeholder this allows me now to have still my header as it is here but override it if I want so I can go in here and now overwrite this let's say another text because I love the wording so much I call it again add the words and this will add to know the hello world on the top but you'll see we lose all those constant areas as you've seen with M is alder in itself it's really easy to go back in there and install you add-on so I can easily go in here and say I want to install a background image adult for example or a style talking and we'll see why we need them quickly after it's in the style one I would need for example container page heading clause and then while I'm working on my page I can still deploy a long side so I apply my changes here to explain to you now what we are about to do if you check out this structure here I can build complete structures in the structure board and you can also nest elements so for example I can have a row which is like this grid system and I can define I want one column with let's say MD 12 add this column you see I have no nested plugins I can drag and drop then the text here doesn't do much that there yet but what we need is we need to basically build to know this header separately so we need something with a cloth intro header or just this background plucking that are just about to install after that I need a container cloth or a container div I need a row I need a column and then I need this page heading cloth and then I needed heading or this text you can see now this is like a also representation of the markup I just have here on top and the somehow need to rebuild that you can see I just had the row and the column plotting to call Youm you and the column plugin if I move this to the left has specific attributes like Col lg8 so I can easily go here say Col lg8 what else does it have LG offset to the officer it has medium 10 and offset one I can say is that which makes clear that I have no two row the column and the text plugin text plug-in itself shows hello world at the moment but I can change it like yay we call it make this as a heading because here as well it's a h1 it's safe which makes sure that we have to those three while we're still missing intro container and page I think that's what I just added basically if I go back here and I go back to manage add-ons and I should check the style plug-in for example can still go in there and configure and what the style clocking does is it provides me a list with classes like I need for this case container and page heading but not intro header because for this we're going to use the background but if you have spots and classes or so we can extend it with more like I did once here if this hit save and we deploy and this is the power in off having a lot of different adults in here and you can see I still edit it stuff and that altering tells me hey I'm I'm ready so I go back and say yeah okay let's check that out so I need a background all I need to refresh first there you go then let's look at background there is the background image can now open the background image should actually a define so let's go back to our project here quickly open the destination folder again and in here we should have some image files in static images we have for example let's choose a nice image like this one yes cannot drag and drop that over here that's how easy you can add files then define hey it's a header tag time type and our custom cloths that we have here intro header in additional classes and now added the background image you can easily drag and drop that also into the one so now we have covered the intro header now what we need is the container so I can go into the background image directly because it comes afterwards click on the plus here search for style and create a container cloth hit save and if you open it again nest it further and the last thing we need is off to the column we need to pay chatting close there you go hit save and I love it here again nested further and you can see I just built the structure I had you in there and let's see Oh looks like we now builds the entire background image and text with plugins so it's very powerful you can really create very nested structures in the CMS that represents basically HTML markup text the last thing I would like to show is like we also installed this block application but how do I install it you can do this by going to page and then advanced settings and in the Advanced Settings go to application and then choose choose the application you want to install mcLeese news block hit save and it's there I have nothing in there yet so let's go to the typical creation thing publish this page first click on create and now you have a new entry called news blog article so you can actually start now by adding a blog post the typical has a word and there you go I just created a blog post and with very basic simple markup and can easily now go into your application then and modify those templates here yeah that basically concludes the first part where we showed you how to set up the project with Dalton cloud install the desktop app and getting familiar with the Django CMS and installing that clean block fee starting on so this concludes the guided tool you'll find all mentioned links and resources within the description of this video if any feedback or question let me know in the comment section below thanks you thank you for watching be sure to LIKE favorite subscribe and share for more videos on our Channel till next time bye

Channel: django CMS

Views: 10,688

Rating: 4.9473686 out of 5

Keywords: django CMS, Aldryn, Aldryn Cloud, Django, Python, Development, Backend, Frontend, App, Cloud, Blog, Content Management

Id: eS9ow4J9uJI

Length: 42min 15sec (2535 seconds)

Published: Fri Jun 03 2016