Spicing Up Your Blog: Uploading Files and Images to your Weblog using Apache Roller

5 min read

This article gives you insight on weblogs and how they can be used to create a worldwide presence through the blogosphere. It also teaches you the difference between a blog and a CMS, the basics about newsfeeds and the important role they play for blogs, and how you can use them to spread information on the blogosphere.

Before the action begins

Before starting with this article’s exercises, you need to download the support files (screenshots, videos, sounds, and so on) from http://www.packtpub.com/files/code/9508_Code.zip, and then unzip them into a folder—C:ApacheRollerBook, for example—on your hard drive. All these files are zipped in a file named chapter05.zip. Inside this file, there’s an image file (chapter05_01.jpg), a sound file (seaontherocks.mp3), and several files for the video example (showvbox.mp4, showvbox_controller.swf, and FirstFrame.png).

Uploading files to your weblog

Now that you have the basic knowledge about how to manage your weblog, it’s time to make things more interesting for you and your future visitors. So, how can we do that? Well, multimedia files (audio or video) are always a good addition to a web page, because they can express much more than using text-only posts. Imagine what you could offer to your clients, if you had an online specialty store. You could show your new items in your Roller weblog with full color photos, and you could also embed videos of your items in your posts, to give visitors a complete virtual tour of your store! To top that, you could show them a custom Google Map, where they could get directions from their location to your store! What else could you ask for?

Using images on your posts

An image can say a thousand words and if you include some of them in your posts, imagine the space you can save. Roller has a very friendly interface to help you upload and include images in your posts, and now you’re about to learn how to do it!

Time for action – uploading images into Roller

In this exercise, I’ll show you how to use Roller’s file upload interface, so that you can add an image to an entry (post) in your blog:


  1. Open your web browser and log into Roller. The New Entry page will appear. Then click on the File Uploads link, under the Create & Edit tab:
  2. Apache Roller 4.0 – Beginner's Guide

  3. The File Uploads page will appear next, as shown in the following screenshot:     
  4. Apache Roller 4.0 – Beginner's Guide

  5. Click on the Browse… button of the first text field, and the File Upload dialog will appear. Go to the folder where you downloaded this article’s support files, and double-click on the chapter5_01.png image to select it. The name of the file you selected will show up in the first textbox of the File Uploads page:
  6. Apache Roller 4.0 – Beginner's Guide

  7. Click on the Upload button to upload the image to your blog. Roller will respond with a success message as shown in the next screenshot:
  8. Apache Roller 4.0 – Beginner's Guide

  9. Take note of the URL shown in the previous message, because you’ll use it when inserting the image inside a post in your blog. Now click on the New Entry link from the Create & Edit tab, and use the following screenshot as an example for your new post:
  10. Apache Roller 4.0 – Beginner's Guide

  11. Press Enter after the last line of text (Here’s a screenshot of the official Website:) and click on the text editor’s Insert/Modify Image button:
  12. Apache Roller 4.0 – Beginner's Guide

  13. The Insert Image dialog will show up. Type the URL of the image you uploaded to Roller (http://localhost/roller/main/resource/chapter5_01.png) inside the Image URL field, and click on the Preview button to see a small preview of the image. Then, type VirtualBox Web site in the Alternate text field and click on the OK button to insert the image in your post:
  14. Apachea Roller 4.0 – Beginner's Guide

  15. You’ll be taken back to the New Entry page again. To see the image, click on the Maximize/Minimize Editor button:
  16. Apache Roller 4.0 – Beginner's Guide

  17. The editor will fill up your web browser’s entire workspace area and you will be able to see the image, as shown in the following screenshot:
  18. Apache Roller 4.0 – Beginner's Guide

  19. Click on the image to select it and change its size by dragging the little white square at the upper-right corner:
  20. Apache Roller 4.0 – Beginner's Guide

  21. Click on the Maximize/Minimize Editor button again to change the text editor to its original size. The image will now fit inside the text editor, as shown in the following screenshot:
  22. Apache Roller 4.0 – Beginner's Guide

  23. Use the down and right arrow keys to position the text cursor at the end of the post, press Enter and type the text shown in the following screenshot:
  24. Apache Roller 4.0 – Beginner's Guide

  25. Exit the text editor and scroll down the New Entry page until you locate the Post to Weblog button, and click on it to publish the post to the blog.
  26. Roller will show the Changes saved message inside a green box. Now click on the Front Page link in Roller’s menu bar, at the upper-right corner of the screen, to go to your blog’s front page:
  27. Apache Roller 4.0 – Beginner's Guide

  28. Your new post will appear on your weblog’s front page, as shown in the following screenshot:
  29. Apache Roller 4.0 – Beginner's Guide

  30. You can logout from Roller and close your web browser now.


Please enter your comment!
Please enter your name here