Gardenbuddies.com-Where friends meet to share their gardens

How to make a photo album with E-mage-Getting Started

Garden Forum » F.A.Q's » How to make a photo album with E-mage-Getting Started « Previous    Next »

Author Message
Top of pagePrevious messageNext messageBottom of page Link to this message

Admin  Send Admin a private message!

Posted on Saturday, April 05, 2003 - 11:25 am:   Last Buddysize PhotosPrint Post

Setting Up Emage

If you haven't downloaded emage and installed it yet then please do so here. http://www.v-methods.com/emh/index.html

If you haven't downloaded WSFTP_LE and installed it yet then please do so here. ftp://ftp.ftpplanet.com/WS_FTP/ws_ftple.exe

Open your emage program and you will see the screen below.




Now in your toolbar at the top right you will see a yellow folder icon that I circled in red below.



Click on the folder icon and this is where you can set the directory to where your emage files(photo album) will be placed after you created your album.


The only line you need to change from the default value is the top line if you would like your album's folders and files to be place somewhere else. I have mine going to my c drive at C:/Documents and Settings. I did not change any of the other boxes below. Your's should read the same for simplifying this tutorial.

Admin
Top of pagePrevious messageNext messageBottom of page Link to this message

Admin  Send Admin a private message!

Posted on Saturday, April 05, 2003 - 12:06 pm:   Last Buddysize PhotosPrint Post

Making an Album

Click on the add files icon that I have circled below. Now choose which files (images) you would like to add to your photo album. These files may come from any folder or any drive on your computer. The files may come from different folders. You may choose any quantity of files you wish.



Now that you have chosen your files your screen should look like this.



Here is where you may choose the style of your photo album. I have shadows.htm selected but if you would like to select a different style then click on the select template icon I have circled below.



Now you are ready for the software to generate your album. Click on RUN at the top then click on GO




Your album has now been created and organized for you to upload to your website. Don't expect to see your album appear after you created it with emage. Remember your album has only been created on your computer and not on your webspace. Remember where your album was created. This is very important. Your folders and files that emage created for you reside in the directory you specified at the beginning of this tutorial. If for some reason you can not find these files you can do a search for index00.htm on your hard drive.

Here are the names and explanations of the folders and files emage has created. If any or part of these folders and files are missing then your album will be incomplete.

Folder name: images
This is where emage copied all your full size images you selected and made copies of them and then placed them in this folder.

Folder name: thumbs
This is where emage create thumbnail size photos of your full images and placed them here in this folder

Index00.htm
This is the template(album cover) that you selected linking your photos and thumbnails together.

The possibilities are endless when it come to customizing your album. You should practice making several albums with different templates before trying to customize your albums. Later in this tutorial I will explain some ways to customize your albums.

Admin
Top of pagePrevious messageNext messageBottom of page Link to this message

Admin  Send Admin a private message!

Posted on Sunday, April 06, 2003 - 06:58 am:   Last Buddysize PhotosPrint Post

Customizing Your Template

The template is the style sheet(album cover) that you chose at the beginning. Any template can be cutomized before you make an album and saved to the folder on your hard drive that contains the templates for emage. Custom templates can be created and posted right here for others to use or customize further.

When editing templates this must be done with a text editor such as notepad. If you try to use MS Word then you will corrupt your template because of the formatting properties word embeds into the template.

Let us now choose a template to edit BEFORE we make an album. First choose your template you wold like to edit by clicking on the template selection icon I have circled below. Choose classic1.htm



Now click on the icon to the right that brings up this template automatically in note pad.



On your screen you will now have the classic1.htm template in notepad. It should look like this.


Admin
Top of pagePrevious messageNext messageBottom of page Link to this message

Admin  Send Admin a private message!

Posted on Sunday, April 06, 2003 - 07:15 am:   Last Buddysize PhotosPrint Post

Before we start are editing of our template let's review a few html meanings that we will see.

<!-----anything inbetween these simples will not be seen-this is usally done to insert copyrights or notes---->

<img src="url of photo"> this indicates the placement of a image in the template.

<a href="url of link"> this indicates the linking properties of a image or text. Like clicking on a thumbnail to link to a full image photo. Or click on a text link to go to a website.

<hr> this indicates the placement of a solid line. You can specify its properties after it as shown in the template.

<table> this indicates the placement or arrangement of how things look. These will change the appearance of the template so they are best left alone.

<body text="#000080" bgcolor="#C0C0F0" link="#3000C0" vlink="#000080"> the first property text will change the color of the text, the second bgcolor will change the background color, the third link will change the color of the text for hyperlinks, the vlink is for visited links. These are the numerical values of colors to show exact colors. You made also change them to this for more generic colors. <body text="black" bgcolor="white" link="blue" vlink="green"> or what ever colors you choose.

<b> means bold lettering and this turns it off </b>

<center> this centers something and this turns it off</center>

Notice you must use the turn off symbol / at the end of where you want the formatting to stop. If you don't turn it off then it will apply to the whole template.

Admin
Top of pagePrevious messageNext messageBottom of page Link to this message

Admin  Send Admin a private message!

Posted on Sunday, April 06, 2003 - 07:54 am:   Last Buddysize PhotosPrint Post

Below is the classic1.htm template. I will insert my notes in red. Since every symbol means something be careful what you omit. The original template I have posted in black.


<html>
\red below is the software copyright. THis will not show in your album.}
<!-- E-Mage for Web template. (C)2002 V-Methods Software -->

<head>
This is where you can change the default value that is displayed on your browsers tab
<title>Gallery %PageIndex%</title>
<style type="text/css">
these are comments regarding fonts and size. Note the are inside of the <!---> tags. They will not show. To make these properties apply we would have to remove the <!--- before and the ---> after it.
<!--
body { font-size: 90%; font-family: Verdana, Arial, Helvetica; }
td { font-size: 60%; font-family: Verdana, Arial, Helvetica; }
a { text-decoration: none }
--></style>
</head>

This defines the colors of the template
<body text="#000080" bgcolor="#C0C0F0" link="#3000C0" vlink="#000080" alink="#8080E0">

This centers everything under the <center> tag.
<center>

This is our album heading. This is where the simple shadows was inserted in the shadow template. You can call your album anything you wish just type in your name inbetween <h1> and </h1> To change the font size of your heading you could use <h2> OR <H3> OR so forth.
<h1>Gallery %PageIndex%</h1>

This is defining the properties of the thumbnail tables (the table your thumbnail photos will be inserted into)
<!-- Thumbnail table -->
<table border=1 cellpadding=0 cellspacing=5 bordercolor="#8080C0">
<!--EM LOOP Count=3-->
<tr>
<!--EM LOOP Count=4-->
<td align=center>
<table border=0 cellpadding=0 cellspacing=0>
<tr><td align=center><a href="%Image.URL%"></a></td></tr>
<tr><td align=center><a href="%Image.URL%">%Image.Name%
%Image.Width%x%Image.Height%</a></tr></td>
</table>
</td>
<!--EM NEXT--><!--EM END-->
</tr>
<!--EM END-->
</table>

<!-- Navigation links -->

<!--EM IFNOT FirstPage--><a href="%PrevPage%"><b>PREV</b></a><!--EM END-->
<!--EM IF MiddlePage-->&nbsp;|&nbsp;<!--EM END-->
<!--EM IFNOT LastPage--><a href="%NextPage%"><b>NEXT</b></a><!--EM END-->


This is where the name emage is inserted into your album. This can be removed or changed to say created by ej or whatever. To remove it completely delete everything in green to replace the text just delete the link which is <a href="http://www.v-methods.com" target=_blank>and type your name in place of E-Mage For Web
<hr size=1 width=30% color="#000080">
<font size=1>This page created by
<a href="http://www.v-methods.com" target=_blank><b>E-Mage For Web</b></a></font>.

</center>

</body>
</html>


The world is not going to end if you make a mistake. Simply replace the edited template with a copy of the original and your back to way things where before trying to edit. I make so many mistakes when trying something new but I learn from them. I look for patterns and try to copy them. I experiment. This is the fun of learning. I like the freedom of being able to express myself with my own web space. Imagine being told what you could or couln't plant in your garden. It would get boring real fast.

Make sure you click save in notepad in order to save your changes. If you have a problem with editing a template post your whole template so others can help. Have a cool template that you made? Share it with us.

Admin
Top of pagePrevious messageNext messageBottom of page Link to this message

Admin  Send Admin a private message!

Posted on Monday, April 07, 2003 - 05:14 pm:   Last Buddysize PhotosPrint Post

Macros

Each image can be described by a set of parameters. They may be its number, dimensions measured in pixels, file size in bytes, and some other possible values. To automate calculating and inserting these values you can use macros. Macro is an identifier bracketed in '%' signs. It can be inserted in every point of a template. During interpreting, the macro will be replaced by corresponding to a current image value.

Images

%Image.Index%

Global number of an image. Count starts from the number one.

%Image.IndexP%

Image number on the current HTML page. Count starts from the number one.

%Image.URL%

URL of a big image (relative or complete, depending on the program's settings). Ordinary usage of it is in href attribute of the <a > tag.

%Image.Name%

Name of a big image without file path and extension. Can be used, for example, inside <a > tag's name attribute.

%Image.NameExt%

Same as %Image.Name% but with file extension.

%Image.Width%

Width of large image in pixels.

%Image.Height%

Height of large image in pixels.

%Image.Size%

Size of large image file in bytes.

%Image.SizeK%

Size of large image file in kilobytes.

%Image.Comment%

One-line comment for an image. All carriage returns will be replaced by spaces. Can be used, for example, in alt attribute of <img> tag.

%Image.CommentBR%

Comment for an image. If there were any carriage returns, they are replaced by <br> tag.

Thumbnails

%Thumb.URL%

URL of thumbnail (preview image) associated with a big image. Generally used in src attribute of <img> tag.

%Thumb.Width%

Width of thumbnail in pixels.

%Thumb.Height%

Height of thumbnail in pixels.

%Thumb.Size%

Size of thumbnail file in bytes.

%Thumb.SizeK%

Size of thumbnail file in kilobytes.

%Thumb.MaxWidth%

Peak thumbnail width.

%Thumb.MaxHeight%

Peak thumbnail height.

%Thumb.MaxWidthP%

Maximal thumbnail width on current HTML page.

%Thumb.MaxHeightP%

Maximal thumbnail height on current HTML page.

Pages

%PageIndex%

The current page number. Count starts from 1.

%PageCount%

The total number of HTML pages.

%PrevPage%

Relative URL of the previous page. Generally used in href attribute of the <a > tag to make references to the previous page.

%NextPage%

Relative URL of the next page. Generally used in href attribute of the <a > tag to make references to the next page.

%FirstPage%

Relative URL of the first page.

%LastPage%

Relative URL of the last page.

%Images.Count%

The total number of images.

%Images.CountP%

The number of images on the current HTML page.

Date and Time

%Now.Date%

The current date in default system format.

%Now.Time%

The current time in default system format.

%Image.Date%

The date of creation or the last modification of the image.

%Image.Time%

The time of creation or the last modification of the image.
Special

%Version%

Version of E-Mage for Web

Admin

   
Topics Legal