Questions about customizing OPG

[robertwatcher]

I am posting these questions and my responses from a PM I received, in the OnePageGallery section for the benefit of everyone using my script
-----

I have everything setup and working (easy peasy).  I am currently working on customization.  I have a few questions and if you have a few moments I would really appreciate the help.

1)  I want to add my logo.  The php file for the index that actually drives the gallery (the OPG, not the client login) has a place at the top of the code that says $logo = "".  I have temporarily put in my business name, but I would like to use an image if possible.  Can you tell me how to do that?  I tried to look up the PHP and I just am not all that familiar and don't want to mess with it.

2)  Below the thumbs gallery there is a link to my order form (which I haven't yet but will host as a fdf file in a sub-directory called forms).

3)  Since displays are getting bigger and bigger and my statcounter tells me the minimum resolution I am seeing these days is 1024 I would like to change the max size of the images to 850 width.  I am not sure I did this right.  I only changed this in one place to read:

$img_cell_width = "850px";

I may also wish to change my thumbs to be a bit bigger and display them as a 3 column, 2 row.  These seems like it would be too hard to adjust if I change the tn_cell_width = "110px" to 210px, is that going to cause me problems?

3)  What size should I resize my thumbnails to?  From what I can see in the code, the default is 110 px with 10 padding so 100 would be my best guess.  Is that only the horizontal measurement?  What if I have a vertical portrait?  I can resize so that the longest side is 100px but I want to be sure this will work.

Ok, I am off to just "play" with the code.  The worst thing that could happen is I have to start over (eeks!).  I really really like what you have done here.  I have had my eye on this script and download for quite a while but am just now getting around to setting it up for myself.

Thanks much if you have time to help me out

[robertwatcher]

ANSWERS

1) - You can use html code in between the quotation marks to put &nbsp;whatever markup that you wish into the space below the gallery where the logo information goes. The only thing that you will need to be aware of, is that you cannot use double quotes in the html markup - only single quotes. The html tag used for an image is <img src='filenmame.jpg' />. Very simple.

2) Use this section at the top of the page, to change the link name and the url to your PDF file:

$linkname ="Order Form"; // If left blank between the quotation marks, the link will not display on the page
$link ="orderform.pdf";

3) Actually being that the OPG is built with tables, there is no need to define a size for your images - the table cells expand to accommodate whatever size images you put in. With the large image, you can set the width and height values to whatever you want. When the height is set to the default 1px size, the table simply collapses vertically to fit the height of the image plus whatever padding you define.

re - column/rows - you can make however many columns and rows you like. They can be anything from 1 column 1 row, to 10 columns or more and 100 rows or more. The math to handle any number, display it and to paginate that properly. is all in the php script that I have written.

re - thumbnail images - same as above, the cells will resize to accommodate whatever size you put in. The advantage of putting specific numbers in both the width and height properties of the tn_cell variables, is so that the cell doesn't just collapse around the thumbnail making uneven cell depending on the thumbnail orientation. If you enter the width as 250 pixels and the height as 250 pixels, the containing boxes will be square regarless of the proportions of the image.

re - resizing horizontal and vertical dimensions. In general a dimension is defined when resizing that will provide for an image that does not exceed that number whether the image is horizontal or vertical. &nbsp;So if using a finished size of say 100x200 pixels, you would end up with vertical images that are 100px wide by 200 px height and horizontal images that are 200 px wide by 100 px height. With the OPG however, you can put whatever size tn you want in each cell - - - even if a totally different size from other thumbnails. It will be centered to display properly.


--------------------------------



I have put together a test OPG with dimensions and logo suggestions that you made, to show that everything works flawlessly that way. VIEW OPG HERE: http://watchergraphics.com/opgtest/index.php?crnt=1

The code for the image in the logo area is this piece of code. You will notice that I not only added an logo image, but also created a link so that when the logo image is clicked on, it will send the viewer to a website. Be sure to note the single quotes around url, width, height, border, and alt attributes. If you use double quotes, you will get an error on the page and it will not function:

Code:

          <a href='http://finchandchimps.com'><img src='http://finchandchimps.com/imaging-media/fclogo.jpg' width='572' height='100' alt='Finch and Chimps Imaging Media Resource' /></a>

To show how the $tn_cell_width and $tn_cell_height can be used to customize the page, I defined the width as 250 px and the height as 350 px for a larger and longer proportioned cell size than the 200 px width and height tn I am using. The large image is 850 px width or height - depending on orientation.



If you want to put a logo at the top of the page, you will need to add html code to the table just inside the <body> tag. That is not something that I have provided a custom variable for, at the top of the page.

The code that I used for the words at the top of the page (or image logo or other html code could be placed in also), was a new table row entered under the opening table right before the " PAGE AND SLIDE COUNTER " table row. The code that I added in this example is:

Code:

<tr>
<td align='center'>
<h4 style='margin:0 padding:0; color:gold;'>THIS HTML CODE IS PLACED IN THE MAIN PART OF THE WEBSITE ABOVE THE 'PAGE AND SLIDE COUNTER' TABLE</h4>
<a href='http://rwwebhost.com/' target='_blank'><img src='http://rwwebhost.com/logo.jpg' width='580' height='65' border='0' alt='Host your website with Robert Watcher at rwWebHost.com' /></a>
</td>
</tr>

HAVE FUN - and PLAY

[robertwatcher]

I PUT TOGETHER AN ONEPAGEGALLERY INSTANCE THAT CONTAINS MANY ROWS AND COLUMNS


http://watchergraphics.com/opgtest2

Many do not realize how versatile this script is and how it can be customized to just about anything anyone would want with a little html knowledge (that anyone wanting to maintain their own website, REQUIRES).

[RachelNoah]

Robert,

Your script is amazing.  I am having a great time using it and I am so happy you have shared.  Thank you so much for providing a solution to photographers who do not wish to purchase expensive, slow, flash template.

This script is PERFECT for turning a blog into a BLOGSITE, without spending a bundle.  You are very generous to share it free.

[robertwatcher]

Thank you Rachel. Please be sure to spread the word around about my OPG - I love all of the publicity I can get.