1 00:00:00,000 --> 00:00:04,000 Look at this home page, it's definitely improved over the last few videos, 2 00:00:04,001 --> 00:00:08,001 but it's certainly lacking something special, and one of the things it's really lacking 3 00:00:08,002 --> 00:00:12,002 besides color is, it's lacking a photograph. 4 00:00:12,003 --> 00:00:16,003 So what I'd like to do is add a random image module to the home page 5 00:00:16,004 --> 00:00:22,004 of this Web site, and I'm going to put that over in the left column and I will have 6 00:00:22,005 --> 00:00:23,005 a image that will rotate. 7 00:00:23,006 --> 00:00:27,006 It's not a fade-in, fade-out slideshow that comes with Joomla! 8 00:00:27,007 --> 00:00:32,007 it's an image that it chooses from a directory of images, and every time the page 9 00:00:32,008 --> 00:00:37,008 is refreshed a different photo is chosen or at least one is picked at random and 10 00:00:37,009 --> 00:00:39,009 usually it's a different photograph. 11 00:00:39,010 --> 00:00:44,010 So, let's go ahead and try putting a random image on the left side of the screen 12 00:00:44,011 --> 00:00:48,011 and we'll see if that improves the look of this particular Web page. 13 00:00:48,012 --> 00:00:49,012 So here in the back end of Joomla! 14 00:00:49,013 --> 00:00:55,013 I am going to go to my Extensions>Module Manager and I am going to create a new module, 15 00:00:55,014 --> 00:01:02,014 this time this will be the Random Image module down here under R, 16 00:01:02,015 --> 00:01:06,015 and I am going to give this a title of Random Image, but I am going to hide that title 17 00:01:06,016 --> 00:01:11,016 because nobody needs to see that, and the position for this is going to be 18 00:01:11,017 --> 00:01:17,017 under Protostar, and I am going to look for the left side of the page, position-8. 19 00:01:17,018 --> 00:01:23,018 And then under Basic Options I can indicate the type of image, the folder where 20 00:01:23,019 --> 00:01:27,019 it's located and a width and a height, but unfortunately I don't have the 21 00:01:27,020 --> 00:01:28,020 ability to upload images right here. 22 00:01:28,021 --> 00:01:33,021 So, I am going to just say Save & Close for the moment and I am going to jump 23 00:01:33,022 --> 00:01:37,022 into my Media Manager, so I can create that folder and upload a bunch of images to it. 24 00:01:37,023 --> 00:01:44,023 So under Content>Media Manager, I am going to make a new folder and I am going 25 00:01:44,024 --> 00:01:49,024 to call that folder random, so this will be inside of images/random, 26 00:01:49,025 --> 00:01:54,025 create the folder, and I am going to go into the random folder and I am going to upload 27 00:01:54,026 --> 00:01:59,026 some pictures, I am going to hit the Upload button here and then say Browse, 28 00:01:59,027 --> 00:02:05,027 and if I go to my Chapter 8 folder, to folder number five, I am going to go ahead and 29 00:02:05,028 --> 00:02:09,028 select the five images that I have here and say Open. 30 00:02:09,029 --> 00:02:14,029 I have already gone through in Photoshop and I have trimmed up all those pictures, 31 00:02:14,030 --> 00:02:18,030 so that they are exactly the same height and width and I am going to 32 00:02:18,031 --> 00:02:22,031 say Start Upload, so boom, there we go, I've got all five of my pictures 33 00:02:22,032 --> 00:02:24,032 uploaded here to the Media Manager. 34 00:02:24,033 --> 00:02:29,033 Now I am going to go back to my Module Manager, Extensions>Module Manager and 35 00:02:29,034 --> 00:02:34,034 I am going to go back to my Random Image module, and to the Basic Options tab, 36 00:02:34,035 --> 00:02:40,035 and here I am going to type in my Image Folder, which is images/random. 37 00:02:40,036 --> 00:02:44,036 I could set up a link if I want, it would be no matter what image was displayed 38 00:02:44,037 --> 00:02:48,037 it would go to the same page on the Web site, I probably don't really want to do that, 39 00:02:48,038 --> 00:02:51,038 so I am just going to leave that blank. 40 00:02:51,039 --> 00:02:55,039 And as for a width and a height the image module sort of defaults to this 41 00:02:55,040 --> 00:03:00,040 32 pixel wide sort of pix or type of thing if you don't specify a width and a height, 42 00:03:00,041 --> 00:03:05,041 so I am going to specify a width of 200 pixels and I am going to leave 43 00:03:05,042 --> 00:03:07,042 the height alone, it'll scale that appropriately. 44 00:03:07,043 --> 00:03:13,043 Finally, under my Menu Assignment I want this to go on only the pages selected, 45 00:03:13,044 --> 00:03:18,044 I am going to select No pages and then just check off the home page, that's the 46 00:03:18,045 --> 00:03:23,045 only page I want this random image to show up on, and I am going to go ahead 47 00:03:23,046 --> 00:03:24,046 and say Save & Close. 48 00:03:24,047 --> 00:03:28,047 Now when I come back and I refresh the front end of the Web site here's my random 49 00:03:28,048 --> 00:03:33,048 image showing up over here on the side, and as I hit my Refresh button, I get a 50 00:03:33,049 --> 00:03:37,049 different picture loading each time and I have something of a three-column 51 00:03:37,050 --> 00:03:40,050 layout here which is kind of nice. 52 00:03:40,051 --> 00:03:44,051 If I wanted this to show up on other pages of the Web site and I could certainly do that, 53 00:03:44,052 --> 00:03:47,052 I could allow that random image module to display on other pages 54 00:03:47,053 --> 00:03:49,053 of the Web site as well. 55 00:03:49,054 --> 00:03:53,054 But one other way that I could energize this page would be to actually have this 56 00:03:53,055 --> 00:03:56,055 picture and maybe not in this column, but what if it appeared here right 57 00:03:56,056 --> 00:04:00,056 underneath the content, and I'll show you how to do that in the next video.