FREELessons: 35Length: 7.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.2 Banners Module and Configuration

We have banners ready to display, but how do we publish them to the front-end? The first thing we’ll do in this lesson is create a module to produce and render the HTML code on the front-end. Next we’ll cover the banner component’s global configuration for the default settings.

6.2 Banners Module and Configuration

Hi, guys. Welcome back to A Beginner's Guide to Using Joomla. And in this lesson, we're gonna take a look at showing our banners on the front-end. And also the configurations of the Banners Component. So continuing on from where we last left off. We now have three banners. And those three banners are associated with our newly created Banner category and also our client. Now what we'd like to do, is produce the code in order to view these banners on the front-end. So in order to do that, we need to create a module to produce the code. So underneath Extensions, we're gonna go to the Module Manager. And then from there, add in a new module. And the Module Type is going to be Banners. So, producing the code for the Banners. And then, we can now start to set-up the module to produce the code. So first of all, we need to give this module a title. So we know what the module relates to, so I'll say Sally Banners. Now, we have some options for this Module Type. First of all, it wants to know the target. This has to do with the way the links open. Don't forget, our Banners are linking to, let's say, the website or the Sally Salon website. How do you want that website to open? Do you want it to open up in the parent window? Which means, the same window that your website is in, they click and then, it reloads that window. And shows the website that you're linking to. Or you could open it up in a new parent window which means that it will open up a new window. Or in most cases with modern browsers, open up a new tab. And then, show the website that way. Or open in a pop-up window. So I'm gonna say, open in a pop-up window, just to be a little bit different. Then, we have the Count. So this is how many Banners do you want to display at one moment in time. So I want to only display one Banner at a time. Then, I can also set the client. This is going to be set to Sally Salon. So only show Banners that are associated with the Sally Salon client. Now, not only can I say only show Banners that relate to a certain client. I can also say, only show Banners that relate to a client and relate to a particular category. So for example, we now can say with the category, only show the Banners within the Sally Salon category. So what we're doing here, is we're limiting this module and saying, only show Banners within a certain category or you could have more than one category. And only show the Banners that are associated with a certain client. You only get to choose one client. But it's also allowing you a lot of control over which Banners can be displayed. You don't have to choose a client. If you don't choose a client, then it will look inside those categories and display all the Banners within the categories. And if you do select a client then it will only show the Banners within those categories associated to that client you've selected. Next up, we can say Search by Meta Keyword. That means, that the Banner is only gonna be selected by matching the Banner Tags to the current document's meta keyword. So don't forget, with your menu items, you have the ability to associate tags and keywords with that page. And those keywords, and key phrases that are on the page will be matched up to the Banner. And then, the Banner will be displayed. In my case, I don't want this, so I'm gonna say No. Also, we have the ability to choose how we want to randomize our Banners. So we're limiting this to one Banner and what we can do is say, Sticky Ordered. Which means, sticky is always taking precedent. And we'll talk about sticky in just a second. But we can say, ordered, so it just goes through one Banner and iterates through. So every Banner gets a fair share. But then also, you can say, Sticky Randomized which means that currently what will happen is it will just randomly go through our three Banners. They'll all still get a same view and a same looking but however, they'll be randomly chosen. Then on top of that, we also have the Header Text, which appears before the Banner. And the Footer Text, which appears below the Banners within the module. Then, we can decide whether we want to show or hide the title within the module. Then, we need to select a position, so where are we going to inject the HTML code. And we're going to inject it into position-7. But I'm gonna search for Protostar, that's the theme that's currently on the front-end. And I'm going to set it to Right, which is position-7. So now, it's gonna appear on the right-hand side bar, where all the other little modules are. Then on top of that, we also have the Status, which is Published, meaning it's active and viewable on the front-end. This code will be generated. We do have a Start Publishing Date and the Finish Publishing Date and Time. And so, that will again affect the status of this module. So it would only produce the code within a certain period of time. Then also, we can set the Viewing Access Level, which I'm gonna leave it to Public. So everybody can view the code that's being generated by the module. We can also set the Ordering as well, which will allow us to affect where the code is being generated within the position that we've selected. So within the right-hand side bar position, we can say put this module above all the other modules within that position. And then also, you can assign a language, which I'm just gonna leave it on All. Then on top of that, we can also associate a note with this module that will appear in the module list to make it a bit more self-explanatory, what this module is. But I'm gonna leave that blank. Then, we also have the Menu Assignment. Don't forget that we assign modules through menu items. Menu items represent pages within Joomla. And we assign the modules through the menu items. Very important that we remember that. And what we can do is say show this modules on all available pages or don't show it on any pages. Or, only show it on certain pages and then we get to select which menu items we'd like to assign this module. However, in my case, I'm gonna say assign this module to all pages. Then we have the Module Permissions. So the permissions for this particular module, not the Module Manager Component but just this module, which is Sally Banners. And right here I can say, which user group is allowed to delete this specific module. However, they can stick it in the trash, don't forget. Then, we also have Edit. So, are they allowed to save any changes to this module? And also, are they allowed to edit the state of the module? Trashed, Archived, and so on and so forth. Next up, we have some Advanced Settings. Now, I'm not gonna play around with these right now. I'd rather demonstrate them to you in the front-end. So, let's go ahead and save this module. Now, let's preview this module on the front-end. So now, you'll notice on the front-end, we have the module. There's the title. There's the header text. And there's the footer text below the Banner. Now on top of that, we can display more than one Banner at a single point in time, by increasing the Count. So if I say, save it now, we have two Banners being displayed at one time. Also, you'll notice, when I click on one of these Banners, that it will open up in a new pop-up window which is what I've set the target to be right here. I'm gonna set the Count back down to 1. Now, let's take a look at some of those advanced options. So first of all, we can choose a different layout. But however, we only have one layout and that's from the module itself. The Module Type that we got here is the Banner Type Module and it only has one layout. We can also choose a Module Class Suffix for custom styling. So, I'm just gonna say, sally. Then on top of that, we also can set the Caching. We can say, use the Global Settings for the Caching. Which don't forget, underneath System Global Configuration, we can set whether we want Progressive Caching and so on and so forth. But we can set this to No Caching. So, let's say you're just trying to upload all kinds of different Banners just to see what works. You're better off switching the caching off at this point, making sure everything's right and then switching the caching back on. Now, when you do have Caching enabled, you can also set the Cache Timeout Limit for this specific module, so every 900 seconds, the Banners are re-cached. Then on top of that, we have the Module Tag, so instead of having your standard div, you could have a Section Tag if you'd like. Then you can also say, the Bootstrap Size. What is the Bootstrap Size? Well, that's mainly to do with the Grid System. And so, I'm just going to leave that as 0 because it's only in the right-hand side, but I'm just gonna leave that to do what it normally does. Then on top of that, we also have the Header Tag. I can set this now to be a header 1. This is to do with the title right here. Then, we can also set the Header Class. So, I'll say ss_. We also have the Module Style, which is set to well underneath Protostar. But you have a lot of System Styles. You also have some Bees3 Styles but we don't have the Bees3 Template right here. And also, Prostar. You can also say, Inherited as well. So the style is inherited by the template that we currently have, which will be the well. So if I go ahead and save that now, let's go ahead and refresh. And now, you won't actually notice a huge difference because we've still got the well styling and all the rest of it. But, there will be a difference in the actual code that is being generated for this actual module. And we'll notice, we have the Sally class right here for this module, but it's a div element. Now over here, I told it to be a section, not a div element. So, that's wrong. Also, we still have the header 3 for the title of the module, which I set that to be a header 1. I also asked for the Header Class to be ss_, which that is not the Header Class. Now, you must understand that sometimes the Module Style, that's being inherited from the template or the style from the template. Whichever one you decide to choose from, may not conform to these settings. So unfortunately, we're gonna have to change that. So let's say, html5, and I'm gonna go ahead and save that now. And let's refresh this page. And now, let's go ahead and inspect. You'll notice, we don't have the well anymore, which is that gray styling right there. And so, it sort of comes out of that gray box. But now you'll notice this is a section tag. It's also extending our class with Sally right here. So, we can custom style this module. Then also, we have the header 1 now instead of it being a header 3. And it does have the class of ss_. So this is just something to bear in mind, that the style of your module may override some of the settings that we have available here. So now, that's out of the way, what I want to do is now take a look at the configurations for the Banners Components. So, I can go to the component itself and then click on Options or, as you know, we can go into System. Go to Global Configuration. And then, we have the option to click on the component we'd like to configure. But I'm just gonna go to Options. Now, we're configuring the Banners Component. So you can set the default to purchase type. You can also say whether you'd like to by default track the impressions and also track the clicks, as well. So by default, they're switched off. And then also, you have your Meta Keyword Prefix, this is a fallback. So, if you do want to attach a prefix on to the keywords and key phrases of your Banners, then, you'll need to make sure that at least you provide a fallback, otherwise, there won't be any prefix applied. But however, you can override all of these settings right here, when you set up your client. And also, when you create your Banners as well. Now, we also have the History Options for this component. So, for example, don't forget all the items that we can create. We can create Banners and Banner Categories and also clients, as well. So here I have the ability to say whether I want to save the history. So that again, is your version, so the items within the Banners Component. Do we want to save different versions? We're saying, Yes. And how many versions? Ten. Then also, we have the Permissions again, where we can target certain user groups. And what we can do is set the permissions. So are they allowed to edit any items within this component? Are they allowed to access the Banners Component within the Administrator Interface? And so on and so forth. Now, the last thing I'd like to show you is inside of the Banners Component, we have Tracks. This allow us to see all of the tracking of our Banners. It allows us to see whether it is an impression, so an impression is just a view, or whether it is a click. So when I click on a banner, then it will show me the Count as well so how many times it was clicked. Or how many times it was viewed. And the date and time. Now also, you'll notice at the top here, we can delete out the Tracks. So all of them all gone because sometimes, we can have too much analytical data. But what we can do is narrow things down. Such as filtering and also set a beginning and ending date for our Tracks right here. And then on top of that, we can export the Tracks. And we can say, whether we want it to be compressed or not. And also, we can give it a nice little file name and then export that out. So this is just a nice analytical information of data for the Tracks on our Banners. And it can be very important, let's say, if a customer is asking you, okay, show me my Banner click. So, Sally Salon, between such and such date. And let's see if this advertising is really working. And then you can export that data and give it to the user. So thank you for watching me in this lesson. And please join me in the next lesson, where we'll take a look at the Contacts Component.

Back to the top