Editing Your TGP Page HTML

Introduction

Before you begin, make sure your brain is in HTML mode. From here out, it is assumed that you understand HTML at the source level. If you don't know HTML very well but want a very custom look to your site, we recommend locating a professional HTML developer to assist you. HTML coding is not a service we provide, and the tech support staff can only provide limited assistance in getting your HTML to look how you want it - this is why HTML knowledge is listed as a requirement when you purchase the software.

Editing the HTML for your TGP Pages is done through the administrative script. As you can see from the screenshot below, just select the "Edit HTML For" function, then the page you want to edit.

HTML


Planning Your HTML Ahead

Before you even begin working on your HTML in the administrative interface, we highly recommend that you layout how you want your TGP Page to look. This can be done with your normal method for creating HTML pages. Once you have a look that you are satisfied with, save the HTML so you can work with it later in the adminisrative interface.

Take a moment now to look over your HTML so you are sure you know how it works. The better you understand your HTML now, the easier it will be for you to set it up in the administrative script later.

The Main HTML and Template HTML Boxes

When you get to the HTML editing interface you will be presented with one large text box at the top and a smaller box at the bottom. They will be labeled Main HTML and Template HTML. This is where you will place all of your HTML for the page you are working on. The first time you view this page, the default HTML that is included with the software will be displayed. You should look this over to get a general idea of how things work. Add a few test submissions to your TGP, then rebuild the pages so you can see how the HTML is written to the page. From there, you can begin making changes to give the TGP pages your own look.

Main HTML

This box will contain 95% of the HTML you want to use for the page you are working on, and controls the basic layout of the page. In the places where you want a gallery to appear, you will use special template code to indicate that. When the software builds your page, it will then replace that special code with the code that you enter in the Template HTML box.

Template HTML

In this box you will enter the HTML for a single gallery link. This HTML will then be used for each of the galleries displayed on the selected page. This HTML will generally include the gallery URL, description, number of pics, and category.

Main HTML - In Depth

The Main HTML box will contain 95% of the HTML for your TGP pages, and controls the basic layout of your page. This portion will also tell the software where you want your gallery links inserted, but not how you want them to look. The template HTML tells the software how you want each gallery link to appear, and that is covered in the next section.

We are going to give a very simple example to work with in this section. Below is a complete HTML page, and this is an example of the HTML you can use in the Main HTML box. <html> <head> <title>TGP</title> </head> <body> #%GALLERY_1%# #%GALLERY_2%# #%GALLERY_3%# #%GALLERY_4%# #%GALLERY_5%# </body> </html> As you can see, this block of code contains the necessary elements to create a very basic HTML page. The part that should not look familiar to you are the #%GALLERY_1%# through #%GALLERY_5%# portions of text. These are the special codes you need to use to tell the software where you want each of the gallery links placed. On this sample page, there will be 5 gallery links displayed.

The #%GALLERY_x%# Values

In all of the following text x represents a number between 1 and the total number of galleries you have choosen to display per page on your TGP. It is important to note that the x value does NOT correspond with the post IDs that are assigned to submissions.

These values tell the software where to insert your gallery links. Every time the software encounters one of these values, it will examine it to determine which gallery to place in that spot. The software will then take the Template HTML, fill in all of the values contained in it, and put the resulting code in the location where the #%GALLERY_x%# value was.

Categorizing

The software allows you to categorize your main TGP pages. In order to do this, you have to use special versions of the
#%GALLERY_x%# values. For every category you have, there will be a corresponding #%GALLERY_x%# value for you to use. Several examples are listed below. 
      CATEGORY                 #%GALLERY_x%# Value
      --------                 -------------------
      Hardcore                 #%Hardcore_x%#
      Old & Mature             #%Old & Mature_x%#
      FuNkY CaTEgoRy           #%FuNkY CaTEgoRy_x%#
The category name you enter in the #%GALLERY_x%# value must match exactly with the category name you entered in setup.cgi. An example of producing categorized output is listed below. <html> <head> <title>TGP</title> </head> <body> #%Hardcore_1%# #%Hardcore_2%# #%Hardcore_3%# #%Old & Mature_1%# #%Old & Mature_2%# #%Old & Mature_3%# #%FuNkY CaTEgoRy_1%# #%FuNkY CaTEgoRy_2%# #%FuNkY CaTEgoRy_3%# </body> </html> When the software comes across the #%Hardcore_1%# value, it will look up the first Hardcore gallery in your database. The software will then take the Template HTML, fill in all of the values contained in it, and put the resulting code in the location where the #%Hardcore_1%# value was.

Template HTML - In Depth

The template HTML is what will control how each of the gallery links will look on your page, and this portion of your HTML will contain several template values. Template values can be recognized within HTML because they are surrounded by #%%# characters. For example, using #%CATEGORY%# in the template box will tell the software to replace #%CATEGORY%# with the category for the gallery it is currently printing to the HTML file.

This section will explain each of the template values that you can use, and how you go about replacing your HTML with them so you get the correct display. We'll start out by explaining the available template values.

Value Replaced By
#%POST_ID%# The ID number assigned to the gallery
#%GALLERY_URL%# The URL to the gallery
#%DESCRIPTION%# The description of the gallery
#%CATEGORY%# The category of the gallery
#%NUM_PICS%# The number of pics in the gallery
#%APPROVE_DATE%# The date when the gallery was approved
#%APPROVE_TIME%# The time when the gallery was approved
#%ICONS%# If this is a partner submission, the icons for this partner
#%CHEAT_URL%# The URL where surfers can report broken links and cheating sites
#%FONT_COLOR%# The font color to use for this gallery
#%FONT_SIZE%# The font size to use for this gallery
#%[B]%# This will make partner submissions bold
#%[/B]%# This will close the bolding HTML tag for a partner submission

Now that each of the template values has been explained, we will give a simple example of how you can take your HTML and insert the template values in the correct locations. Say that you want your list of gallery links to look like the following:

12-20-2001 - 18 Hardcore Pics
12-20-2001 - 12 Softcore Pics
12-20-2001 - 14 Teen Pics

What you need to do is look at your HTML and detemine what tags will generate one of those gallery links. In our case, the HTML we have pulled out is:
12-20-2001 - <a href="" class="orange">18 Hardcore Pics</a><br> Now we can take this HTML and start plugging in the template values at the correct locations. The first thing we will do is replace the category with the #%CATEGORY%# template value:
12-20-2001 - <a href="" class="orange">18 #%CATEGORY%# Pics</a><br> Next, lets put in the number of pics on the gallery, #%NUM_PICS%#
12-20-2001 - <a href="" class="orange">#%NUM_PICS%# #%CATEGORY%# Pics</a><br> Finally, we'll add the #%APPROVE_DATE%# template value to insert the date and the #%GALLERY_URL%# value for the URL to the gallery
#%APPROVE_DATE%# - <a href="#%GALLERY_URL%#" class="orange">#%NUM_PICS%# #%CATEGORY%# Pics</a><br> That's all there is to it, you've just created your first template. All of the HTML you need to use is listed on the line directly above. It is important to note that you will only enter the HTML for a single gallery link in the template field.

Finishing Up

If you're pretty sure you've got everything laid out how you want it, and have setup the template values, you're ready to save it. Just select the function at the bottom of the page to save this HTML for the pages you want. You will then be returned to the main page of the administrative interface where you can run the rebuild function. Once you have done that, you can view your TGP page to see how it turned out. If you need to make any changes, just follow the same procedure.

To see example HTML and instructions for setting up custom pages, visit the templates section of the owners lounge. Many times having a look at some examples will get you pointed in the right direction. Please note that these examples are provided by other users of the software, and are therefore not supported by our tech support staff.