Active Web Hosting Logo


Working With Mambo
Image Gallery

There are quite a few image gallery add-ins for Mambo. However, most may not work on Active Web Hosting servers due to the fact we keep 'safe mode' activated. However, you can create a simple, yet useful image gallery using Mambo itself, without any extra components, modules, etc. This method may also be preferred as it also lets you control what images are displayed on your site. Remember, you are responsible for any and all images which are displayed on pages on your domain.

Create Your Gallery Offline

Before you start, you'll want to create a gallery directory on your hard drive so you can upload it to your Mambo directory. After that, you can just add photos in the directory you wish in your gallery. Create subdirectories for each category such as photos, artwork, etc. And maybe in those create subdirectories such as flowers, etc. Organize things as you wish.

Remember to make thumbnail images for each image you want to display. You can do this using a paint program such as Paint Shop Pro PhotoShop or Gimp. If you have Windows XP, you can also create thumbnails by doing the following:

  1. Right click on an image or group of images that you want to reduce the size of.

  2. Select Resize Pictures.

  3. Click the Advanced button.

  4. Click next to Custom. A good size is 120 x 120 for most Mambo templates though you can make them larger if you wish.

  5. Click on the box next to Make pictures smaller but not larger. Be sure that Resize the original pictures (don't make copies) is unchecked. Click Ok.

  6. It's best to rename the files so that they do not have any spaces in the filenames and instead of (Custom) use -thm added on to the original filename. A good bulk renaming tool for Windows is The Rename.

Setting Up A Mambo Gallery

  1. Upload your gallery directory (delete any thumbs.db files first) to your Mambo directory. Do not place it in the images or any other subdirectories.

  2. In the Mambo Administration area, go to Content -> Section Manager.

  3. Click on the New icon at the top of the page.

  4. Type in Gallery for both the Section Title and the Section Name.

  5. Click the Save icon at the top of the page.

  6. Go to Content -> Category Manager.

  7. Click on the New icon at the top of the page.

  8. Type in a name for your category for both the Category Title and Category Name. This could be anything such as Artwork, Photos, or whatever you plan to put into your gallery. Think of these Categories as albums.

  9. Choose Gallery from the Section drop town box.

  10. Click the Save icon at the top of the page.

Adding A Gallery Page

  1. Go to Content -> All Content Items.

  2. Click the New icon at the top of the page.

  3. Type in a title (and title alias) for the page. This is what will show up on the page and in the list of content items.

  4. Choose Gallery for the section, then choose a category.

While it might seem like it would be easiest to create you pages with Mambo's built-in WYSIWYG (What You See Is What You Get) editor, it's probably best to enter the code using plain HTML. To do this, click on the HTML icon which is located in the toolbar above the text box, the last icon in the second row. This gives you a plain text editor to work in. Type in the following code to start. Note that highlighted areas you should replace to fit your specific page.

<p align="justify">
Put your discriptive text here. You could put what type of camera and conditions were used for this set of photos, or what type of paints or pencils, etc. you used to draw the picture, or even a link to a license agreement to use clip art. If you're presenting wallpaper or clip art, instructions can go here to tell users how to download the images and use them.
</p>

<div align="center">
<table cellpadding="3" cellspacing="0" border="0" width="100%"><tr>


<!-- This Is A Block To Display An Image -->
<td valign="top" align="center"><font size="1">
<a href="gallery/your_category/your_image.jpg" target="_new">
<img src="gallery/your_category/your_image-thm.jpg" border="0" alt="Image Description">
</a><br>
Type in your description here.
</font></td>

<tr></tr> <!-- This Separates Rows Of Images -->

<!-- This Is A Block To Display An Image -->
<td valign="top" align="center"><font size="1">
<a href="gallery/your_category/your_image.jpg" target="_new">
<img src="gallery/your_category/your_image-thm.jpg" border="0" alt="Image Description">
</a><br>
Type in your description here.
</font></td>

</tr></table></div>

Note the areas in red need to be changed to match your path to your gallery and filename of your images and thumbnails. Also it's best to give each image an alt text and a description. Each area consists of blocks and these blocks can be copied, pasted and edited to add more images. Note the row separater of <tr> and </tr> tags. Use these to start another row of images. Be sure you do not put too many in one row and throw your template or page off.

Click the Update button at the lower right of the editor window when you are done. Don't worry if your images do not show up in the WYSIWYG editor. They most likely will not. Finally, click the Save icon at the top of the page.

Create A Menu Item To Your Gallery

  1. Go to Menu -> mainmenu. Click on the New icon at the top of the page.

  2. In the Content area on the top left, find Table - Content Section and click in the circle to the left of it. Click the Next icon at the top of the page.

  3. Type in Gallery for the Name.

  4. Click on Gallery from the list of Sections.

  5. Parent Item should remain top.

  6. Select your access level.

  7. On the right in the Parameters, find Category Description and change that to hide.

  8. Change the following to hide: Date Column, Author Column, Hits Column, Table Headings, Navigation Bar, Order Select, Display Select, and Filter.

  9. Click the Save icon at the top of the page.

  10. Refresh your new page and click on your Gallery link in your menu.


Previous Page: Links Database [ Index ] Next Page: Providing Downloads

 


Home - Support - Management - About Us
... Active Web Hosting, 213 N Stephanie St G318, Henderson, NV 89074 ...
(702) 449-2337