FREELessons: 35Length: 7.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.4 Articles Component

Articles can have the default settings changed under the Joomla system. This will also allow us to change the viewing permissions and formatting in a blog or category layout.

5.4 Articles Component

Hi guys, welcome back to a beginner's guide to using Joomla. And, in this lesson, we want to take a look at the global configurations for the articles component. So, in order for us to bring up the global configurations, what we need to do is first of all access the articles component. So, I could select one of these three menu items right here. Here and then you can go ahead and click on Options. Or alternatively you can drop down the system menu like we normally do. Go to Global Configuration and then from there we can select the Articles component and start to configure it. So firstly, we're gonna start out with the Articles tab. And this is to do with how the articles are laid out, and rendered on the front end. So firstly, I can choose a different layout. But currently, with the default installation of Joomla, and the current theme that I have installed on the front end, I cannot change the layout of the article. We just have the default layout only. Then I can Show or Hide the title of an article. Also I can determine whether the article of the title is actually linked or not. So, in order for me to demonstrate the intro text, we first need intro text in the actual article itself. We need to determine what is the intro text. Well, that means I need to edit that article. So let's drop down the Content > Article Manager, let's use our filtering. And I wanna say, only show articles in the TutsPlus category. Now I can click on Articles Tuts+, and then I can edit this article. And what I'd like to do is place my cursor anywhere I'd like, where I want to determine what's the intro text and what is the main text. So right there in this case. Scroll down, and right here you have the Read More button. When I click that, you'll notice a red line will appear. This is now classed as the intro text, and this is now classed as the normal text, or content for the article. So I can go ahead and save this now, and then we can go ahead and take a look at how this is effected on the front end. So let's take a look at the TutsPlus category in the blog format. And now you'll notice with my Article Tuts+ that we have the intro text. And then as soon as where that red line appears in our back end editor, we now have in the front end, a Read More button. And then when we click on that, we go into the article itself. So you'll notice here that we are displaying the intro text within the article itself. So you can simply say to Joomla, don't show the intro text within the article. Next up, we have the ability to change the position of the article information. We can have it Above the article, Below the article contents or we could Split it between above and below. Next up, we have the ability to show the category in the info block. Next up, we get to say whether the category that's in the info block is actually linked to the category or not. Next, I can actually decide to show the parent, and also I can link the parent as well. So, this is going to take a look at the article's category that it's in, which is TutsPlus. And then look at the parent category, which is Blog. Cuz don't forget TutsPlus is nested inside of the Blog. And of course that will show up in the info block on the article page. Now we also have the ability to say whether we want to Show or Hide the author in the info block and whether we can link to the author. Now, in order to link to the author, you need to create a contact page for that author. And if you haven't done so, it will just remain as plain text, which we currently haven't done. So for my profile, Lawrence, or Loz who created this Article Tuts+. I have not created a contact page for my profile, and so it won't link to anything. Now we'll come back to this at a later date when we talk about the contacts component. Also, I get to decide whether I show the created date, the modified date, and also the published date within the article's info block. Next up, we get to Show and Hide the navigation on the articles. So this is kinda nice for when you want to iterate through the articles within that category. So you have the Next and Previous buttons at the bottom, that's the navigation. And so you can choose to disable that if you want to. So you also get the ability to show the voting system on an article. This allows the users to rate the article out of five stars. We also have the ability to Show or Hide the Read More button on the category page. And also the category page must have the blog layout, not the list layout. Then if we do decide to show the button, we can optionally specify whether we want to show the article title within the Read More button text. Also if we choose to display the title in the Read More button, we can limit the amount of characters that the title can take up within the button. So I can say 10 characters max and then we get the little ellipsis. Next up we get to Show and Hide the tags on the article. Now we will talk about tags in a later lesson and the tags component. But however I've created a Lessons tag, and I'm going to attach that tag to the Article Tuts+. And then, I'm just going to preview it in the front end and you will be able to see the tags show up. Unless of course, you've specified that you do not want to show the tags. Next up, we can also say whether we want to show the icons. So in the proto style theme, it's a little bit different, we have the gear icon, you click on it. Then you have the menu items, and the menu items have little icons in there. So you can hide those icons if you want to, or show them. And so again what you could do is, either switch the icons off altogether, or you could switch the print icon off on its own or the email icon off on its on. So, you don't necessarily have to switch off all the icons in that menu. Also we have the ability to show how many hits there has been on an article in the info block. Now, we also have the ability to show or hide unauthorized links. So, what does that mean? Well, let's say we have an article here, Article Tuts+. And let's say that this right here is a link, this text is a link to content that is only available to registered users. So currently as it stands, I'm looking at this article as the public. I'm not logged in on the front end. So what that means is, if we set the unauthorized links to No, that link will simply not show. Because I'm not authorized to see the content that that link is providing. However, what if I set it to Yes? Well if you set it to Yes, then even though I'm viewing this article as the public, it will show the link. But when I click on the link, what it will do is ask me to provide a username and password. Or if you've allowed them to, create their own account so they can register themselves. And then, of course, they can look at the content that the link is providing. So, that's what unauthorized links mean. Then on top of that, you also have the positioning of the link. So we can say Above, so this is three links here, so a, b, and c. But what you can do is set that to Below and then those three links right there will be shifted underneath the content of the article. Now please do note that we have already seen some of these options before. So what we're doing here is just setting the defaults, or the global settings for the article's layout, and so on and so forth. But, when you create a new menu item and the menu item type is set to single article and you're linking to a single article. What you can do is go to the Options tab and then you can override the settings that we've applied here in the components configuration. So we're just setting the defaults, not the be-all and end-all. You can have different articles with different information being displayed, or not being displayed. And also a little bit of a different layout if you wish, for each individual article. Now let's have a look at the Editing Layout tab. So firstly, in order for me to actually demonstrate what some of these settings and options do. I've first of all opened up the configuration for the articles component. Then, I've also opened up another tab where I'm editing the Article Tuts+ in the back end. And then also, I want to edit the exact same article in the front end. So what I'm gonna need to do is, first of all, login on the front end. And I'm going to login as the administrator on the front end. Then I'm gonna go to the Tuts+ article. And now I'm gonna drop down the gear icon and there's another menu item here saying Edit. I'm gonna click on that. And now I'm editing the Article Tuts+ in the front end, the back end, and I'm also looking at the configurations of the Articles component as well. Now some of you may have realized that some of these options right here, we have discussed in an earlier lesson, when we created an article. So let's go ahead and take a look at these options. So first of all, we say Show Publishing Options. So would we like to show the Publishing options of the articles by default? So this is the Publishing options right here, under the Publishing tab. And so, at the moment it's enabled. But however, we can disable it by default. So, I can go ahead and save that. And now, the Publishing tab will disappear, like so. Now, you'll notice that under the Configure Edit Screen, we did talk about Show Publishing Options. And at the moment, we're using the Global setting, which is the setting that we've set right here. But however, we can override that setting, so now I can say Yes. So for this specific article, I would like to show the Publishing options in the back end. I'm gonna set that back to Global, and then I'm going to set that back to Yes. So again, we can decide whether we want to show or hide the publishing options, the article options. So this tab right here, do we wanna show that? And then also, are we allowed to show the front end images and links tabs? So currently, that's not enabled, and it's also not enabled on this article as well. I'm using the global settings, so it's disabled. I'm gonna say Yes, by default, I do actually want to show that on the front end. So hit refresh now and by default it's there. And of course, again, you can override all of that and also the images and links on the back end as well. So I'm gonna go ahead and refresh that page right there, so I get everything back. So that's those options. Let's go back to Editing Layout. Now we also have the ability to say whether we want to save the history. So don't forget every time we save an item, it saves a version of that item. Now if you set it to No, it won't save the version of the item and it won't keep a history of that item. When you go to Versions right here, we can see all of the different versions of this item. And then we can step back in time or even forwards in time to a different version. However, I'm gonna say Yes, make sure you save the history. And then you can say how many versions you want before they start overriding one another. Now please don't set this too high, because again, it is gonna take up more space in the database. So 10 is the maximum at the moment. So we have ten versions right here, before they start overriding one another. Then also, we can go ahead and set the default options for the URL target window A, B, and C. So if we go back and take a look at the Images and Links tab. We have Link A, Link B, and Link C, and they're all using the global configuration. So that means it's going to look at this configuration. And it's gonna say, right you want to open the window in the parent window, that's the same for all the links. But I can say, model, for example, on URL A, and so if URL A is saying use global, it will open this link up in the model dialogue box. However, you can override the global setting. You also have the ability to set the default float on the intro image, and also the full article image. So if we take a look at this, you can see that the Intro Image right here is floating to the left. Because, I've said use Global and it says float left right there. So if I look at this in the category, the intro image is in fact floating to the left. The full article image has no float on it. And the reason being is because I've overridden the default, which is float left and I've set it to None. But again, if I set it to the default, it would float to the left. So, thank you for watching me in this lesson. And please join me in the next lesson, where we'll continue on learning about the configurations of the articles component.

Back to the top