Chapter 4 [ 87 ] For this example, we will use the Joomla! default TinyMCE editor: Firstly choose the article you wish to edit, or create a new article and go into the Edit Article screen. As when using the Joomla! Image button technique, we need to position the cursor in an area of the article where we want the image to appear. In the editor toolbar, you will see numerous icons to perform editor functions. Look for one with a small photograph image on it: When clicked on, this icon will open a pop-up window, which allows you to enter in the image location and properties. The main difference between this window and the earlier mentioned Joomla! Image button technique is that we manually need to enter in the image location in this area, and do not have the ability to upload images using this window: This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Adding and Managing Image Content [ 88 ] The elds available are: Field Description Image URL The Path to your image location. Image description The alt text for your image. Alignment Alignment of the image. Dimensions The height and width of the image. Border A border attribute for the image. Vertical space Vertical spacing around the image. Horizontal space Horizontal spacing around the image. Using this method to input images into your content articles means that you have to manually enter the location to your site images (default is /images/stories/) and other properties into the elds provided, but it saves you having to enter the image code manually using HTML. Image placement using custom HTML code Depending whether you have chosen a WYSIWYG editor for your Joomla! account, you may choose to edit content articles and modules using an editor, or choose to format your site content using an HTML code view. WYSIWYG editors can often add in additional characters to your site content, especially when content editors cut and paste the content directly from documents such as Microsoft Word, e-mail applications, and so on. They can allow users with no HTML experience to have wonderful functionalities for adding and updating website content, but can litter the code with unwanted or redundant code: This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 4 [ 89 ] Image placement using HTML and CSS offers you options to align and style your website content as you desire. Let's look at how we can add an image into our content using pure HTML. Just like using a WYSIWYG editor to insert an image, when using HTML we are performing a similar process, but this time entering in the image code by hand. In HTML, all images are dened using the <img> tag. Additional properties are given to this tag to make it perform functions. When using the WYSIWYG editor, we need to make sure that our image code is placed in the position where we want it to be displayed on the page: In the editing window, position your mouse cursor where you want to enter your image. For our example, we will insert an image into the second (middle) paragraph of text (note each block of text has a <p> (paragraph) tag around it). The browser will show your image where the image tag occurs in the document. If we put an image in between two paragraphs, the browser will show the rst paragraph, then the image, and then the second paragraph. In our example, we want the image to show at the start of our second paragraph, in line with our text content. We will break this down as an example, so let's start off by inserting the basic <img> tag into our document: <p>This is an interesting paragraph about inserting an image around text</p> <p><img>This is an interesting paragraph about inserting an image around text </p> <p>This is an interesting paragraph about inserting an image around text </p> This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Adding and Managing Image Content [ 90 ] Next we need to provide a location for the image. This is done by using the src attribute ( src stands for source). The value of this attribute is the source location of the image you wish to display: <p>This is an interesting paragraph about inserting an image around text</p> <p><img src=" http://www.mydomain.com/image.jpg" />This is an interesting paragraph about inserting an image around text </p> <p>This is an interesting paragraph about inserting an image around text </p> Note how we have now added in a /> at the end of our image tag. This is required to end our <img> tag correctly and make our code XHTML compliant. Next we need to provide an alt (alternative text) description to our image. This is important to inform the viewer of what is loading into the page. Remember some web users have images turned off and use screen readers, so alt tags are very important for all images that you add into your site: <p>This is an interesting paragraph about inserting an image around text</p> <p><img src=" http://www.mydomain.com/image.jpg" alt="My Page" />This is an interesting paragraph about inserting an image around text </p> <p>This is an interesting paragraph about inserting an image around text </p> If we click on Apply on our content article now, this code will be saved and if the location to the image is correct, the image will show. The previous code will load the image in and then the text will load underneath: If you want the text to wrap around your image, we need to set an align attribute (alignment) for the image. Options for the align attribute are either left, right, middle, top, and bottom, which will result in the image aligning to each of these values in relation to any text block around the image: <p>This is an interesting paragraph about inserting an image around text</p> <p><img src=" http://www.mydomain.com/image.jpg" alt="My Page" This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 4 [ 91 ] align="left" />This is an interesting paragraph about inserting an image around text </p> <p>This is an interesting paragraph about inserting an image around text </p> If you have set the image alignment to left and clicked on Apply to save your Joomla! Article, you will see that your image is positioned to the left and at the same height as the middle paragraph of text: Next we need to specify a few more details about our image, mainly the height and width of it. This is to ensure that when viewing across various devices, your images will load in with the correct size. The height and width attributes are set as they are spelt. These are in the value of pixels but there is no need to enter px to the attribute. For example, if an image is 60 px high and 100 px wide, our code will look like: <p>This is an interesting paragraph about inserting an image around text</p> <p><img src=" http://www.mydomain.com/image.jpg" alt="My Page" align="left" height="60" width="100" />This is an interesting paragraph about inserting an image around text </p> <p>This is an interesting paragraph about inserting an image around text </p> We can use HTML to perform additional functions such as image spacing. By using the hspace (horizontal space) and vspace (vertical space) attributes, we can create some padding around our image. This is especially useful when your text ows around your images. In my example, I want to create some horizontal padding between my image and the text owing around it. The code now becomes: <p>This is an interesting paragraph about inserting an image around text</p> <p><img src=" http://www.mydomain.com/image.jpg" alt="My Page" align="left" height="60" width="100" hspace="5" />is an interesting paragraph about inserting an image around text </p> <p>This is an interesting paragraph about inserting an image around text </p> This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Adding and Managing Image Content [ 92 ] The image will now look like: One nal attribute that I would like to include is the title attribute (Title). This will provide a tooltip title to the image when the viewer hovers their mouse cursor over the image. Titles are useful for providing additional information and do have an affect on Search Engine Optimization (SEO). The code now becomes: <p>This is an interesting paragraph about inserting an image around text</p> <p><img src=" http://www.mydomain.com/image.jpg" alt="My Page" align="left" height="60" width="100" hspace="5" title="A Nice Clock Image" />is an interesting paragraph about inserting an image around text </p> <p>This is an interesting paragraph about inserting an image around text </p> The image will now look like: If you want to insert numerous images into your articles and modules, it would be necessary to perform these steps for every image that you want to load in. It is possible to cut and paste the previous code and just change the values each time, but it can become time consuming. Some image attributes such as the image padding ( vspace and hspace) can be set in your CSS, creating a site wide stylesheet class for all of your content images. This CSS code may look like: img { border: 0 none; margin: 3px } The previous example will set a border of 0 and a margin of 3 on all of your site images, so you may need to specify the CSS attribute in more detail to suit your template. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 4 [ 93 ] Creating image galleries and slideshows Joomla! is a Content Management System designed primarily for organizing and managing website content. It contains numerous multimedia features built into it, but its main focus is providing two roles: Powerful CMS features, and a well-designed framework which allows additional features to be added to the system, thus creating powerful functionality. These additional features are called Extensions and are designed to plug in to the core Joomla! Framework and extend the functionality of it. With regards to the core Joomla! CMS, we have already looked at how images can be included into content items and modules. However, image galleries and slideshows are asking a bit more than just simple image management, and so require the power of extensions to provide these features: The number of multimedia extensions now available for Joomla! is staggering. We have extensions which can create complex galleries, stream in videos, and compile jukebox type audio features. Having considered at great length the best approach for this section of the book, it has resulted in one option. That is to highlight some of the most popular and useful image gallery and slideshow extensions, and hope that these will provide understanding as to the complex image management capability that can be achieved by using Joomla! Extensions. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Adding and Managing Image Content [ 94 ] Image management extensions, and how to install them Before proceeding with covering third-party extension functionality, let's quickly cover how image extensions are added to your Joomla! site. As with most things in Joomla!, the process of installing extensions has had careful consideration from the development team, and is a very easy to perform. Most Joomla! Extensions come with their own installation instructions, and these general guidelines will help you get them installed on your site. Before installing anything, make sure you copy your le set and backup your site database. For the purpose of this example, I am going to install one of my favorite Joomla! Multimedia Extensions—the RokBox extension by RocketTheme. RokBox is a MooTools powered slideshow plugin that enables you to display numerous media formats with a professional pop-up screen lightbox effect: This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 4 [ 95 ] The installation steps are as follows: 1. Download the required extension and save this download on your computer. The le will be in a .zip format, or possibly a .gzip or .tgz format which may require unzipping before installation: 2. Log into your Joomla! Administrator's Control Panel, and navigate to the Extensions menu, then to Extension Manger. The page will default to the Install screen: This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Adding and Managing Image Content [ 96 ] 3. Browse your computer for the extension .zip le using the Choose File button on this page and once the le is located, use the Upload File & Install button. The Joomla! Installation Manger will perform all of the work and if your extension has been built correctly, the installer will place all les and documents into their correct directories: 4. An installation success message will show to inform you that the extension has been successfully installed. Some extensions success text may contain additional links to conguration pages for the extension. Image gallery extensions The following is a list of Joomla! Extensions to create image galleries: Simple Image Gallery The Simple Image Gallery extension is a plugin: This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 . HTML code Depending whether you have chosen a WYSIWYG editor for your Joomla! account, you may choose to edit content articles and modules using an editor, or choose to format your site content. example, we will use the Joomla! default TinyMCE editor: Firstly choose the article you wish to edit, or create a new article and go into the Edit Article screen. As when using the Joomla! Image button. the sole use by jackie tracey on 23rd February 2010 95 3 Quincy Drive, , Brick, , 08724 Chapter 4 [ 93 ] Creating image galleries and slideshows Joomla! is a Content Management System designed primarily