How to edit and manage article images in Joomla! 3.x. A tutorial on using the RemoteImage Image Manager, a free extension for Joomla.
Text of How to edit and manage article images in joomla 3 joomla 3 beginner's guide - eric tiggeler...
How to edit and manage article images in Joomla! 3.x Using the RemoteImage Image Manager for Joomla Eric Tiggeler | February 2014 A tutorial on editing and managing images in Joomla 3 using the Asikart RemoteImage extension This is an online appendix to the Joomla! 3 Beginners Guide by Eric Tiggeler. For more information, visit the Packt Publishing website or the website accompanying the book, www.joomm.net. Its probably one of the most common tasks in day-to-day content management: adding images to articles. However, Joomlas default image management capabilities are a little limited. Before you can add an image to an article, you have to make sure its dimensions fit the web page. Usually this means youll have to scale down images to an exact size. Wouldnt it be much easier if you didnt need to prepare images using other software and if you could just upload the original image files to your Joomla site and then resize, crop or rotate them? This is just what the freely available Asikart RemoteImage promises you can do. RemoteImage allows you to manage image files and folders, insert multiple images, resize, crop and rotate images and much more. This extension doesnt seem to be very wellknown in the Joomla community yet, but all reviews on the Joomla extension website are really enthusiastic: This extension trumps Joomla's native media manager by far. It allows you to have complete control over files, folders, and other types of media. It's the perfect Media Manager replacement! High time to find out how RemoteImage works.
www.joomm.net Joomla! 3 Beginners Guide Downloading and Installing RemoteImage 1. Go to http://ext.asikart.com/extensions/asikart-remoteimage.html. Click on the Download button: 2. On the Github site, click on the Source Code (zip) button to dowload the zipped extension file: 3. In the backend of your Joomla site, navigate to Extensions and click the Upload Package File tab. Browse to the file youv e downloaded, select it and click Upload & Install: Managing images in Joomla 3 2 Eric Tiggeler
www.joomm.net Joomla! 3 Beginners Guide 4. Thats it: Joomla will confirm the installation of the RemoteImage component and two plugins that come with it. What the new Image Manager looks like in Joomla After installation, the RemoteImage extension automatically replaces the default Media Manager in Joomla. To have a look at the differences, navigate to Content |Media Manager: Heres what the new Image Manager screen looks like: Managing images in Joomla 3 3 Eric Tiggeler
www.joomm.net Joomla! 3 Beginners Guide If youre familiar with Apple computers, youll notice this screen resembles the Finder file manager. Thats no coincidence; the developers have tried to mimic the look and feel (and more importantly, the easy of use and capabilities) of this piece of software. One example is that you even are allowed to drag and drop files: you can try this out by picking one of the files in the images folder and drag it to any of the example folders, such as banners or headers. The new Insert Image screen When editing an article, youll notice a new button at the bottom of the editor screen: Remote and Local Images. Click Remote and Local Images to open the image manager popup screen: As you can see, Joomlas default Insert Image popup screen is replaced with the RemoteImage interface. Managing images in Joomla 3 4 Eric Tiggeler
www.joomm.net Joomla! 3 Beginners Guide What image editing features are available? In the RemoteImage screen, right-click any image file to access a number of functions: Open Preview Download Copy Cut Duplicate Delete Resize & Rotate Edit on Pixlr Get info The same features can be accessed through by selecting an image first and clicking the buttons on the toolbar in the RemoteImage screen. Here are a couple of examples of the most powerful features. Previewing images Click Open to see preview the full image in its original size in a popup screen. This is useful to find out what the full size image looks like and to get information on the exact width and height (in pixels): Managing images in Joomla 3 5 Eric Tiggeler
www.joomm.net Joomla! 3 Beginners Guide The Preview button has a similar function; however, it doesnt reveeal information on the original image dimensions. Copying and pasting images Now heres where the RemoteImage possibilities get more exciting: you can easily copy and paste image files, just like youre used to do this on your computer. The fact that you can move files in Joomla is incredibly useful. It will save you a lot of clicks in the Joomla backend and, more importantly, it will even save you having to use FTP software to move files around. Heres how it works in RemoteImage: just select one ore multiple images, click Copy, navigate to another folder and click Paste. Its also possible to skip clicking Copy and Paste and just drag and drop images from one folder to another. Duplicating images Click Duplicate to immediately create a copy of the selected image: Managing images in Joomla 3 6 Eric Tiggeler
www.joomm.net Joomla! 3 Beginners Guide In this example, weve created a duplicate of blue-flower.jpg. RemoteImage creates a copy in the same folder and automatically gives it the filename blue-flower copy 1.jpg. This is useful to first create a working copy of the file you want to use, which you can then edit and enhance. After youre satisfied with your edits, you can delete the original file. Resizing and rotating images More fun to come: using RemoteImage you can edit images directly in Joomla. To access this feature, right-click an image file and select Resize & Rotate. In the Resize popup screen, you change the image size by grabbing the image handles, just as youd expect from an image management program: Managing images in Joomla 3 7 Eric Tiggeler
www.joomm.net Joomla! 3 Beginners Guide Click the Crop button to trim the image: Managing images in Joomla 3 8 Eric Tiggeler
www.joomm.net Joomla! 3 Beginners Guide Or click the Rotate button to rotate the image, either in steps of 90 degrees or using the slider. When youre done editing, click Apply to commit changes. Resizing images to a fixed width Another way to quickly resize images is to select an image in RemoteImage screen, enter a Max Width (in the example below this is 340 pixels) and click Insert. Heres what the results looks like in the Joomla article: a resized image with a width of 340 pixels: Managing images in Joomla 3 9 Eric Tiggeler
www.joomm.net Joomla! 3 Beginners Guide Editing an image in Joomla using Pixlr What if you want to adjust colors, change image brightness and contrast or apply other changes? Even this is possible in Joomla now or rather, its possible because RemoteImage allows you to connect directly to the (free) online pixlr.com editor service. Just right-click the image in RemoteImage and select Edit on Pixlr. Select Pixlr Editor: In an new browser window, youre immediately taken to the pixlr.com editor, where the image is automatically loaded. Managing images in Joomla 3 10 Eric Tiggeler
www.joomm.net Joomla! 3 Beginners Guide Apply any changes you want to in the Photoshop-like pixlr interface. In this example, Ive changed the image colors using the Hue & Saturation option. When youre done, click Save. In the Save image dialog screen click OK: Youre taken back to the Joomla RemoteImage screen and hey presto! the image is now saved here, including all your pixlr edits! You can now insert the edited image in your Joomla artilce by clicking Insert. Managing images in Joomla 3 11 Eric Tiggeler
www.joomm.net Joomla! 3 Beginners Guide Viewing detailed image info One last option in RemoteImage is Get Info. This will show a little popup window with details on file size, image dimensions, file location and so on: Creating folders and managing folder contents Weve already seen that RemoteImages allows you to easily copy and paste (or drag and drop) files from one folder to another. You can also create a new folder: click the New folder button to create an untitled folder and enter a folder name. Uploading images to Joomla using drag and drop After clicking on Remote and Local Images in a Joomla article, you can upload new images from your computer easily just by dragging and dropping files from your computer the Insert Image screen. Another way to upload images is to click the Upload files button in RemoteImage: Managing images in Joomla 3 12 Eric Tiggeler
www.joomm.net Joomla! 3 Beginners Guide This works as you would expect: select one ore more files on your computer, click Open and the files are uploaded to the current folder in Joomla ready for you to either insert them in an article, or to first adapt them using RemoteImage. Asikart RemoteImage: the verdict Over the last few months, RemoteImage has become one of my favorite Joomla extensions. It really user friendly and it takes the hassle out of adjusting, uploading and managing images files in Joomla. You can easily change the image dimensions, enhance or customize ima