Multimedia cho Joomla part 29 ppt

Chapter 9 [ 287 ] When you have clicked on Save, you will be taken back to the Article Manager screen. We want to repeat this process, so we have at least three to four articles displayed. Hence, use the "Copy" feature on the Article Manager screen in order to clone the article: 1. In the Article Manager, click on the left-hand side radio button next to the article you wish to copy. 2. Click on the "Copy" article icon at the top-right of the screen. 3. Choose the section and category you wish to copy the article into (in our case, "General – Content"), and then click on Save. 4. Click on the title of the new article to edit it. Once in the Edit Article screen, adjust the Title and Alias of the article (Article 2, 3, 4, and so on) and make sure they are set to a published state and viewable on the front page). If all of your copied articles have been published, when you look at the frontend of your site, you should now see two of them shown on the Joomla! front page. This is because we told our "Home" menu link to display two articles only, and to show two columns: This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 288 ] You will notice that the articles have been displayed randomly. It is possible to show them by most recent article rst, the physical ordering of them in the Article Manager, or by alphabetical order. These display and ordering congurations are all made in the "Home" menu link, under the Parameters (Advanced) section: Adding a module to display our latest news There are a number of other features available for the front page; let's add a module extension that nicely displays articles that are located within a certain category. The module we will use for this is called "ThumbsUp" and is available from the Joomla! Extensions page. Before we can use this module, we need some content to be displayed within it. Repeat the process you used to create and copy articles, but this time make sure they reside within the section labeled "News" and the category labeled "Latest" and are published. Do not publish them on the front page though. Feel free to add any images into your content items in order to add some color and interest to the pages. This module pulls in news from certain sections and categories. Before editing this module, make a note of the ID number with the section labeled "News" and the category labeled "Latest". These can be found under the respective managers for those areas. Follow these steps: 1. Visit http://extensions.joomla.org and search for "ThumbsUp". 2. Visit the extension developer's website and download the extension to your computer. (I will use the stable 1.3 version.) This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 9 [ 289 ] 3. Upload this extension in the Joomla! administration, using the Extension|Install / Uninstall feature. 4. In the administration, navigate to Extensions|Module Manager, and click on the title of the "Latest Articles with Thumbnails" module to edit it. 5. Adjust the parameters of the following: This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 290 ] Feel free to adjust any other parameters that you require. If you look at the front page of your website now, it is starting to get some depth to it quickly: Adding the date and time There are a number of ways to add a time and date function to your Joomla! site. This can be a useful feature to users in news, magazine, or busy web portals. Some commercial templates may already contain this feature, and simply require it to be activated. Others, like the JA_Purity template, do not have this option, so we will proceed to include it. 1. Method 1 Insert the correct PHP, JavaScript, and / or HTML code into your template manually. There are a number of pre-built scripts available on the Web that display the time and date on your site pages. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 9 [ 291 ] 2. Method 2 Use an available Joomla! Extension such as the Date and Time module. Here are the steps: Search the Joomla! Extensions area for "Time" at http://extensions.joomla.org. On the results page, click on the category labelled Date & Time, and this module will be displayed. Visit the extension developer's website and download the extension to your computer. Upload this extension in the Joomla! administration, using the Extension|Install / Uninstall feature. In the administration, navigate to Extensions|Module Manager, and click on the Title of the "Date2" module to edit it. Adjust the Module Parameters as you wish. I am going to use the "JavaScript" feature to check the time (so seconds show in real time), and I will publish the module to the "Left", which will show in a left column in our template. I am also going to turn off the module Title: It is worth noting that these time and date features will work off the server time. Hence, if working locally, you will see your local computer time. Adding a search feature All sites that have any form of content need a search feature to allow users to nd this easily. The JA_Purity template has built-in styling for a search box already included within the template's CSS, so adding a new search feature to our site will be very easy. 1. In the administration, navigate to the Extensions|Module Manager screen. 2. Click on the New icon at the top-right of the screen to create a new module. ° ° ° ° ° This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 292 ] 3. From the available list of options, select the Search link and click on the text in order to load a new search module: 4. Make sure the title is not displayed, but the module is enabled. It will need to be published in user4 position, which will display it at the top-right of our web page: 5. Click on Save on that module, and if you look at the frontend of the site, you will see your new search box displayed below the font size controls: This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 9 [ 293 ] Personally, I feel the default black background is a bit dark to see, so a quick change to the template CSS le can adjust that. I will set the search background to white, and the search text to black: #ja-search .inputbox { width: 120px; border: 1px solid #333333; padding: 3px 5px; color: #000000; background: #FFFFFF; font-size: 92%; } Remember to save your changes and you should see these reected in your site. Adding images As you have seen throughout the course of this book, images can be easily added to Joomla! Articles and Modules and formatted as you require. There are, however, some powerful image extensions for Joomla! that we will now utilize within our site. Adding an image gallery Image galleries are one of the most popular extensions at Joomla.org, hence there are a number of excellent options available. Hopefully, you have had a good read of Chapter 4, Adding and Managing Image Content, and have found image solutions you require for your projects. For this tutorial, I am going to utilize a few extensions to display images throughout the site. Image gallery using Phoca Gallery Phoca Gallery is a heavyweight contender for displaying beautiful photo galleries in Joomla!. It is a feature-packed solution, so much so that you could probably write a book on it in itself! That said, we are quickly going to add this to our site in order to create a feature rich photo gallery using this component, module, plugin. I will cover the basic steps, however for detailed support the developer's website and Joomla! Forums will be able to provide a wealth of knowledge: 1. Search the Joomla! Extensions area for "Phoca Gallery" at http://extensions.joomla.org. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 294 ] 2. Visit the extension developer's website and download the following extensions to your computer: Phoca Gallery Component: Powers the main Phoca Gallery features. Phoca Gallery Search Plugin: Allows your Joomla! search feature to also search Phoca Gallery images. Phoca Gallery Slideshow Plugin: Displays a slideshow of images from a selected Phoca Gallery category {pgslideshow id= |width= |height= |delay= |image= }. For an image, O: original, L: large, M: medium, S: small. Example: {pgslideshow id=1|width=100|height=100|delay=3000|im age=M} . Phoca Gallery Image Module: Displays random images from the Phoca Gallery Component. 3. Upload these extensions to the Joomla! administration using the Extension|Install / Uninstall feature. (Tackle the component last as you will need to run an installer for the component once it has been uploaded). ° ° ° ° This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 9 [ 295 ] 4. In the administration, navigate to Extensions|Plugin Manager, and enable the search and slideshow plugins. 5. In the administration, navigate to Components|Phoca Gallery, and on the main Control Panel page, click on the icon "Categories". Set up a new category by clicking on the "New" icon at the top-right of the page. Let's give this a title of Images and click on Save on that page (note that you can revisit all of these options to dene them as you require). 6. Adding images can be done using various methods, with Phoca allowing you to use a Flash-based and Java-based upload feature to upload multiple images quickly. I will use the multiple image feature to add a number of images into my new "Images" Category. The rst step is to upload the images, and then once they are uploaded, you associate them with a category. This provides a mail image resource for future reference. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 296 ] Once your images have been uploaded, choose the "Images" Category (that we will put them into) and click on the Save button at the top of the screen. Depending on the number of images you upload, you will probably see a processing screen appear for a period. The page should refresh after processing and you will see your new images loaded into the Image area: To display these in your website, we need to create a new menu link to this gallery. Navigate to Menu|Main Menu, and create a new menu item to Phoca Gallery|Phoca Gallery Category Layout. The new menu item edit page will show and we need to give our menu link a title called "Image Gallery". On the right-hand side of this screen are the available parameters for the new Phoca Gallery menu link. Firstly, we need to choose the category to link to—Images. The following parameters contain a vast array of options, and can allow you to manipulate your gallery colors, layout, features, and so on. You can set these at a global level in Phoca Gallery, but having overrides at the menu item level means that each gallery (or link to a gallery) that you create can contain the various options you require. For now, let's click on Save on this menu item and see the results. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 . 9 [ 291 ] 2. Method 2 Use an available Joomla! Extension such as the Date and Time module. Here are the steps: Search the Joomla! Extensions area for "Time" at http://extensions .joomla. org. On. tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 296 ] Once your images have been uploaded, choose the "Images" Category (that we will put them. sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 292 ] 3. From the available list of options, select the Search link and click on