1 00:00:00,000 --> 00:00:06,000 So I'm looking at the Solar Blog page for my Web site, and I've a series of articles here. 2 00:00:06,001 --> 00:00:10,001 They have got the big title and they have got a little bit of text here, 3 00:00:10,002 --> 00:00:14,002 not all of them with Read More buttons but some of them have Read more buttons that 4 00:00:14,003 --> 00:00:19,003 we can click on to go to the full article with a big picture down here on the bottom. 5 00:00:19,004 --> 00:00:21,004 The page itself doesn't look terribly interesting. 6 00:00:21,005 --> 00:00:25,005 One of the things that I'd like to add to this page is I would like to include 7 00:00:25,006 --> 00:00:31,006 a tiny version of that image that I have associated with most of these articles, 8 00:00:31,007 --> 00:00:36,007 and have that show here on this big Blog page and then once I click on the link 9 00:00:36,008 --> 00:00:40,008 I'd like to go to a page that just has the large version of the image on it. 10 00:00:40,009 --> 00:00:45,009 I don't want to see the small version of the image when I go to the full-size page here. 11 00:00:45,010 --> 00:00:51,010 I'd also like some way that these images become standardized, so that the small 12 00:00:51,011 --> 00:00:55,011 images are all of more or less the same size, the big images are more or less of 13 00:00:55,012 --> 00:00:59,012 the same size that they occur more or less on the same places on the page. 14 00:00:59,013 --> 00:01:03,013 So to do that, there is actually an interface for doing this inside of Joomla! 15 00:01:03,014 --> 00:01:08,014 and we haven't taken a look at that yet, so let's go ahead and look at that now. 16 00:01:08,015 --> 00:01:13,015 If I go to Content and I go to the Article Manager and I'm going to go ahead 17 00:01:13,016 --> 00:01:17,016 and filter my articles here just to show me the articles that are in the Solar blog. 18 00:01:17,017 --> 00:01:22,017 So I'm going to Category and choose Solar from my list, and I have a list of my 19 00:01:22,018 --> 00:01:25,018 four articles here that are part of the Solar blog. 20 00:01:25,019 --> 00:01:27,019 And remember that two of these are featured; 21 00:01:27,020 --> 00:01:29,020 they are showing up on the News & Info page. 22 00:01:29,021 --> 00:01:34,021 So if I click on let's say Farmers installing solar power in record numbers, 23 00:01:34,022 --> 00:01:36,022 this is my article as it currently stands. 24 00:01:36,023 --> 00:01:39,023 I have my introductory text here at the top. 25 00:01:39,024 --> 00:01:43,024 The red line indicates the Read More break, and so that's where the button goes, 26 00:01:43,025 --> 00:01:47,025 that says Read More, I click on it I go to a full version of the article that 27 00:01:47,026 --> 00:01:49,026 has the image here underneath. 28 00:01:49,027 --> 00:01:53,027 And so far I haven't scroll down the page to show you the rest of what's here, 29 00:01:53,028 --> 00:01:55,028 but there is in fact a little bit more. 30 00:01:55,029 --> 00:02:01,029 Down here at the bottom of the page is this panel of Images and Links, and so we 31 00:02:01,030 --> 00:02:06,030 can set some standardized images or standardized links for each of our Joomla! 32 00:02:06,031 --> 00:02:10,031 articles that always show up in the same places on these articles, 33 00:02:10,032 --> 00:02:12,032 they will always appear the same kind of way. 34 00:02:12,033 --> 00:02:16,033 So that's kind of nice because it adds a little professional polish to the site 35 00:02:16,034 --> 00:02:19,034 in that the placement of these images is always the same. 36 00:02:19,035 --> 00:02:24,035 So what I'm going to do is I'm going to set up an intro image and a full article 37 00:02:24,036 --> 00:02:27,036 image for these articles now. 38 00:02:27,037 --> 00:02:31,037 And the way I'm going to do that is where it says Intro Image, 39 00:02:31,038 --> 00:02:34,038 we have to choose one. So I'll hit my Select button. 40 00:02:34,039 --> 00:02:39,039 This will put me into my Media Manager and I don't have any of these small 41 00:02:39,040 --> 00:02:41,040 versions of these images available. 42 00:02:41,041 --> 00:02:45,041 If I go into my Blog folder though, I can certainly upload these. 43 00:02:45,042 --> 00:02:51,042 I can hit my Browse button and I'm going to go to Exercise Folder and Chapter 6, 44 00:02:51,043 --> 00:02:55,043 and you see that I have already prepared for you three small versions of the 45 00:02:55,044 --> 00:02:58,044 pictures that appear in the solar blog. 46 00:02:58,045 --> 00:03:03,045 If you select these and just hold down the Shift key we can go ahead and say Open 47 00:03:03,046 --> 00:03:07,046 and Upload all of them at once, which is kind of nice. 48 00:03:07,047 --> 00:03:11,047 And now what I can do is choose the small version of the farmer picture, 49 00:03:11,048 --> 00:03:15,048 which is this one here, I know that because I can roll my mouse over it and the tool tip 50 00:03:15,049 --> 00:03:17,049 tells me this is the -sm or the small version. 51 00:03:17,050 --> 00:03:21,050 I'm going to go ahead and pick that and say Insert. 52 00:03:21,051 --> 00:03:25,051 And then it's going to ask me how I want the image floated. 53 00:03:25,052 --> 00:03:28,052 This is set Globally in the article option, so you can adjust this on a 54 00:03:28,053 --> 00:03:30,053 picture by picture basis. 55 00:03:30,054 --> 00:03:35,054 But if you do it on a picture by picture basis, you then have to go through and 56 00:03:35,055 --> 00:03:39,055 edit those if the boss comes back to you and says, oh by the way, all those 57 00:03:39,056 --> 00:03:43,056 pictures that are on the left, now I'd like them all on the right. 58 00:03:43,057 --> 00:03:46,057 So I'll show you how to change that global setting in a moment. 59 00:03:46,058 --> 00:03:54,058 We'll put it in some Alt text, Some solar panels in the farmer's field, 60 00:03:54,059 --> 00:03:58,059 and likewise down here I'm going to do the same for the full article image. 61 00:03:58,060 --> 00:04:01,060 Even though we already have the full article image appearing inside of the 62 00:04:01,061 --> 00:04:04,061 article, I'm going to put it down here now. 63 00:04:04,062 --> 00:04:10,062 So here I'm going to go to the full-size version of this picture, and I'm going 64 00:04:10,063 --> 00:04:12,063 to click on this to insert it. 65 00:04:12,064 --> 00:04:16,064 I'm going to actually take my same Alt tag from here and paste it down here. 66 00:04:16,065 --> 00:04:21,065 And then inside of my article the picture that I have here now, I'm not going to 67 00:04:21,066 --> 00:04:26,066 need this anymore because what will happen is the big picture will be fed in to 68 00:04:26,067 --> 00:04:29,067 this article through the interface down here at the bottom of the page. 69 00:04:29,068 --> 00:04:34,068 So I'll go ahead and now just delete that image that I have here, and I'm going 70 00:04:34,069 --> 00:04:36,069 to go ahead and say Save & Close. 71 00:04:36,070 --> 00:04:42,070 And now when I go to the front end of the Web site and I hit Refresh, I have my 72 00:04:42,071 --> 00:04:49,071 small image here inside of my article followed by my text and if I click on the 73 00:04:49,072 --> 00:04:55,072 Read More link I go to the article where I have the full-size image here. 74 00:04:55,073 --> 00:04:58,073 What's happening over here in the corner is that this image is quite large, 75 00:04:58,074 --> 00:05:03,074 the Login form is sitting on top of the image and that's why you see the corner of 76 00:05:03,075 --> 00:05:04,075 the image cut out here. 77 00:05:04,076 --> 00:05:08,076 I've told you for a while I'm going to be getting rid of this Login form which 78 00:05:08,077 --> 00:05:09,077 will solve that problem. 79 00:05:09,078 --> 00:05:14,078 The other thing that would solve this problem is to scale this image and make it a bit smaller. 80 00:05:14,079 --> 00:05:18,079 Right now it's 900 pixels wide, you could certainly make it a smaller image for your Web site. 81 00:05:18,080 --> 00:05:21,080 And then underneath of that is all of the text associated with this 82 00:05:21,081 --> 00:05:25,081 particular article. So that's a nice presentation. 83 00:05:25,082 --> 00:05:31,082 It's very, very consistent and if we've sized our images consistently 84 00:05:31,083 --> 00:05:33,083 in Photoshop before we upload them into Joomla! 85 00:05:33,084 --> 00:05:37,084 then we'll have a nice professional effect for the solar blog. 86 00:05:37,085 --> 00:05:43,085 So what I'm going to do now is I'm going to edit the Announcing K-Eco Mini Panels, 87 00:05:43,086 --> 00:05:48,086 the Embry house, I'm going to go ahead and edit those exactly the same way. 88 00:05:48,087 --> 00:05:52,087 I'm going to call out the small and the large versions of the image and delete 89 00:05:52,088 --> 00:05:54,088 the image that's already present in the article. 90 00:05:54,089 --> 00:05:59,089 And that way my Solar blog will be configured with these images, 91 00:05:59,090 --> 00:06:02,090 and I'm going to go ahead and do that now. I'll catch you on the other side. 92 00:06:02,091 --> 00:06:09,091 Okay, so I just finished configuring this last article, and now I'm going to hit 93 00:06:09,092 --> 00:06:14,092 Save & Close and if I refresh the page here on my Solar Blog you'll see that 94 00:06:14,093 --> 00:06:16,093 I have some small pictures. 95 00:06:16,094 --> 00:06:20,094 They appear in the same place here, that's looking great, and then if I click on 96 00:06:20,095 --> 00:06:25,095 the full version of the article, in all cases I've got the larger size picture 97 00:06:25,096 --> 00:06:28,096 here with the text that's located underneath. All right! 98 00:06:28,097 --> 00:06:31,097 So I promised you that I'd show you how you can consistently float these pictures 99 00:06:31,098 --> 00:06:37,098 so that they appear the same way in all of these articles globally in one fell swoop. 100 00:06:37,099 --> 00:06:41,099 So the way that we do that is here inside the back end of Joomla! 101 00:06:41,100 --> 00:06:48,000 if we go to Options and then from Options we're going to go to the Editing Layout. 102 00:06:48,001 --> 00:06:52,001 This is controlling the layout of the article editing page, and the 103 00:06:52,002 --> 00:06:55,002 Administrator Images and Links, these are the links that are occurring at 104 00:06:55,003 --> 00:06:57,003 the bottom of those articles. 105 00:06:57,004 --> 00:07:02,004 And so we've got that turned on right now so that we have that available to us. 106 00:07:02,005 --> 00:07:04,005 If you're not using this feature in Joomla! 107 00:07:04,006 --> 00:07:08,006 all of those images and links underneath the article you can turn this off, 108 00:07:08,007 --> 00:07:12,007 and the way you would do that is just hit this No button here and save these 109 00:07:12,008 --> 00:07:16,008 settings, and all of those extra fields at the bottom of that page for editing 110 00:07:16,009 --> 00:07:18,009 an article would all go away. 111 00:07:18,010 --> 00:07:23,010 Scrolling on down here a little bit further you can configure the way your links 112 00:07:23,011 --> 00:07:26,011 are going to open in a new window, or open in the same window. 113 00:07:26,012 --> 00:07:30,012 I didn't use the links so I'm just going to leave those set the way they are. 114 00:07:30,013 --> 00:07:34,013 And then the last part here is the Intro Image Float and the Full Text Image Float. 115 00:07:34,014 --> 00:07:39,014 Right now these are both set to float to the Left, what I'm going to do is set 116 00:07:39,015 --> 00:07:40,015 them to float to the right. 117 00:07:40,016 --> 00:07:44,016 And for the Full Text I'm actually going to say no float at all, 118 00:07:44,017 --> 00:07:48,017 because those are so big I just want it to appear at the top of the article. 119 00:07:48,018 --> 00:07:53,018 So I'm going to go ahead and say Save & Close, and now when I go back 120 00:07:53,019 --> 00:07:55,019 to my Solar blog page these images look like they haven't moved. 121 00:07:55,020 --> 00:07:57,020 That is possibly either a bug in Joomla! 122 00:07:57,021 --> 00:08:01,021 or it could be that this template is not configured to float these images correctly. 123 00:08:01,022 --> 00:08:07,022 But then if I go into the full-size article, there is my image, and now that 124 00:08:07,023 --> 00:08:11,023 I'm not floating these, look at that, they don't appear in this right hand column 125 00:08:11,024 --> 00:08:15,024 anymore and they are scaling much better to the size of the Web page 126 00:08:15,025 --> 00:08:16,025 so that definitely helps up. 127 00:08:16,026 --> 00:08:20,026 We can check out some of these other pages here in the Solar blog as well. 128 00:08:20,027 --> 00:08:24,027 So if we look at the Mini Panels here that is also looking really, really good. 129 00:08:24,028 --> 00:08:26,028 So this functionality in Joomla! 130 00:08:26,029 --> 00:08:32,029 is not a full CCK, a full Content Construction Kit, it's a very, very minor 131 00:08:32,030 --> 00:08:37,030 addition to Joomla!'s article editing capabilities that would allow you to put 132 00:08:37,031 --> 00:08:40,031 in a small version of the picture and a large version of the picture 133 00:08:40,032 --> 00:08:45,032 in a consistent format inside of a blog layout like this.