WebSpawner.com Blog

In today’s post we cover the use of Image Gallery Groups. Image Gallery Groups are used to group together multiple Image Gallery pages. With Gallery Groups, you can set up each webpage in your website to display different Image Galleries than the other pages in your website, so that only those Image Galleries relevant to each webpage are available.

The instructions provided in this post will be more relevant if you have already created several Image Gallery pages and have already added additional webpages to your website account. With an Enhanced WebSpawner website account, you can create as many Image Gallery pages as you like and can also add as many webpages to your website as you like, all at no additional cost (click either of the two links to see previous Blog posts providing instructions).

To illustrate the use of Gallery Groups, we will use an example website containing reviews of automobiles. The website has several webpages, each focusing on a different car manufacturer. Several Image Gallery pages have been created, each containing pictures of cars produced by different auto companies. The goal in using Gallery Groups with our example website is to have only the Ford car image galleries display when the Gallery button on the Ford webpage is clicked, and only the Dodge car image galleries display from the Dodge webpage, and so on. The Member Menu of our example website account is shown below.

To begin creating Image Gallery Groups, click the Image Gallery tool (under the orange Add-Ons tab in the Member Menu) as shown above.

The Image Gallery tool window displays with a few buttons and a pull-down menu of all existing Gallery pages as shown below.

Click the Manage Gallery Groups button.

The Gallery Groups window appears with a list of existing Gallery Groups (our example account has no groups created yet) and some buttons… click the New button.

Give your Gallery Group a name which will help you remember which webpage it should go with.. we’ll start with a Group for our Jeep Galleries and name it “Jeep gallery group” and then click the Continue button as shown below.

The Gallery Groups window reappears. Next, we select the new Gallery Group by name from the pull-down list and click the Edit button as shown below.

A list of all existing Image Gallery pages appears. Click to put a checkmark in the box next to each Gallery page to be included in this Gallery Group and click Update when done, as shown in the example below.

Now the Gallery Groups window appears again, this time showing our new Jeep Gallery Group in the pull-down list. We can now click the New button and repeat the steps above to create more Gallery Groups as desired for the Ford, Dodge, Pontiac, Honda, and Toyota Galleries.

When you have finished creating your Gallery Groups and editing each one to assign the Image Gallery Pages to the proper Groups, close the Image Gallery tool window.

The next step is to Modify each webpage and indicate which Gallery Group should appear when the Gallery button on that webpage is clicked by a website viewer.
Click to select one of your webpages under Step 1 in the Member Menu and click the Modify button under Step 2, as shown below.

Scroll down in the Modification form to the Image Gallery step, and select the desired Gallery Group from the pull-down menu, shown below.

Be sure to complete the Modification process by clicking Continue at the bottom of the form and then click the “I Like It” button at the test page preview to save and publish your changes. Repeat these steps to assign your other Gallery Groups to the other webpages in your account.

Gallery Groups have many different uses depending upon the purpose of your website. For example, in a family website, you can create a different Gallery Group for each family member, or for each birthday, holiday, or event.

A few parting notes:

• You can assign an Image Gallery Page to more than one Gallery Group.
• You can assign a Gallery Group to as many different webpages as you like.
• Each webpage can display either ‘All Image Galleries’ or just one selected Gallery Group.
• By using descriptive names for the Image Gallery Pages you create as well as for the Gallery Groups you add, you can make it much easier to keep track of things and have the desired pictures display from each webpage in your account.

There are a number of media hosts online that allow users to upload and host their own sound or music files for free. In this post we’ll cover how you can utilize the services of a free media host to embed a sound file into your WebSpawner website so it will play automatically for visitors to hear.

Many free media hosting sites exist, including FileFactory, 4shared, DivShare, MediaMax, and SoundUpload. Some offer paid upgrade options for even more storage capacity for “power users.”

The process of creating an account, uploading a sound file and embedding the hosted sound file in your website is basically the same regardless of which media host you choose, so we’ll walk through the steps using the free services offered by SoundUpload.com. Before you begin, you should have your sound or music file on your computer’s hard drive, located where you can easily find it, and saved in a common audio file format such as MP3.

Open a new window in your web browser, and go to http://www.soundupload.com/.

Click ‘Register.’

The Register form prompts you for a Username, a Password, and a valid Email Address; enter these (remember your choices) and click the ‘Register’ button.

A confirmation message will appear stating “Your account has been setup and you may now access it.” Click the ‘Continue…’ link.

Next you are prompted to provide your Username and Password; enter them and click the ‘Login’ button.

Under ‘Upload Your Audio’ locate and click the ‘Choose File’ button.

Navigate to the location of your sound file; click on the file name and click the ‘Choose’ button.

When prompted to “Make it Public?” select ‘No, Please hide it’ (this helps prevent your sound file from being used by other people without your permission). Then click the ‘Upload Now’ button.

A confirmation message stating “Successful!” appears to indicate that your file was uploaded. Click the ‘Your Audio’ link in the bar at the top.

The ‘Viewing Your Audio’ screen shows the uploaded files in your account. Click on the name of the sound file (be careful to avoid clicking the “Delete Audio” link beneath it).

Click in the box titled “Embed Audio onto Webpage” and select all of the code within the box by pressing Control-A on a Windows computer or Command-A on a Mac (the Command key has a small apple on it).

Then, copy the code by pressing Control-C on Windows or Command-A on a Mac.

Now you are ready to embed your sound file into your WebSpawner website. Open a new browser window and go to http://www.webspawner.com.

At the upper right side of the WebSpawner homepage, enter your Username and Password, then click the ‘Login’ button.

In the Member Menu under Step 1, select the webpage to which you would like to add your sound file, and click the ‘Modify’ button under Step 2.

Scroll down to the Body Text step and click inside the box (you’ll probably want to click beneath any text you have entered there, so your embedded sound file appears lower than the text on your webpage). Now paste your copied code into the Body Text box, using Control-V on a Windows PC or Command-V on a Mac.

At the bottom of the Modification form, click the ‘Continue’ button. Then, at the test page preview, click the ‘I Like It’ button to save and publish your changes.

Your webpage will contain your embedded audio file, which will play automatically for visitors to hear when they view your page. The embedded file will appear on your webpage as shown in the image below, with controls that allow the viewer to pause or replay the sound file and adjust the sound volume.

Creating additional pages is easy with an Enhanced WebSpawner account; in fact, you can add as many pages as you like with no limit and no additional cost. In today’s post we’ll show you how.

To begin, login to your WebSpawner Enhanced account with your Username and Password, and you’ll see the Members Menu for your account. Pages you have already created, including your Index or ‘Start’ page, appear in the list under Step 1. To add a new page, click the ‘Create’ button under Step 2 as shown below:

The page Creation form appears as shown here:

This Creation form is quite simple with only a few steps, as the WebSpawner system will automatically apply some selections (such as Layout Template and Colors) from your Start page in order to create a uniform look among all pages within your website.

The Creation form prompts you to enter the following for your new page:

1. Headline - the title text to appear at the top of the webpage
2. Body Text - the content information for the webpage
3. Image - select whether or not to include an image from your computer

Type in your desired Headline and Body text. It is important to enter some Headline text (do not leave the field blank), as it will be used for the name of your webpage in links and the URL address. Then click ‘Yes’ if you would like to add an image to the webpage, and click the ‘Test My WebPage’ button to continue, as shown in the sample below:

If you have clicked ‘Yes’ to add an image to your page, the following Image Upload screen appears… click the ‘Choose File’ button as shown:

Next, navigate to the desired image file on your computer; you may use .gif, .jpg, or .png file formats. Select your image file as depicted here:

Next, click the ‘Transfer Image’ button to begin the image upload:

The upload may take several seconds, depending upon the size of the image file and the speed of your internet connection. When the transfer is complete, a confirmation message appears briefly:

Soon afterwards, a test page preview will display. You can click ‘Let’s Modify It’ to make additional changes if needed; however, you can always Modify your page again later if desired. Click ‘I Like It’ as shown below to save your changes and publish the new page:

After you have clicked ‘I Like It’ your new page immediately becomes available for viewing online. A confirmation screen appears, providing the URL address for your new page as shown below. You can make note of the URL address if you like, but it really isn’t necessary to do so… the WebSpawner webpage builder automatically* links together all pages within your account, so that visitors can easily navigate your multi-page website (more info on links follows below, and be sure to see the special note regarding auto-linking at the end of this post).

Click the green ‘Member Menu’ button to continue:

The Member Menu for your account will be displayed, with your newly-created page now appearing in the list of webpages under Step 1:

Now you can proceed to ‘Create’ another new page in the same manner by clicking the ‘Create’ button under Step 2 and repeating the process as before. Be sure to click ‘I Like It’ at the test page preview each time in order to complete the process. Remember, with an Enhanced account you can add as many pages as you like to your website with no limit!

Every time you go through the page creation process, your new pages will be added to the list of pages in your Member Menu, as shown in the example below:

For every new page you add, a link will automatically* be added to all of your other website pages for easy “click-able” navigation, as shown here:

Some of WebSpawner’s Layout templates will display a compact pull-down menu of links, rather than displaying the links in a list. Regardless of which Layout template is selected, if you add 9 or more pages to your account, the links list will automatically convert to a pull-down menu, as shown here:

The pull-down menu takes up less space on your page, while still providing links to all of your other pages… viewers simply click on the menu and pull down to select the desired page link:

Regardless of how many pages you add to your account, the WebSpawner system will automatically style them all to match your selections for the Start page in your account. If you Modify the Start page and select a new Layout template or Color options, all of the other pages are automatically updated to match when you complete the Modification process (by clicking ‘I Like It’ at the test page preview).

However, if for some reason you do not wish for all of your site’s pages to have the same matching style, you aren’t restricted either… you can enable Expert Mode (discussed in detail in a previous post here) to make pages have different styles.

*One parting note: when you Modify your Start page, there is a checkbox option to “Automatically link all webpages together” as shown below:

The default is for this option to be selected, and it is highly recommended to keep this box checked. If you click to remove the check-mark from this box, your pages will no longer have automatic links to and from all other pages within your account… this makes your site much more difficult for viewers to navigate.

For WebSpawner members with Enhanced accounts, creating a consistent-looking multi-page website couldn’t be easier:

1. Create and Modify the first (a.k.a. “Index”) page to taste;
2. Click ‘Create’ (under Step 2 in the Member Menu) to add a secondary page, fill in the fields for Headline and Body Text, upload an Image if desired, and complete the process by clicking ‘Continue’ at the bottom of the form and ‘I Like It’ at the test page preview;
3. Repeat #2 as needed to add more pages (as many as you like).

By default, the WebSpawner engine creates all additional pages with the same layout template, colors, backgrounds and other options as selected for the Index page. If any of these options are changed on the Index page, all secondary pages are automatically updated to match, making site-wide style changes a snap.

Sometimes, however, a user may wish to add pages that are unique, rather than following the same style as the Index page. This can be done using Expert Mode, which is found under the ‘Options and Preferences’ tab in the Member Menu, as shown below:

Don’t let the word “Expert” scare you; setting Expert Mode to ‘On’ simply allows you to toggle additional options in the ‘Modify’ form for secondary pages. We’ll cover these options in further detail below. To make changes to any secondary page, simply select the page under Step 1 in the Member Menu and click ‘Modify’ under Step 2, as shown here:

By default, the Modify form allows changes to the Headline, Body Text, and Image, as well as providing options to add an Image Gallery, Voting Booth opinion poll, and Meta Tags information. If Expert Mode is turned on, a small button labeled “Expert Mode Options” will appear at the top of the Modify form, as depicted here:

To enable additional options on the Modify form, click the ‘Expert Mode Options’ button. The following window will appear:

By default, all three options are checked. If you click to uncheck one or more of these boxes, additional options will appear on the Modify form for your page when you click the ‘Back to Modification’ button. The modification options which are toggled on or off by the three checkboxes are as follows:

1. Unchecking the first box adds modification steps allowing for use of a different Layout template and color as well as a different Background color or texture;
2. Unchecking the second box adds modification steps allowing for a different Email Address and Hit Counter style, as well as options for a Yahoo Search Engine box, Guestbook, Free-For-All Links, and Email-A-Friend feature;
3. Unchecking the third box adds a modification step to allow different Links options than those used on the Index page, including options for automatic linking of all other account pages, for using the same default links as entered on the Index page, and for the manual entry of additional links.

Simply uncheck the boxes as desired and click ‘Back to Modification’ to access the Modify form with the additional options. When you complete the Modify form be sure to click ‘Continue’ and then click ‘I Like It’ at the test page preview to save your changes.

When Expert Mode is enabled you will have the ability to turn on these additional options for every secondary page in your account. If you choose to leave all three Expert Mode Options checked for a page, that page will still be auto-updated with any Modification changes you make to the Index page. In this manner, you are given maximum flexibility to modify each page in your account to your satisfaction while still providing the option for a uniform look and easy style updates across select pages.