Your SlideShare is downloading. ×
How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214
How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214
How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214
How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214
How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214
How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214
How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214
How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214
How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214
How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214
How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214
How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214
How to edit and manage article images in joomla 3   joomla 3 beginner's guide - eric tiggeler -220214
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

5,548

Published on

How to edit and manage article images in Joomla! 3.x. A tutorial on using the RemoteImage Image Manager, a free extension for Joomla. …

How to edit and manage article images in Joomla! 3.x. A tutorial on using the RemoteImage Image Manager, a free extension for Joomla.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,548
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
70
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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 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 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.
  • 2. www.joomm.net Joomla! 3 Beginner’s 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 you’v e downloaded, select it and click Upload & Install: Managing images in Joomla 3 2 Eric Tiggeler
  • 3. 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
  • 4. 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 screen When 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: As you can see, Joomla’s default Insert Image popup screen is replaced with the RemoteImage interface. Managing images in Joomla 3 4 Eric Tiggeler
  • 5. www.joomm.net Joomla! 3 Beginner’s 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
  • 6. www.joomm.net Joomla! 3 Beginner’s Guide The Preview button has a similar function; however, it doesn’t reveeal information on the original image dimensions. Copying and pasting images Now 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. Duplicating images Click Duplicate to immediately create a copy of the selected image: Managing images in Joomla 3 6 Eric Tiggeler
  • 7. www.joomm.net Joomla! 3 Beginner’s Guide 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 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 you’d expect from an image management program: Managing images in Joomla 3 7 Eric Tiggeler
  • 8. www.joomm.net Joomla! 3 Beginner’s Guide Click the Crop button to trim the image: Managing images in Joomla 3 8 Eric Tiggeler
  • 9. 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 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. 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
  • 10. www.joomm.net Joomla! 3 Beginner’s 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, 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
  • 11. 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
  • 12. www.joomm.net Joomla! 3 Beginner’s 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 We’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 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
  • 13. 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 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 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

×