Transcript
Page 1: How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214

How to edit and managearticle images in Joomla!

3.xUsing 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 Beginner’s Guide by Eric Tiggeler. For more information, visit the Packt Publishing website or the website accompanying the book, www.joomm.net.

It’s probably one of the most common tasks in day-to-day content management: adding images to articles. However, Joomla’s 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 you’ll have to scale down images to an exact size.

Wouldn’t it be much easier if you didn’t 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 doesn’t seem to be very well-known 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

Page 2: How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214

www.joomm.net Joomla! 3 Beginner’s Guide

Media Manager replacement!” High time to find out how RemoteImage works.

Downloading and Installing RemoteImage1. 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 you’v e downloaded, select it and click Upload & Install:

Managing images in Joomla 3 2 Eric Tiggeler

Page 3: How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214

www.joomm.net Joomla! 3 Beginner’s Guide

4. That’s 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:

Here’s what the new Image Manager screen looks like:

Managing images in Joomla 3 3 Eric Tiggeler

Page 4: How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214

www.joomm.net Joomla! 3 Beginner’s Guide

If you’re familiar with Apple computers, you’ll notice this screen resembles the Finder file manager. That’s 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 screenWhen editing an article, you’ll 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:

Managing images in Joomla 3 4 Eric Tiggeler

Page 5: How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214

www.joomm.net Joomla! 3 Beginner’s Guide

As you can see, Joomla’s default Insert Image popup screen is replaced with the RemoteImage interface.

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.

Managing images in Joomla 3 5 Eric Tiggeler

Page 6: How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214

www.joomm.net Joomla! 3 Beginner’s Guide

Previewing imagesClick 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):

The Preview button has a similar function; however, it doesn’t reveeal information on the original image dimensions.

Copying and pasting imagesNow here’s where the RemoteImage possibilities get more exciting: you can easily copy and paste image files, just like you’re 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.

Here’s how it works in RemoteImage: just select one ore multiple images, click Copy, navigate to another folder and click Paste. It’s also possible to skip clicking Copy and Paste and just drag and drop images from one folder to another.

Managing images in Joomla 3 6 Eric Tiggeler

Page 7: How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214

www.joomm.net Joomla! 3 Beginner’s Guide

Duplicating imagesClick Duplicate to immediately create a copy of the selected image:

In this example, we’ve 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 you’re satisfied with your edits, you can delete the original file.

Resizing and rotating imagesMore 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.

Managing images in Joomla 3 7 Eric Tiggeler

Page 8: How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214

www.joomm.net Joomla! 3 Beginner’s Guide

In the Resize popup screen, you change the image size by grabbing the image handles, just as you’d expect from an image management program:

Click the Crop button to trim the image:

Managing images in Joomla 3 8 Eric Tiggeler

Page 9: How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214

www.joomm.net Joomla! 3 Beginner’s Guide

Or click the Rotate button to rotate the image, either in steps of 90 degrees or using the slider.

When you’re done editing, click Apply to commit changes.

Resizing images to a fixed widthAnother 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.

Here’s 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

Page 10: How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214

www.joomm.net Joomla! 3 Beginner’s Guide

Editing an image in Joomla – using PixlrWhat if you want to adjust colors, change image brightness and contrast or apply other changes? Even this is possible in Joomla now – or rather, it’s 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, you’re immediately taken to the pixlr.com editor, where the image is automatically loaded.

Managing images in Joomla 3 10 Eric Tiggeler

Page 11: How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214

www.joomm.net Joomla! 3 Beginner’s Guide

Apply any changes you want to in the Photoshop-like pixlr interface. In this example, I’ve changed the image colors using the Hue & Saturation option. When you’re done, click Save. In the Save image dialog screen click OK:

You’re 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

Page 12: How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214

www.joomm.net Joomla! 3 Beginner’s Guide

Viewing detailed image infoOne 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 contentsWe’ve 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 dropAfter 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

Page 13: How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214

www.joomm.net Joomla! 3 Beginner’s 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 verdictOver 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 images. One possible problem seems to be that the original extension developers appear to have little time to keep up extension development; this is the reason that they have published the full extension code on the Github site, inviting other developers to contribute and maintain this powerful Joomla enhancement. Let’s hope RemoteImage will remain actively updated. In any case, there’s nothing to keep you from using it right now, as it works great in both Joomla 2.5 and 3.x. Make sure to give this extension a try!

Eric Tiggeler

This online appendix is a free addition to the Joomla! 3 Beginner’s Guide by Eric Tiggeler. For more information, visit the Packt Publishing website or the website accompanying the book, www.joomm.net.

Managing images in Joomla 3 13 Eric Tiggeler