1 00:00:00,000 --> 00:00:05,000 So in the last video I added this random image to the home page and every time 2 00:00:05,001 --> 00:00:09,001 I refresh the page I get a different picture that will load here or at least 3 00:00:09,002 --> 00:00:13,002 it picks one at random and sometimes that's a different picture and sometimes 4 00:00:13,003 --> 00:00:14,003 it's the same picture. 5 00:00:14,004 --> 00:00:18,004 But what I suggested at the end of the last video was, what if instead of putting 6 00:00:18,005 --> 00:00:23,005 this over here in the left column, what if I had this picture appear right here 7 00:00:23,006 --> 00:00:29,006 underneath the content for the home page, maybe as a large format picture. 8 00:00:29,007 --> 00:00:33,007 Wouldn't that be kind of cool? And in fact that is possible. 9 00:00:33,008 --> 00:00:38,008 What we need to do though is we need to take our module and make our module 10 00:00:38,009 --> 00:00:41,009 appear inside of an article. 11 00:00:41,010 --> 00:00:44,010 Normally modules only appear in module positions. 12 00:00:44,011 --> 00:00:48,011 Those module positions are determined by the template, and I showed you how to 13 00:00:48,012 --> 00:00:52,012 figure out where those module positions were in the first video of this chapter, 14 00:00:52,013 --> 00:00:57,013 but you can also make modules appear inside of articles and occasionally, in a 15 00:00:57,014 --> 00:01:00,014 situation like this, that's quite helpful. 16 00:01:00,015 --> 00:01:04,015 So what we are going to do is a two-step process. 17 00:01:04,016 --> 00:01:09,016 First of all I am going to edit my article and I am going to add a little piece 18 00:01:09,017 --> 00:01:14,017 of code I'll show and I'll assign a name for that particular module position, 19 00:01:14,018 --> 00:01:16,018 then I am going to go to the back end of Joomla! 20 00:01:16,019 --> 00:01:20,019 in the Module Manager and I will take my module for the random image 21 00:01:20,020 --> 00:01:26,020 and assign it to the module position that we just created, so let's go ahead and do that now. 22 00:01:26,021 --> 00:01:32,021 In the back end of Joomla! I am going to go to Content> Article Manager and I am going to find 23 00:01:32,022 --> 00:01:35,022 my home page article, it's this one here called Harnessing wind and sun for a 24 00:01:35,023 --> 00:01:37,023 cleaner, energized planet. 25 00:01:37,024 --> 00:01:42,024 At the end of the paragraph here I am going to add the following code, 26 00:01:42,025 --> 00:01:49,025 it's a curly bracket followed by the word loadposition, all one word, followed by a 27 00:01:49,026 --> 00:01:51,026 module position name. 28 00:01:51,027 --> 00:01:55,027 I would not want to use an existing module position name, I am going to have to 29 00:01:55,028 --> 00:01:59,028 create a new one here for this particular module position, I am just going to 30 00:01:59,029 --> 00:02:03,029 call it random, because that's what going there and then a curly bracket 31 00:02:03,030 --> 00:02:05,030 to close everything off. 32 00:02:05,031 --> 00:02:11,031 So curly bracket loadposition, all one word, followed by a module 33 00:02:11,032 --> 00:02:14,032 position name and you can make that up, you can call it anything you want, 34 00:02:14,033 --> 00:02:20,033 you could call this George or Sally or Martha, but it's not necessarily self-documenting. 35 00:02:20,034 --> 00:02:24,034 By calling it random I have a pretty good sense of what kind of module is going 36 00:02:24,035 --> 00:02:27,035 to go there, it's the random image module, go ahead and say Save & Close. 37 00:02:27,036 --> 00:02:33,036 And now I need to assign the module to that position, so I am going to go to 38 00:02:33,037 --> 00:02:39,037 Extensions>Module Manager and down here you'll find the Random Image, I am going 39 00:02:39,038 --> 00:02:45,038 to click on that, and instead of position-8 I am going to actually type in this box 40 00:02:45,039 --> 00:02:49,039 that appears when I click the Down Arrow, I am going to type in the word random, 41 00:02:49,040 --> 00:02:55,040 that is the position that I just made and I am going to go ahead and hit 42 00:02:55,041 --> 00:02:59,041 my Enter key on my keyboard, and that will take that position and put it there 43 00:02:59,042 --> 00:03:03,042 into the position slot here, it won't be anything that I'd pick off the dropdown 44 00:03:03,043 --> 00:03:05,043 I'll actually have to type it in. 45 00:03:05,044 --> 00:03:10,044 The other thing I am going to need to change is here under Basic Options, 46 00:03:10,045 --> 00:03:14,045 I have originally set this width 200 pixels, but my images are actually set up to be 47 00:03:14,046 --> 00:03:20,046 750 pixels wide, so I am just going to change this to 750, and then I am going 48 00:03:20,047 --> 00:03:21,047 to say Save & Close. 49 00:03:21,048 --> 00:03:27,048 Now when I refresh the home page my random image appears here at the bottom of 50 00:03:27,049 --> 00:03:34,049 the page directly underneath the content, and as I refresh the page I get a 51 00:03:34,050 --> 00:03:37,050 different picture showing up there on the bottom of the page. 52 00:03:37,051 --> 00:03:43,051 Also remember that this Protostar template is responsive, so as I make my page 53 00:03:43,052 --> 00:03:49,052 smaller notice that my image will scale accordingly, so there we go, 54 00:03:49,053 --> 00:03:54,053 we're watching that image just scale right here and as we get really small towards 55 00:03:54,054 --> 00:03:58,054 mobile phone size, this image will continue to shrink. 56 00:03:58,055 --> 00:04:02,055 So that's a very nice treatment here for this page, I really like the way that 57 00:04:02,056 --> 00:04:07,056 that's turned out, and that's how you embed a module inside of an article.