Tutorial Joomla – Using the Media Manager for File Downloads
A. Introduction
You might be wondering, “How can I offer files to download off of my website?” With Joomla!, it is possible to do this using an included feature called Media Manager. Files might include PDFs, word documents, or just pictures. The nice part about storing your documents and files through the Media Manager is that Joomla! takes care of uploading everything for you. This means that if you want to insert an image or a file link into one of your content pages, it doesn’t require as much work as using FTP (file transfer protocol) to put the files on your web server.
B. Joomla! Configuration
First off, you have to make sure that your Joomla! website is setup so that it can accept the files that you want to upload.
1. Go to your Administrator page and log in. Then go to the menu bar, select ‘Site’ and then press ‘Global Configuration’ from the list.
Caution: You might ask why there needs to be such settings. The main reason is so that unwanted files are not uploaded to your site which might be dangerous.
2. Click on the ‘System’ tab. Then find the area titled ‘Media Settings’. This is where all of the Media Manager settings are held.
3. Figure out what files you’ll need to upload, and then make sure that their file extension is included in the ‘Legal Extensions’ list. Each file extension is separated by a comma.
Caution: This setting is not always applicable, because the maximum file size supported by PHP might be lower than the one set in Joomla! For more information about how to change the maximum file upload in PHP, go here.
4. Make sure that each of the files you’re planning to upload will be small enough to transfer to the web server. The setting for ‘Maximum Size’ is set at 10 Mb, a good size for most documents you might need to upload.
5. The rest of the settings should generally not be touched.
C. Uploading to the Media Manager
We’re now going to upload our file to our Website and create a folder for the files.
1. Go back up to ‘Site’ on the menu bar and press ‘Media Manager’ from the list.
2. You will see a page that lists all the different files that are already in the Media Manager.
3. At the top of the area titled ‘Files’, there is a textbox for adding our own folder. Type in a name for your folder (mine will be named “documents”) and then press ‘Create Folder’.
4. Now, click on the folder you just created in the center area. There should be nothing in this folder.
5. Go to the bottom of the ‘Files’ area, and press ‘Browse Files’.
6. A dialog box will appear. Navigate to the file on your computer that you want to upload (As an example, the file will be called ‘test.pdf’).
Caution: The file name cannot contain spaces, otherwise it will not upload. It is good practice to keep your file names as descriptively simple as possible, so that they can be used the next time you need them.
7. Press ‘Start Upload’ as soon as the file appears below. The file will transfer as indicated by the progress bar. Your file should appear in the folder now. If it doesn’t, make sure that your settings for the Media Manager are correct in the Global Configuration.
Caution: If the progress bar turns yellow and says ‘Unsupported media type’ then you have not included, in the media settings, the file type of the file you’re trying to upload.
D. Linking to the File in Your Article
Now we need to put a link to our file in an article.
1. Go up to ‘Content’ on the menu bar, and then click ‘Article Manager’.
2. Select the article that you would like to put the file link in, or create a new article by pressing ‘New’ on the toolbar.
3. Once you are in the editor, select the text you want to use for the link to the file. Press the ‘Insert/Edit Link’ button indicated by a chain in the TinyMCE editor toolbox.
Caution: Your default editor might be different if you have changed any settings since installation. You can change the default editor back to TinyMCE in ‘Global Configuration’ under ‘Site’ on the menu bar.
4. A box will pop-up asking information about the link. For the textbox labeled ‘Link URL’, enter the following: /images/documents/test.pdf
Caution: Be sure to change the name of the folder from ‘documents’ and ‘test.pdf’ to whatever you set earlier.
5. The only other thing you might need to change is the ‘Target’ textbox. This specifies where you want the link to open up.
6. Press the ‘Insert’ button to put it on the article page.
Congratulations, now you can serve up all sorts of files to visitors of your website using Joomla!
E. Deleting Files and Folders in the Media Manager
What if you’re done with a file/folder and want to delete it? Follow these instructions.
1. Go to the Media Manager, navigate to the file/folder you want to delete and then press the red ‘x’ next to the name.
2. If you want to do multiple deletions at once, press multiple checkmarks and then press the ‘Delete’ button up on the toolbar.
3. Don’t forget that you need to remove the link in your article, otherwise your user will see a ‘page not found’ error. Go to the article where the link is, highlight the link itself, and then press the ‘Unlink’ button indicated by the broken chain in the TinyMCE editor toolbox.
4. Save and the link will be gone.
Caution: Joomla! will not warn you when you delete something, so make sure you are very careful when using this page. Don’t forget to make periodic backups of all your files!
B. Joomla! Configuration
First off, you have to make sure that your Joomla! website is setup so that it can accept the files that you want to upload.
1. Go to your Administrator page and log in. Then go to the menu bar, select ‘Site’ and then press ‘Global Configuration’ from the list.
Caution: You might ask why there needs to be such settings. The main reason is so that unwanted files are not uploaded to your site which might be dangerous.
2. Click on the ‘System’ tab. Then find the area titled ‘Media Settings’. This is where all of the Media Manager settings are held.
Caution: This setting is not always applicable, because the maximum file size supported by PHP might be lower than the one set in Joomla! For more information about how to change the maximum file upload in PHP, go here.
4. Make sure that each of the files you’re planning to upload will be small enough to transfer to the web server. The setting for ‘Maximum Size’ is set at 10 Mb, a good size for most documents you might need to upload.
5. The rest of the settings should generally not be touched.
6. Press ‘Save’ on the toolbar at the top.
C. Uploading to the Media Manager
We’re now going to upload our file to our Website and create a folder for the files.
1. Go back up to ‘Site’ on the menu bar and press ‘Media Manager’ from the list.
2. You will see a page that lists all the different files that are already in the Media Manager.
3. At the top of the area titled ‘Files’, there is a textbox for adding our own folder. Type in a name for your folder (mine will be named “documents”) and then press ‘Create Folder’.
4. Now, click on the folder you just created in the center area. There should be nothing in this folder.
6. A dialog box will appear. Navigate to the file on your computer that you want to upload (As an example, the file will be called ‘test.pdf’).
Caution: The file name cannot contain spaces, otherwise it will not upload. It is good practice to keep your file names as descriptively simple as possible, so that they can be used the next time you need them.
7. Press ‘Start Upload’ as soon as the file appears below. The file will transfer as indicated by the progress bar. Your file should appear in the folder now. If it doesn’t, make sure that your settings for the Media Manager are correct in the Global Configuration.
Caution: If the progress bar turns yellow and says ‘Unsupported media type’ then you have not included, in the media settings, the file type of the file you’re trying to upload.
D. Linking to the File in Your Article
Now we need to put a link to our file in an article.
1. Go up to ‘Content’ on the menu bar, and then click ‘Article Manager’.
2. Select the article that you would like to put the file link in, or create a new article by pressing ‘New’ on the toolbar.
3. Once you are in the editor, select the text you want to use for the link to the file. Press the ‘Insert/Edit Link’ button indicated by a chain in the TinyMCE editor toolbox.
Caution: Your default editor might be different if you have changed any settings since installation. You can change the default editor back to TinyMCE in ‘Global Configuration’ under ‘Site’ on the menu bar.
4. A box will pop-up asking information about the link. For the textbox labeled ‘Link URL’, enter the following: /images/documents/test.pdf
Caution: Be sure to change the name of the folder from ‘documents’ and ‘test.pdf’ to whatever you set earlier.
5. The only other thing you might need to change is the ‘Target’ textbox. This specifies where you want the link to open up.
6. Press the ‘Insert’ button to put it on the article page.
7. Press ‘Save’ on the toolbar to save the article.
8. Test the link on your site to make sure everything is working fine. You’ve managed to add a link to an article pointing to a file in the Media Manager.Congratulations, now you can serve up all sorts of files to visitors of your website using Joomla!
E. Deleting Files and Folders in the Media Manager
What if you’re done with a file/folder and want to delete it? Follow these instructions.
1. Go to the Media Manager, navigate to the file/folder you want to delete and then press the red ‘x’ next to the name.
2. If you want to do multiple deletions at once, press multiple checkmarks and then press the ‘Delete’ button up on the toolbar.
3. Don’t forget that you need to remove the link in your article, otherwise your user will see a ‘page not found’ error. Go to the article where the link is, highlight the link itself, and then press the ‘Unlink’ button indicated by the broken chain in the TinyMCE editor toolbox.
4. Save and the link will be gone.
Caution: Joomla! will not warn you when you delete something, so make sure you are very careful when using this page. Don’t forget to make periodic backups of all your files!
Post a Comment