Using the Collections feature to create a gallery with an audio-guided tour

In this recipe, we will create a gallery with several pages (or rooms) of your work. We will also add a self-guided tour using audio. Unlike the gallery in the previous recipe, we will be using photos we've saved on Picasa to create our tour. This is for two reasons: one, we don't want to go over our allotted storage space and two, doing so will enable us to have more control over the access we give visitors to our pictures. We will create multiple pages, each one representing a room in our gallery, and then join them together in a Collection.

Note

A Collection joins pages together into a type of website. A set of tabs can be automatically created as well, to provide navigation.

Getting ready

In addition to Mahara, we are going to be using two other programs: Picasa, which is an image-hosting site, and Audacity, which is an open source audio recording program.

Picasa: You will need to create a free account on Picasa (http://picasaweb.google.com/home), and an album. Once you have logged into your new Picasa account, you will be taken to the My Photos section of your account. To create an album, click the button labeled Upload. Click the link create a new album. In this new window, you will give your album a name. You will also be asked about the Visibility of your album. Select the option Anyone with the link. This will keep your images private yet accessible to individuals to whom you wish to provide access through Mahara. They will not need to go to Picasa to see them, and this will give you greater control over the information individuals can access regarding your photos. Upload the photos you wish to use.

Audacity: Download and install Audacity (http://audacity.sourceforge.net). You will also need to download and install the LAME MP3 Encoder (there is a link for this on the download page for Audacity). Make sure you remember where you save the LAME file as you will need to find it the first time you make a recording. You will also need a microphone, if you do not have one built into your computer.

Create a folder in the Files section of the Content tab to hold your audio files. You do not need to upload your audio files ahead of time.

How to do it...

You will need to have two windows or two tabs open; your Mahara account should be open in one of them and your Picasa account in the other. We will be shifting back and forth between the two. Do not close either of the tabs/windows in between the steps listed next:

1. 1. Go to the Mahara window. In the Pages section of the Portfolio tab, create a new page.

2. 2. Deciding on how many columns to have in your page will be the tricky part as each individual image may be a different size. If you have a particularly wide image, you may want to use one or two columns; if you have tall and narrow images, you may want to use three. Each room in your gallery can have a different number of columns, based on how you would like to showcase your work. Here, in the following screenshot, is an example of a finished room that uses three columns of equal width:

   • In the next screenshot is an example of a two-column room:

3. 3. After you have selected the number of columns you wish to start with (you can always delete or add a column later), select the theme you wish to use. For this project, I used Ultima.

4. 4. Before adding any blocks to your page, go to your album in Picasa and locate the first image you wish to place in your gallery. Click on the image so that it opens in its own window. You will see a panel to the right of the image. Click the link labeled Link to this Photo and the area will expand, providing you with several options.

5. 5. The first thing you will need to do is to select a size. It is best to begin with either Medium 400 or Medium 640. When you select a particular size in Picasa (such as Medium 640) the image's largest dimension will be set to the number specified in the size. So, if you choose Medium 640 and the image is taller than it is wide, Picasa will make the height of the image 640px; the width will be proportionately set. After adding a few pictures, you will get the feel for what approximate sizes to choose. Even so, once you add the image to Mahara, you can resize it, if need be.

6. 6. After selecting the size, put a check mark in the box labeled Image only (no link). This will allow visitors to see your image in Mahara, and will not provide a link back to Picasa.

7. 7. Click inside the box labeled Embed image and copy the code. Now you are ready to add your first image to your gallery.

8. 8. Go back to Mahara. In your page, drag the Text Box block from the General tab to the column you wish to place this image into.

9. 9. Delete everything in the Block Title field so that it is empty.

10. 10. With your cursor inside the Body field of the textbox, click the "Insert/edit image" icon on the HTML toolbar.

11. 11. Paste the code you copied from Picasa into the area for Image URL.

12. 12. Type a one- or two-word Description of the image.

13. 13. Set the Alignment option to middle.

14. 14. In the Border field, type 10. This will give you a black frame around your image. The frame thickness will be 10 pixels. At the end of this recipe, I will show you how to make frames with other colors, and frames that appear 3D).

15. 15. Click Save.

16. 16. Repeat the previous steps until you've added all the images you wish to add to your first room.

17. 17. Next, we will add little placards underneath each picture. To begin, click-and-drag a Text Box block to the area underneath one of your images.

18. 18. Delete the text in the Block Title field, leaving it empty.

19. 19. Click in the Body field of the Text Box and then click the Insert a new table icon from the HTML toolbar.

20. 20. On the General tab, in the Insert/Modify table window, set the following parameters: Cols=1, Rows=1, Cellpadding=3, Alignment=center, Border=2, and Width=150.

21. 21. Now, select the Advanced tab. From the drop-down menu labeled Frame, select vsides. This will place the border on the right and left sides (vertical sides).

22. 22. Select a border color by clicking on the small box at the far right of the Border color option. It will open a palette of colors from which you can select the color you want.

23. 23. Select a Background color by clicking the small box to the far right of that option.

24. 24. Click Insert.

25. 25. You will be taken back to the editing window for the Text Box. We will now add some text to our newly-created placard. Make sure your cursor is in the table you just created. Select the Book Antiqua font, and click the center alignment icon. Type the title of your piece and then make it bold. Space down and provide a little information about the piece, for example, Oil on canvas.

26. 26. Click Save.

27. 27. Continue adding placards for the images in this first room.

    Now we can add a guided tour.

    We're going to add an audio recording to our room. This will provide more details about the images to our visitors. We will also add a transcription of the recording for our visitors who are not able to listen to the audio tour.

28. 28. Leave your Mahara window open to the page you are editing and open Audacity.

29. 29. Click on the button with the red dot to begin recording your voice. You should see a blue wavy line in the grey area with the timeline. You should also see a red line in the upper right-hand area of the recording window. These will tell you that your microphone is picking up your voice and Audacity is recording it. Tell your visitors about the images they are seeing in the room that you will be adding this recording to:

30. 30. When you have finished your recording, click the button with the yellow square. This will stop your recording.

31. 31. From the File menu, select Export as MP3. The first time you save an MP3 file, you will be asked to locate the LAME encoder file. Just browse to the location you saved it to and select it. You won't need to do this again. You will also be asked to give the file some additional information, but it is not necessary to do that for this project. Simply save the file to a location you will remember. We will be uploading it to Mahara shortly.

32. 32. Back in Mahara, from the File, Images and video section, click-and-drag the Embedded Media block to a location under one of your images.

33. 33. Delete the text in the Block Title field and add Guided Tour instead.

34. 34. You will see a list of files and folders in this window. Click the folder you created at the beginning of this recipe to open it.

35. 35. Put a check mark in the box next to Upload file and select the Browse button.

36. 36. Find the audio file you saved in step 31 and begin uploading it.

37. 37. In the box labeled Width, type 300. This will set the width of your playback controls to 300 pixels. You can set it to a different size, if you prefer.

38. 38. Click Save.

39. 39. To add a text-based tour for visitors who cannot hear the audio tour, create and save a transcript of your audio file to your computer. It is a good idea to give the file a name like Text for Guided Tour of Room #1, because visitors will see the name of the file.

40. 40. From the Files, Images and video section, click-and-drag a Files to download block to the area underneath your audio recording.

41. 41. You can delete the text in the Block Title field, leaving it empty.

42. 42. Put a check mark next to Upload file and click the Browse button to find and upload your transcript.

43. 43. Click Save.

44. 44. Click on the tab Next: Edit Title and Description.

45. 45. In the field for Page Title, give your page a title.

46. 46. You can skip the Description field, add Tags if you like, and click Save.

47. 47. Do not assign access at this time. We will do that when we build the gallery (this is just one room in that gallery). Click Done.

48. 48. Continue building the rest of your rooms (pages), following the steps outlined above. When you have finished building your rooms, it will be time to put them all together into one marvelous gallery!

49. 49. This is the easiest and quickest part, combining all of your rooms into your gallery. To begin, select Collections on the Portfolio tab.

50. 50. Click the button New Collection.

51. 51. In the Collection name field, give this collection the name of your gallery. It will contain all of the rooms you've previously created. Add a description if you'd like to.

52. 52. The option for Page navigation bar should have a check mark next to it.

53. 53. Select Next: Edit Collection Pages.

54. 54. A list of all your pages will appear in a box labeled Add pages to collection. Click the little bubble next to each of the pages (rooms) that you want as part of this gallery.

55. 55. Click the button Add Pages.

56. 56. These pages will now appear in the area labeled Edit Collection Pages.

57. 57. If the rooms are not in the proper order (room 1 at the top, room 2 next, and so on), use the little gray arrows on the right to move them up and down into their proper order.

58. 58. Click Done.

59. 59. To set the access, click the tab labeled Share.

60. 60. You will see a list of all your Pages and Collections. Find the Collection you just created and click the small icon opposite it in the column labeled Edit access.

61. 61. In the Edit Access window, make sure that this Collection has a check mark next to it, then click the button labeled Add, next to the access level you would like to set.

62. 62. The rest of the options can remain at their default settings, so simply skip them.

63. 63. Click Save.

That's it! Your gallery is now open!

How it works...

Your pages will now have tabs at the top, which visitors can use to navigate through your gallery. There will be an audio player on each page that they can use to listen to the recordings that you made. They can also download the transcript.

There's more...

Next, you will find a few additional ideas for creating frames and a welcome page.

Creating frames

In this recipe, we set the frame to 10 pixels, but you can set the size of the frame to any thickness you prefer by simply typing in a different number; the larger the number, the thicker the frame. By default, the frame is solid black, but, with a little tweaking of the code, you can have just about any color you want, and you can make a frame that appears 3D.

The following instructions outline how it's done:

1. 1. After adding your image to your Text Box block (step 14) but before saving it (step 15), click HTML in the upper right-hand corner of your HTML toolbar.

2. 2. A window will open with a few lines of code that look similar to the snippet in this screenshot:

3. 3. Locate<img style="border:, following which is the size you set for your border (I set mine to 25px), then the type of border (solid), and then the color (black).

4. 4. To change the solid border to one that appears 3D, carefully change the word solid to either one of the following options: groove, ridge, or outset.

5. 5. To change the color of the border, carefully change the word black to another color. You can find a list of web-friendly color names here: http://www.w3schools.com/HTML/HTML_colornames.asp. I've found that some of the names do not work in all browsers, but using the Hex codes does. You can try using a color name (type it exactly as the color name indicates), but if your color isn't working, try typing in the Hex code for the color instead.

   Note

   Hex codes contain a combination of six letters and/or numbers and begin with a # sign. The code for red is #FF0000. Rather than explaining how to figure out the codes (which can be done because they are actually mathematical expressions), I'm going to suggest simply finding the hex codes on the Web (by the way, Hex is short for Hexadecimal). Hex codes can contain letters: A-F and/or numbers 0-9. So, you will never see a hex code that contains the letter O. Characters that look like that are always zeroes.

   I have created a tutorial that will help you to understand hex codes so that you don't have to rely on a table. It also contains a page in which you can enter hex codes and see them displayed. You can find it at the following website: http://visibledreams.net/Web/color/color_1.html.

6. 6. Click Update and then click Save.

To make the frame for the previous image, the color was changed to DeepSkyBlue, but, instead of using the words, the Hex code #00BFFF was used. The solid border was changed to groove. Here is what the new code looks like:

Adding a splash page

Currently our gallery is set up to open to our first room, but you may want to create a splash page or a welcome page. You can create one using the first recipe in this chapter and add it to the collection you created when you made your gallery. Once you've created the page for your gallery entrance, and saved it, go to the Collections section on the Portfolio tab. You will see three icons to the right of your gallery collection. Click the one closest to the title of the collection. Once you select that link, you will see a list of all of the pages in your portfolio that are not part of another collection. Your splash page will be there. Select it and then select Add page. Once it is added to the list of pages that are part of your gallery collection, you will need to use the small arrows to make sure this welcoming page is the first one in the collection. Then click Done.

See also

• Language acquisition journal recipe in Chapter 2,Literature and Writing

• Making a photo journal using Picasa recipe