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. The File Uploads page will appear next, as shown in the following screenshot:   
  3. 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:
  4. 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:
  5. 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:
  6. 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:
  7. 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:
  8. You’ll be taken back to the New Entry page again. To see the image, click on the Maximize/Minimize Editor button:
  9. 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:
  10. Click on the image to select it and change its size by dragging the little white square at the upper-right corner:
  11. 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:
  12. 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:
  13. 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.
  14. 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:
  15. Your new post will appear on your weblog’s front page, as shown in the following screenshot:
  16. You can logout from Roller and close your web browser now.
Packt

Share
Published by
Packt

Recent Posts

Top life hacks for prepping for your IT certification exam

I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…

3 years ago

Learn Transformers for Natural Language Processing with Denis Rothman

Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…

3 years ago

Learning Essential Linux Commands for Navigating the Shell Effectively

Once we learn how to deploy an Ubuntu server, how to manage users, and how…

3 years ago

Clean Coding in Python with Mariano Anaya

Key-takeaways:   Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…

3 years ago

Exploring Forms in Angular – types, benefits and differences   

While developing a web application, or setting dynamic pages and meta tags we need to deal with…

3 years ago

Gain Practical Expertise with the Latest Edition of Software Architecture with C# 9 and .NET 5

Software architecture is one of the most discussed topics in the software industry today, and…

3 years ago