Novell Home

Create a Picture Gallery for the Internet using Gwenview

Novell Cool Solutions: Feature
By Scott M. Morris

Digg This - Slashdot This

Posted: 21 Sep 2005
 

Applies to:

  • SUSE Linux Professional
  • Novell Linux Desktop
  • Platforms using KDE

Note: This article requires a minimal knowledge of HTML, and that you have webspace for posting HTML files and images.

The other weekend, I had occasion to go to a concert. At this concert, I took a handful of digital photos. Great for my viewing pleasure, but now, I want to share them with the world. Email works, but there is another way. I can make an online gallery and just send people the URL to the page. Is it possible to do this in SUSE Linux? It is. Let's see how to create a great slideshow in SUSE Linux.

First, let's make sure that all of the proper packages are installed. Open YAST and search for gwenview. Tick the box on the right to make sure it will be installed if it isn't already:

Now, search for imagemagick. Tick the box on the right to make sure it will be installed:

Finally, search for krename. Tick the box on the right to make sure it will be installed:

When you're done, click the ACCEPT button in the lower-right. YAST then installs the packages, possibly prompting you for CDs.

For starters, let's describe the project a bit. I want to have one HTML page with several thumbnails in it. When I click the thumbnails, I want to open another window with a bigger version of the thumbnail in it. So, I create a folder which I will name band. Inside of that folder, I have all of the images in a subfolder called original. These are the images as they came out of my camera. In the band folder, I also have another subfolder called big. This is where the large versions of the pictures will be. In band, I have a third subfolder called thumb that will house the thumbnail images:

Alrighty, so open up gwenview. Click on the K Menu, then GRAPHICS, then VIEWER, and finally GWENVIEW:

Depending on how you arrange your layout, your Gwenview window may look like this:

In the filebrowser part of the window, browse to where the original images are stored:

Generate the Thumbnails

Now, we are going to make it so that we can see all the images in the folder by thumbnail within Gwenview. Click on the LARGE THUMBNAILS button in the window displaying the contents of the selected folder:

You will then see nice, large thumbnails of all of your images:

Let's move on to resizing the images. Go up to the PLUGINS menu, click BATCH PROCESSING, and then select RESIZE IMAGES. A new window appears. We are going to use this to set our preferences for how to resize the images:

In the "Image Resizing Options" box at the top left, there is a drop-down called TYPE. It has different types of ways to resize an image. We want to select PROPORTIONAL (2 DIM.) from this dropdown:

Make sure the REMOVE ORIGINAL checkbox is not checked. Next, click the OPTIONS button next to the TYPES drop-down. Another window comes up. This window allows us to tell Gwenview the exact size we want our images:

Let's do the thumbnails first. The original images are 2048 pixels wide and 1536 pixels tall. It is good to note that they are all in a 4:3 aspect ratio. This is fancy jargon for saying that for every 4 pixels wide that the image is, it's 3 pixels tall (do the math: divide 2048 by 4 and multiply the result by 3. You will get 1536). This fact is important. We need to make sure that when we resize the images, we keep this ratio intact.

For the thumbnails, let's set the target width to 160. What's 3/4 of 160? Yes, it's 120. So, let's set the target height to 120. This will ensure that the thumbnail images don't look distorted at all. The thumbnails don't really need really high quality, so let's set that to 75. Down in the "Rendering Settings" box, set BORDER SIZE (PIXELS) to 0. This setting is useful if you'd like a nice border around your images. We don't want borders here.

Your window's settings should now appear as shown below. When it does, click OK:

Next, down in the "Target Folder" box, let's tell Gwenview where we want to have it put the thumbnails. This will be the thumb subdirectory of our band folder:

Let's now tell Gwenview which images we want to resize. In the "Image File List" box, click on the ADD button. A small window appears:

Make sure that FOLDER CONTENT is selected from the column on the left. Select all of the images on the right (click on one and press CTRL+A). Then, click OK:

Back in the previous window, you should now see a list of images in the "Image File List" box:

We are now ready to generate the thumbnails. Start this process by clicking START in the lower right corner of the window. In the bottom pane of the window, you will see Gwenview resizing the images. Each successful thumbnail created will be green and have an OK by it:

Congratulations. The thumbnails are now created. Don't close this dialog box. We're going to use it again, in a minute. If you'd like, browse to the thumb directory and make sure they're there. Maybe open one or two to see what they look like:

Generate Large Images

Everything worked great. Now, we need to do the larger versions of each image. These larger versions are what the users will see when they click on the thumbnail. This process will be nearly identical to the thumbnail creation except for the target size of the images and the target folder where we'll store them. So, I'll run through these steps, but not in as great detail as I did above.

Hopefully, your "Batch Resize Images" dialog is still open. If not, go up to the PLUGINS menu, click BATCH PROCESSING, and then select RESIZE IMAGES.

In the "Image Resizing Options" box, leave the TYPE drop-down at PROPORTIONAL (2 DIM.), and click the OPTIONS box. The "Image-Resize Options" dialog box appears. Set the width to 640, and the height to 480. Set the image quality to 85. When done, click OK:

In the "Target Folder" box, select the big subfolder of the band folder. Then, in the "Image File List" box, click ADD. The "Select Image From Album" dialog pops up. Select all of the images on the right, and click OK. The image names show up in the "Image File List" box.

We are now ready to resize the original images from ultra-huge (2048 pixels wide and 1536 pixels tall) to a large size suitable for viewing on the Internet (640 pixels wide and 480 pixels tall). When your dialog box resembles the one below, click the START button in the lower-right corner of the dialog to start the process:

Gwenview will then resize the images. When it is finished, click the CLOSE button to get back to the main Gwenview window. You can browse to the folder where the new images are. Open one or two to make sure everything worked properly. We are now done with Gwenview, so go ahead and close it.

Generate the HTML file

We have generated the thumbnails and the larger versions of the images. Now, let's generate the HTML that will tie all of these images together.

We need a list of the files in the thumbnail directory. Open a terminal window and change to the folder where these images are located:

[1320][scott@work:~]$ cd Desktop/band/thumb/
[1320][scott@work:~/Desktop/band/thumb]$

To generate a list of these images and put it into an html file, type ls -1 > index.html and press ENTER:

[1320][scott@work:~/Desktop/band/thumb]$ ls -1 > index.html
[1322][scott@work:~/Desktop/band/thumb]$

Now, open the index.html file in your favorite text editor, Kate. What you have in this file is a list of image names (if "index.html" shows up in this file, just remove it). We need to write HTML that will display the thumbnails, specify that they are links, and specify what to open when they're clicked.

On each line, before the image names, copy and paste the following HTML:

<a href="" target="_blank"><img src="

After the image names, copy and paste the following HTML:

"></a>

The file should now look something like this:

<a href="" target="_blank"><img src="p1010180.jpg"></a>
<a href="" target="_blank"><img src="p1010186.jpg"></a>
<a href="" target="_blank"><img src="p1010188.jpg"></a>
<a href="" target="_blank"><img src="p1010189.jpg"></a>
<a href="" target="_blank"><img src="p1010190.jpg"></a>
<a href="" target="_blank"><img src="p1010197.jpg"></a>
<a href="" target="_blank"><img src="p7010011.jpg"></a>
<a href="" target="_blank"><img src="p7010016.jpg"></a>
<a href="" target="_blank"><img src="p7010017.jpg"></a>
<a href="" target="_blank"><img src="p7010018.jpg"></a>
<a href="" target="_blank"><img src="p7010020.jpg"></a>
<a href="" target="_blank"><img src="p7010021.jpg"></a>

So far, so good. Right now, though, the thumbnails will display, and they are set as links, but the links don't link to anything. We have to put something in for the destination of each link. To insert the destination, we need to have the larger images in the same folder as these project files we are working with. As it stands now, we can't do that. Why? Because the larger images are named the same as the thumbnail images. If we copied the larger images into this folder, they would overwrite the thumbnails of the same name. So, what we need to do is rename them and then move them to the folder with the index.html file and all of these thumbnail images.

Rename and Move Large Images

KDE has a nice tool for mass renaming called KRename. To open this application, go to the K Menu, then SYSTEM, then FILE MANAGER, and open KRENAME:

The main window appears:

Click on the ADD button to add the files to rename. Make sure that you browse to the location where the large versions of the images reside. In this case, it is the big subfolder of the band folder. Once you've added these files, they will show up in the list:

Double-check to make sure you have added the large versions of the images, and not the originals or the thumbnails.

Next, click on the DESTINATION tab. Select the "Copy files to destination directory" radio button. Then, click the browse button to select the destination directory. This will be the thumb subfolder of the band folder:

Your KRename window should look like this, now:

When it does, go directly to the FILENAME tab. In the TEMPLATE box, type "big$". You should see a preview of the results in the pane below:

When it's all ready, click the FINISH button. KRename then goes through, copies the files to the thumbnail folder, renaming them so as not to overwrite the thumbnails. When it's done, you will see this window:

As luck would have it, to close KRename, just click the CLOSE button.

Insert Links to Large Images

We have one last step. We need to insert the names of the large images into the HTML as the link destinations. Open up a terminal window, and change to the thumbnail folder:

[1320][scott@work:~]$ cd Desktop/band/thumb/
[1320][scott@work:~/Desktop/band/thumb]$

At the prompt type "ls -1 big*.* > big.txt" and press ENTER:

[1415][scott@work:~/Desktop/band/thumb]$ ls -1 big*.* > big.txt
[1415][scott@work:~/Desktop/band/thumb]$

You can now open the big.txt file in a text editor. Copy and paste the names of the target images over to the links listed in the index.html file.

As you are doing this, make sure that the thumbnail filename and the target image filename are the same, except for the "big" at the front of the target image filename. Otherwise, the picture you see when you click the thumbnail will be a different picture than the thumbnail represents. Don't forget to add the opening <HTML> at the beginning of the file and the closing </HTML> at the end of the file. When you are done, your HTML file should look something like this:

<HTML>
<a href="bigp1010180.jpg" target="_blank"><img src="p1010180.jpg"></a>
<a href="bigp1010186.jpg" target="_blank"><img src="p1010186.jpg"></a>
<a href="bigp1010188.jpg" target="_blank"><img src="p1010188.jpg"></a>
<a href="bigp1010189.jpg" target="_blank"><img src="p1010189.jpg"></a>
<a href="bigp1010190.jpg" target="_blank"><img src="p1010190.jpg"></a>
<a href="bigp1010197.jpg" target="_blank"><img src="p1010197.jpg"></a>
<a href="bigp7010011.jpg" target="_blank"><img src="p7010011.jpg"></a>
<a href="bigp7010016.jpg" target="_blank"><img src="p7010016.jpg"></a>
<a href="bigp7010017.jpg" target="_blank"><img src="p7010017.jpg"></a>
<a href="bigp7010018.jpg" target="_blank"><img src="p7010018.jpg"></a>
<a href="bigp7010020.jpg" target="_blank"><img src="p7010020.jpg"></a>
<a href="bigp7010021.jpg" target="_blank"><img src="p7010021.jpg"></a>
</HTML>

Wrap Up and Test

You are now finished. It's a good idea to test the final product when you're finished. Browse to your thumbnail directory. Open up the index.html file to take a look. Click on the thumbnails to make sure they open bigger versions of the same picture:

Now, feel free to add any other HTML formatting you want. You may wish to add a title, for example. It takes a little work, but in the end, you have a working image gallery. You can now post these files to your webspace. Posting these files is beyond the scope of this article. If you don't have a website where you can post your gallery, is easy to get free webspace, if you'd like. Once you've uploaded the files, test them out again, just to make sure that everything's working properly.

Conclusion

I make galleries like this of my daughter for the rest of our family to view. They can be made of products for your website. They can be of whatever pictures that you have that you need to organize into a gallery. Whatever your online gallery needs may be, it's possible to whip up a nice-looking one with tools found in SUSE Linux.


Novell Cool Solutions (corporate web communities) are produced by WebWise Solutions. www.webwiseone.com

© 2014 Novell