1 00:00:00,000 --> 00:00:04,000 At this point, we have a pretty basic Web site up and running, we've got our 2 00:00:04,001 --> 00:00:09,001 categories, all established, we have got our articles more or less in place, 3 00:00:09,002 --> 00:00:13,002 we've created some menus, we've got some dropdowns, it finally started to feel 4 00:00:13,003 --> 00:00:16,003 like something approximating a real site. 5 00:00:16,004 --> 00:00:20,004 So, now that we've gone through the first iteration of the articles, I would 6 00:00:20,005 --> 00:00:25,005 like to show you how we can add some additional features and functionality to these articles. 7 00:00:25,006 --> 00:00:31,006 And one of the things that people ask about a lot is how they can add a PDF to an article. 8 00:00:31,007 --> 00:00:37,007 So I've just received a brochure about this company and they would like this 9 00:00:37,008 --> 00:00:39,008 added to the About page of the Web site. 10 00:00:39,009 --> 00:00:45,009 So we are going to need to go back, edit the About page and add a link to this PDF. 11 00:00:45,010 --> 00:00:48,010 So, I am going to show you how to do that now. 12 00:00:48,011 --> 00:00:49,011 So, in the back end of Joomla! 13 00:00:49,012 --> 00:00:53,012 our first step is going to be to upload this PDF to our Media Manager. 14 00:00:53,013 --> 00:00:58,013 So to do this, what I am going to do is I am going to go to Content>Media Manager, 15 00:00:58,014 --> 00:01:02,014 and I am going to go ahead and make a folder for these. 16 00:01:02,015 --> 00:01:07,015 So, I am going to create a folder, I am going to call it pdf, create that folder. 17 00:01:07,016 --> 00:01:11,016 So there's my folder called PDF and I can put all of my PDFs in there. 18 00:01:11,017 --> 00:01:15,017 And in here, I'm going to go ahead and upload my PDF file. 19 00:01:15,018 --> 00:01:20,018 And so, I am going to go ahead and hit the Upload button, browse for that file, 20 00:01:20,019 --> 00:01:26,019 and that will be on the Desktop, on my Exercise files in Chapter 6, and here's 21 00:01:26,020 --> 00:01:32,020 the kineteco-brochure, go ahead and say Open and Start Upload and we have the 22 00:01:32,021 --> 00:01:33,021 brochure right here. 23 00:01:33,022 --> 00:01:39,022 What we need to do is the path to this particular item, and the way we can do 24 00:01:39,023 --> 00:01:45,023 that is we know that our Media Manager folder is in the images folder inside of Joomla! 25 00:01:45,024 --> 00:01:51,024 and we made a folder called pdf and here's kineteco-brochure.pdf. 26 00:01:51,025 --> 00:01:56,025 So, the full path to this PDF file is images/pdf/kineteco-brochure.pdf, 27 00:01:56,026 --> 00:02:01,026 I am just going to copy this, because this may come in handy. 28 00:02:01,027 --> 00:02:06,027 Now that I have the PDF and a Media Manager, I am going to go to my individual 29 00:02:06,028 --> 00:02:09,028 article and I am going to add a link to that PDF. 30 00:02:09,029 --> 00:02:15,029 So, I am going to go to my Content to my Article Manager, make sure you don't 31 00:02:15,030 --> 00:02:16,030 have any of your filtering turned on. 32 00:02:16,031 --> 00:02:19,031 I'm going to go to my About article. 33 00:02:19,032 --> 00:02:24,032 So I am just going to click on that, and then down here under the Company 34 00:02:24,033 --> 00:02:28,033 Description, I am just going to add another sentence that says Read our 35 00:02:28,034 --> 00:02:33,034 company brochure (PDF). 36 00:02:33,035 --> 00:02:37,035 Always good to warn people that they're going to download a PDF file. 37 00:02:37,036 --> 00:02:40,036 If you want, you can tell them the file size of that PDF. 38 00:02:40,037 --> 00:02:43,037 So we can say it's something like 175K in size. 39 00:02:43,038 --> 00:02:48,038 And so what I need to do is just make a link. 40 00:02:48,039 --> 00:02:52,039 So, I am going to highlight the words Read our company brochure and I'm going to 41 00:02:52,040 --> 00:02:55,040 click on the Link icon here in TinyMCE. 42 00:02:55,041 --> 00:03:00,041 So I am going to click on this link icon and it's going to ask me for the URL for the PDF. 43 00:03:00,042 --> 00:03:05,042 Well, as I said before that URL is images slash (/) and by the way it's the 44 00:03:05,043 --> 00:03:09,043 slash going the other way, backward slashes (/) are here, because I'm working on PC; 45 00:03:09,044 --> 00:03:12,044 images/pdf/kineteco-brochure.pdf. 46 00:03:12,045 --> 00:03:20,045 Then you can choose to open this PDF and the same window or in a different window, 47 00:03:20,046 --> 00:03:25,046 it doesn't really matter what you pick, it's just a matter of being consistent. 48 00:03:25,047 --> 00:03:27,047 I like to open PDFs in a new window as well. 49 00:03:27,048 --> 00:03:34,048 So I am going to go ahead and say Insert and then I am going to say Save & Close. 50 00:03:34,049 --> 00:03:38,049 And now when I go to the front end of the Web site and I go to the About page, 51 00:03:38,050 --> 00:03:40,050 I should be able to scroll on down. 52 00:03:40,051 --> 00:03:43,051 Here is the link to read the company brochure. 53 00:03:43,052 --> 00:03:50,052 When I click this, this will open a new tab and here is my PDF and I have 54 00:03:50,053 --> 00:03:53,053 that all opened in a new tab, came up right away, because it's nice and small 55 00:03:53,054 --> 00:03:54,054 in terms of file size. 56 00:03:54,055 --> 00:03:59,055 Sometimes people are given these PDFs from their print designers, though they 57 00:03:59,056 --> 00:04:03,056 output that as ultimately going to be going to a printing press for example and 58 00:04:03,057 --> 00:04:06,057 they tend to be very, very large in file size. 59 00:04:06,058 --> 00:04:11,058 In fact this brochure that I got was originally 10.5 megabytes and there is just 60 00:04:11,059 --> 00:04:15,059 no need for that on the Web, we don't really need that high-resolution PDF just 61 00:04:15,060 --> 00:04:17,060 for people to take a look at here. 62 00:04:17,061 --> 00:04:22,061 So, I reduced that file size down to 175K, it still looks great on my browser. 63 00:04:22,062 --> 00:04:27,062 So you may want to do that if your clients hands you a PDF and says post it, 64 00:04:27,063 --> 00:04:31,063 and it seems to have a big file size, particularly if you are going to wind up 65 00:04:31,064 --> 00:04:34,064 working with mobile devices that may be on a slow Internet connection and people 66 00:04:34,065 --> 00:04:39,065 who have data plans, be sensitive to the file size of your PDFs and try to get 67 00:04:39,066 --> 00:04:41,066 them as small as possible, so people have a quick download. 68 00:04:41,067 --> 00:04:46,067 So, that's how you add a PDF to your Web site.