Skip to main content
Frontend of Drupal 8 : Structure dossier theme

Frontend of Drupal 8 : Structure dossier theme

Hello it's Edi tutorial on the frontend of Drupal 8 last time we saw how to enable debu mode on Drupal 8 now we will see the structure of a theme folder on Drupal 8 Besides, I encourage you to see the documentation of Drupal 8 on theming I will put the different link in description below the documentations are well explained with good examples so I really encourage you to go and see this documentation so for the tody video we are going to see 'Drupal theme folder structure' so we'll see in fact the general structure of Drupal 8 and to understand things rather do a little history a comparison for those who were already working with Drupal 7 so in fact before on drupal 7 the folders modules ' sites/default/module' and folder theme 'sites / default / all' now with drupal 8 we do not have these folders anymore in reality these two folders module and theme we put them back in the root so we see here module folder and we have theme folder the two folders are now on the project root and we can directly put our modules or our themes, in the other hand, Drupal 8 put the default themes folder installed are included in the Drupal core which seems nomral to me So that's a little bit of history and now if we want see the structure as usually we can create 'contribute' everything that makes contributors' themes, third-party themes or our own themes and here we go call the folder 'custom' then we call our file custom this is where we will put all our themes that we will create ourselves. So we come here in themes folder we create the 'custom' folder and in the folder 'custom' we will create our own theme, the name of the theme must have the same folder name as our theme so there I am going to call 'themedrupal8' we just will not break our heads here we are, we created our theme called 'themedrupal8' very well, here we are going in more details for this folder the first file is the 'breakpoints.yml' file so as you always see we have the 'yml' extension so we will always work with the 'yml' files good then for 'breakpoints.yml' in fact it is a file which allows to define the responsive behavior of our website on tablet, mobile or screen.

Always the beginning of each file must contain the name the theme, in our case we are going do not use the 'breakpoint' file because we do not need and in addition it is not mandatory then we have the file 'info.yml' it's the same file we had on Drupal 6 and Drupal 7 if the file '.info' then we go see what is the file 'info.yml' so as usual you always have to precede 'info.yml' by the theme name so here we go create our file do not forget to add the name of the theme '' so what contains a file 'info.yml' ? first, it must contain the name of our theme.

In fact this name is going appear in the appearance so there we can write it t'hemedrupal8 ' then what type do we create so it's a theme type and if it is a module we will write type module, so there we are creating a theme so the type is 'theme' then in the description we will simply give information about our theme 'this is a Drupal8 theme tutorial', then in which version does it work it's version 8 and then we can add we are not obliged to mention it we can say for example that this theme does not have a basic theme.

But it is not obligatory then we have to add the regions of our theme because we this region means that ou theme can contain a 'header' a region 'content' and finally a little 'footer' so are the three classic regions of a simple web page and then of course we can add as we want other regions, for those who do not know the regions on Drupal so here if we go to structure so the blocks so here it was called a region 'header' this is a region 'primary menu' is a region 'breadcrumb' it is a region and inside we can add different blocks. so that's for those who do not know the regions. If you see here the name of our theme it's going to be that and then the description so that's the minimum we can put in the 'info.yml' file and besides, even now, we can already see that our Drupal theme is already here, but I notice a small error 'Themedrupal8' and not 'Themderupal8' I will fix this so that's just 'Themedrupal8' here we have the name of the right theme very well so here we can already enable our theme so we see here is missing a screenshot of our illustration of our theme and that before going to the screenshot, there are still other things to see before, so we continue our theme structure folder, we now go to 'libraries.yml' then this file is a new implementation that has been made on drupal 8 actually before in the info file we add inclusions css or inclusions js just add a key here stylesheet and then we add the different css files also inclusions script for javascript inclusions so this solution that was on older versions of Drupal poses a problem is that every time when you load your web page automatically we will load all the files so that makes the loading is very heavy for pages when we have several css files and also js files.

So the idea of Drupal 8, is to call the css or js files only when needed, by the way with Drupal 8 the jquery call is no longer done automatically it's up to us to ask the core drupal to do the jquery call I will show you after the example and these inclusions css or rather its calls there are from the file 'librairies.yml' so let's do a little example then as usual we will create the file 'librairies.yml' we create our new file and it's called 'themedrupal8.libraries.yml' This file will contain the list of our bookstores that's the name of the bookstore so we can have multiple libraries so that's our first library we will call it 'custom' this library can have a version so I will put we can have a css inclusion so this way we have to add 'theme' and then the file css is in the folder 'css/style.css' which we will create later then we can have a js inclusion will also create the file later so here I have named 'custom.js' it can be something else you can name the file differently or 'app.js' finally if we have dependencies like jquery, we call the library 'Core / jquery' so from anywhere, we can call this library to use the js file or the css file we do not have to call him all anymore from the 'info' file for use in the 'template' and that's it something that goes enormously improved performance of Drupal so now when we call it we wants to see later how it's going pass in here in drupal theme all just we will come here we will add 'libraries' and we will add the library 'themedrupal8 / custom' that's fine then we continue after I'm going to show you the difference whem I remove the library and put it back, you will see the difference when there was inclusion from the library. but for the moment we will continue the structure then there is the 'theme' file so it's here same as on Drupal 7 this is the file for the theme actually allows to do preprocessing so we can modify the display just before they are displayed, so just before the final display we can alter the display to make changes, for us we do not going to do it, we do not need then there is the folder config it contains two folders 'install' and 'schema' in the settings.yml file it contains the setting of your theme in order to have some dynamic config in the case of this tutorial we will not do it and even for 'schema.yml' it's actually rather a structuring of data in our theme also we will not do it as part of this project.

Well we continue so we saw folder style and js, so we will create these two folders so here we create these folders also create the 'style.css' file and also from the folder js and we're going create a file I think to call it 'app.js' very well what's left so that images I do not think we're going used but I'm going used later to put our images. It is very important to keep this structure a structure is best practice so it's very good actually even after if someone else later will continue your project it is always good to have a unique structure, you project to become visible to someone who is going to work on it.

Then we have 'logo.png' by default this is going to be the logo of your website then there is the 'screenshot.png' this is what we saw earlier screenshot is the one so before on Drupal 7 we are obliged to write the name of the theme logo in the 'info' file, now with Drupal 8 we are no longer need to do it. When we the file 'screenshot.png' in the root theme folder, automatically it matches as the theme logo, we're just going search logo Drupal 8 it looks good very well then we will copy that then here is copied file, we will rename it by 'screenshot.png' if we go back to our structure here is 'screenshot.png' there is something that has broken oops what happened then we resume this is drupal 8 logos so then we'll put it there very good we rename 'screenshot.png' there now if we will refresh the page is he going to appear, no he did not why? There is a reason? It is in the root of the project instead of the theme then we will move it to the folder theme normally, it must work so we'll see that Voila! We check it is in the root of the theme folder so Drupal 8 directly recognizes the theme logo very well and finally we finish with the folder template inside, of course, we will put all our template files very well, so here we already enabled the theme I think.

I already activate it so we're going to go in a structure we're going to see the different regions header, content and footer. Excellent, well now we come back to libraries.yml I would like to show you the difference loads from the library in the info file we call the custom library so normally in the HTML code of the page we have to see this inclusion this time we will go directly private browsing like that we'll see then we open we will do 'Ctrl + u' to see the HTML code is 'app.js' here? so ita's not here that's normal, because we have not yet empty the cache very well.

We come back to our page and check 'app.js' is not there yet? Why? Normal we will say why later. On the other hand, we have however, the inclusion of the file jquery.min.js I already see the inclusion of files js is now if I remove it from here from the info file and again I do a quick clear cache so we'll do that we check if jquery is always there.

He's not here anymore. However, why the file style.css file was not called, there is a reason it's the name the file that is not correct so i rename 'CSS' instead of 'style' clear cache, I refresh the page it does not always work? What is the problem? there is another reason that I know why it is necessary to add '{}' very important so we'll be fine clear cache we refresh the page you see that there is style.css that has been added and also app.js has been added. So do not forget braces {} in fact we can see that later are actually keys that we can directly add in fact on the files themselves but we will to go into more detail in the next videos So now you see the strength of this this new structure and more precisely actually this new way of working with library so we can now add libraries so much more smart and not with old way when they are loaded automatically even in each template there is the possibility to call a library x y and z so we do not have to call all libraries.

so it will improve performance I think we've already done all So that's it for the tutorial of today. So we saw the basic structure of a folder theme, what are the the important file info.yml it's important to have the library file if you want to have a highly optimized management of our inclusion CSS and js so that I think it's the most important to keep in mind is that info.yml is important if it does not exist you can not activate your theme and then the libraries.yml file is very important for inclusion management CSS or js I thank you for your follow-up if you have any questions do not hesitate to ask. Goodbye.