Black & White Photos of New York

iView Media Pro : Making A Custom Web Gallery

CHAPTER I: AN OVERVIEW

I want to explain how I use iView Media Pro to create all the customized Web Galleries on this site - but I’m going to have to begin with an overview (how boring).

I have one gallery created for Prints for Sale that have things like Product ID, Mat and Print sizes and cost. How these fields are used to allow users to buy prints from the site and display custom information will be in the last part.

So Here We Go

I have a folder where I keep all images that may end up in a web gallery. I call it, WebImages. The files are all in Tiff format, already at 72 dpi, and in RGB mode. In general I like to make the longest dimension for these files the same as what I expect to show on the web - in my case the longest dimension is usually 600 pixels.

Later, when you create the gallery you can resize them if you need to but I’d just as soon not do any more compression than I need to.

I don’t know if there’s any real benefit in keeping all the source web files in one folder - it’s just the way I started.

Next you need to create Catalog Sets

CATALOG SETS

So here you have my category sets (upper left corner) with “All Prints for Sale” selected.

On the right are the images in this set. You can sort them about twenty different ways, or you can drag and drop them into the order you want. When you save the catalog, this order is saved so you don’t need to do it again (unless you really want to).

In the simplest case, once your Category Set is ready, you select MAKE -> HTML GALLERY

This is where you get to chose “A THEME.” The theme actually consists of 2 template files that are installed beneath wherever your iView Media Pro application has been installed.

On a PC - they are normally installed beneath the Program Files folder:

There are many options to choose from when you create the gallery, such as how many rows and columns should be on the thumbnail page; whether the jpg that will be created should be scaled to a smaller size, image quality size for the jpg and a few other parameters.

During this phase you will select where the gallery should be created on your hard drive and you can chose to either have iView Media do the ftp upload (this is new in version 3) or you use Dreamweaver or whatever FTP software to upload the html gallery to your site.

The structure of what will be created on your hard drive:

The index files contain the thumbnails that the user clicks on to get to the page with the larger image and other information such as captions, or in my case the button to buy the print.

P7M - you won’t have that. That some software I’m using to create the top drop down menus.

Previews contains the thumbnails that are displayed on the index pages.

Expand the Source folder:

The names for the html files are created based on the filename of the original tif source file. The actual large images are in the sub folder: image.

One of the nice things about naming the html pages based on the file filename is that the name remains constant. Some systems I’ve used named files based on a numbering system. This meant that every time you regenerated the gallery with new files, the number of the html page would change.

Another nice thing in basing it on the file name is that when things do go wrong - let’s say during uploading - you can figure out what didn’t get uploaded properly.

And finally - each page can stand on it’s own. If you would like to send a URL to a particular page - you can do it easily and don’t need to figure out what number is what. Also, just as a side note - no frames here. If search engines come across your html file and someone clicks on it - they don’t get lost - there will be a link to the index page (let’s say index15.htm) that it’s associated with.

Now, if you’ve chosen one of the templates that came with iView Media Pro - then you just need to do the uploading to your web site and you’re finished.

In the next chapter I’m going to concentrate on serious customization of the two template files in your theme: Index.htm and Media.htm

Each set of templates (think of them as themes, or skins) are grouped in sub-folders under HTML Templates

Make a copy of the Aqua folder or any theme folder. Call it whateve you like. In my case I started with the Photo Tech folder and made a copy called, My Photo Tech-v2. You don’t want to muck around with the original templates. When you are in the Make / HTML Gallery of the catalog, iView will allow you to chose whatever Theme, including the one you just copied and named, that it finds in the HTML Templates folder.

So here are the two template files: Index.html and media.html. These files are used as templates when you generate your web gallery.

iView Media Pro is going to use the index.html file as a model for all the numbered index files that it sticks in your web gallery folder.

It will use the media.html file as the model for your full-image page (all those pages that have the names of image files in the source folder).

TOKENS

As iView generates these pages, it will substitute the information from fields in your category set where it finds iView tokens.

Open a catalog. Select one image and make sure that the info tab is clicked (selected). On the left you’ll find the stuff that the catalog can include in gallery files.

You won’t see the following fields listed in your version: Print Size, Mat Size, Price, Show. These are custom fields and I’ll get into that in the last chapter when I get into how to generate a gallery that uses Paypal to accept orders. (My own site is using my own cart mechanism, but the idea for passing custom field info through the Web Gallery generator is the same).

 

Note: the names of fields in the catalog don’t always match the tokens that are used in the template files. For example: at the bottom, where you fill in the description it says, Description.

Fine and dandy, but in the media.html template the token that translates that field is:

(iView:Caption)

So now go into your trusty html editor and open the media.html file. You should see a piece of code that looks like this:

(iView:Caption)

When you generate the gallery - the text from your catalog description field (”This shot was originally…”) will get substituted in the web page that is created for this image.

As an aside, you are also able to set a switch (it’s on the settings tab when you are creating the gallery) that allows caption data to be passed through as html. Which is to say if you wanted to put the bold code <b>be bold</b> in the caption box, it would be passed through as is. I can’t say that I’ve found this useful - but who knows - maybe one day.

You will find a list of of all iView Media Pro tokens and how and where they can be used here:

Some only make sense to use on the media.html template page, and some are used on the index.html page.

As far as the look and feel of the web gallery - that is left up to your own imagination. You can modify the cosmetics however you like. In my own case, I added the menu bar at the top and moved things around a bit.

WHAT SHOULD ALWAYS BE BACKED UP

The iView Media Pro catalogs are stored in the folder iViewCatalogs. These files not only contain all the pointers to your web image tif or psd files, but all the annotations you’ve added.

If this file, catalog_2005_raw.ivc (example I’m using) is corrupted or lost or whatever - all the entries that you’ve added will be lost as well. Assuming that just the catalog is gone, all your image files are still around and you would need to sit and re-enter all this information again. (egads).

So the files to be backed up whenever changes or some substantial amount of time is expended on them:

1) Your iView catalog(s)

2) The Templates that you’ve customized.

And of course as a general rule it’s good to have backups of your image files - but that has nothing to do with iView.

In the next chapter I will describe how to use Custom iView Media fields to create a Paypal cart mechanism, and a couple of other tricks.

But you should now have enough of a feeling for how this works so that you can create your custom gallery and publish your vision to the world.

Customizing iView for Paypal

iView Media Pro Custom Fields and Paypal

Straight out of the box, you are not going to see fields like “Print Size” or “Mat Size.” These are custom fields.

So, under EDIT / CUSTOM FIELDS create and name the custom fields that you want to display. These are also fields that you will eventually pass along either to your own shopping cart, or to a Paypal shopping cart via an Add-To-Cart button.

The Provider field is built in, and I’m using it to provide a unique ID for each product but I could just as well as created another custom field called ID to do the same job.

Here is what the Media.html template file looks like in design mode:

One thing you’ll notice is that the fields are invoked by number. At least this is how it worked in iView Media Pro 2. I haven’t tried it yet in version 3. What this means is that the first custom field you create, in this case Print Size, will be represented by the (iView:Field_1) token in the html code. This is funky. But once you set it up - you’re good to go.

In my case, where I’m using a backend database, I simply want to pass along the Product ID number. This is an example in Active Server Page from my code:

<form action=”/CartReview.asp?mode=add&prodid=(iView:Credit)” target=”_parent” method=”post”>
<input type=”image” border=”0″ src=”/Graphic/addtocartz.gif” width=”113″ height=”18″>
</form>

(iView:Credit) - oh this is getting more complex than I want it to be - but in the previous version the Provider field was called Credit. Now it’s called Provider.

Let me go to a Paypal example:

After logging in, go to the MERCHANT TOOLS TAB.

On the left, under Business Solutions, click on: Website Payments Standard

Scroll down until you find:

THE FREE PAYPAL SHOPPING CART.

And now - finally you are going to create the Add To Cart Button code and copy it.

<form target=”paypal” action=”https://www.paypal.com/cgi-bin/webscr” method=”post”>
<input type=”image” src=”https://www.paypal.com/en_US/i/btn/x-click-but22.gif” border=”0″ name=”submit” alt=”Make payments with PayPal - it’s fast, free and secure!”>
<input type=”hidden” name=”add” value=”1″>
<input type=”hidden” name=”cmd” value=”_cart”>
<input type=”hidden” name=”business” value=”your@payal_email.com”>
<input type=”hidden” name=”item_name” value=”What you named the print “>
<input type=”hidden” name=”item_number” value=”777″>
<input type=”hidden” name=”amount” value=”25.00″>
<input type=”hidden” name=”no_note” value=”1″>
<input type=”hidden” name=”currency_code” value=”USD”>
<input type=”hidden” name=”bn” value=”PP-ShopCartBF”>
</form>

So now all you need to do is substitute a couple of iView custom tokens.

You take this code as your add-to-cart template. I believe there are even other fields you can pass along through Paypal, but this is the simplest form.

<input type=”hidden” name=”item_name” value=”(iView:AuthorTitle)”>

This is what you named the print in the iView Catalog.

<input type=”hidden” name=”item_number” value=”(iView:Credit)”>

Whatever field you are using for your unique Product ID goes here.

<input type=”hidden” name=”amount” value=”(iView:Field_3″.00>

The price of the product. Remember, (iViiew:Field_3) is a custom field that you defined as the Price in the catalog.

And there are other Paypal Fields that can be used to push more information to the paypal shopping cart.

You also need to add a VIEW CART button, and they give you the code for this on the same page where you create the button. There are also tables that can be setup in Paypal to deal with tax, and shipping charges. It’s beyond the scope of this article to get into all that.

Once you’ve pasted the PAYPAL FORM into your media.html page, you don’t need to change it again. Whatever information about the print that you put into the catalog will be translated when the web gallery is created.

There is one more tecnique that I found useful. If you go back up and look at my custom fields you’ll find a field called: HIDE.

Hide can have two values: hide, or nohide.

If you are familiar with CSS, you can use this field to call on two separate DIV STYLES for showing or not showing anything on the page. For example, if you want some pages in the gallery to show the ADD-To-Cart button, and others not to - you can create two CSS styles: one called “hide” and one called “nohide”

nohide might look like this:

.hide {
visibility: hidden;
}

.nohide {
visibility: visible;
}

And your bit of code that you want to hide might look like this:

<div class=(iView:Field_5)> “here is my cart, I hope you buy a lot of things. </div>

When Field_5 contains the text: hide, then the division will become:

<div class=hide> “I don’t want you to see the cart on this page </div>

I found this useful for a while when I was making catalogs where some products were for sale, and others weren’t and they were in the same gallery.

Now, that the you’ve read through all this - the drawbacks. If you want to sell several sizes, you would need to develop a combo box, which got fed from the fields in the iView Catalog. For me, right now this is impractical. But there may