New Look for Root Gallery

This HOWTO was written by Luis Borruel. Many thanks to him for sharing it!

Link to forum thread that has a list of innovative root gallery designs. Click here

You better watch it: http://www.pbase.com/nostromo In summary, the pbase headers are removed (we’ll see how) and the main options are made available in a new layout together with a nice automatic slideshow. Feel free to use it in your gallery. If you have time to visit my gallery and leave some comment (or vote if you like them) it will be appreciated.

Pbase provides a rather nice service for sharing pictures providing automatic html-code creation for the pictures you upload. That is really usefull for most of the people as you do not have to care about updating links, creating thumbnails and so on. However, all the customization lies in the use of style sheets (CSS). This is not straighforward for the non web developer (I knew nothing about CSS before arriving to pbase) and it is meant to give you limited control on the web page formatting: colors, fonts, sizes, etc …

Pages would have all the same structure if not by a tiny little chance pbase gives you. I must admit it went unnoticed to me until I saw some pbase root galleries that seem to magically change the look. In the edition page that pbase provides for each gallery there is a “description” field (after the gallery name and title) in which you can include html formatted information if the html flag (just the next field) is checked.

When the html flag is checked, the information included in the field “description” will be inserted in the generated web page without modification. As this code will be at the top of the page, this is your chance to put all the relevant html-code that will build your gallery page. There is, however, an exception to this. Even if the html box is checked, pbase modifies the text strings including urls (like http://www ….), the software takes for granted you wanted to include a link and automatically includes the relevant html code to create a link. So urls are modified … unless you quote them, ie you have to use “http://the.URL.you.wish.”

In the root gallery design I propose you, it is neccesary to use a customized CSS together with a large section of html/javascript code inserted in the description field. The customized CSS file takes care of how the format of the contents will be (background colors, text colors, margins, borders, etc …). In the CSS file, I have customized the new colors for the text, the background color, but more important: you can remove the pbase header by using a negative top-margin. In this way the header is not actually visible because you push it off the visible page.

Once we got the format, we need to include the contents. In the description field we will insert both the javascript code necessary for the implement the slide show transition and the html code to place the links/text of the page.

You may try to reproduce first my page, and then try to customize it to your taste.

• Create a new gallery for the test (do not do it with the root gallery for the moment), lets call it “trial” gallery. The gallery will be empty.
• Edit this trial gallery

• In the “description” field

copy and paste this text. IE users please try this link

• Check the “html flag” below the description box
• Click the update gallery button

• In the style sheet field click on “edit style sheets”

• Create a new style sheet. Call it the name you fancy (we’ll call it trial_css in this example).

• Remove the initial text that is included in the new style sheet. Copy and paste this text.
• Click on the Update CSS button

Now you almost have it. The page will have a dark gray looking.

• Click on the “back to the gallery” link at the bottom of the page

• Choose in the style sheet field the new style sheet we have just created (trial_css or the name you chose). Click on Update gallery.

• Here it goes ! Display the gallery and check if it works.

Now that you have it working you can customize it to your taste and, once it is right, update the root gallery.

First of all you have to create a .gif file with your name. You can use Photoshop or the program you like most, but make sure the background is transparent. The height I used for mine was 67 pixels. Once you have created it, upload it to pbase (I recommend to place it in a hidden gallery ) and copy the relative path of the image. Go to the descrition field again, where we have all the html and javascript code, search and replace my link (http://www.pbase.com/image/56552690/original.jpg) with yours: NOTE: Strange as it seems, the url corresponds to a .jpg image. However the retrieved image is the original .gif one.

Don’t forget to click the update gallery button.

Ok you want to show your pictures instead of mine. Do not worry, it makes sense and I won’t be ofended . In my slide show, all the images are 500×366 pixels. You can use those dimensions, otherwise you have to change the numbers in red color in the html code (the one inserted in the description):

<DIV class=display id=divid style="BACKGROUND-IMAGE: url(http://i.pbase.com/o4/83/618983/1/56552555.space.gif);
       WIDTH: 500px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 366px">

Once you have selected the images for the slide show, upload them to pbase (again, hidden gallery recommended) and write down the exact link of the images in their original size. With that list, replace in this part of the javascript code my links with yours:

//the files to be shown
var imageFiles= "http://i.pbase.com/o4/83/618983/1/56552142.1.jpg;"+
"http://i.pbase.com/o4/83/618983/1/56552144.2.jpg;"+
"http://i.pbase.com/o4/83/618983/1/56552146.3.jpg;"+
"http://i.pbase.com/o4/83/618983/1/57154365.rovinj.jpg";

be careful that all links but the last have a trailing ”;” inside the quotes. In the last one, it is outside the quotation. I have to do it in this particular way because pbase tend to automatically convert strings starting with “http: …” in html links. If you quote them, the software let them unchanged.

Note 1: I must warn you (Thanks Matias!) that this is not a safe way to link images, the right way to do it should be www.pbase.com/image/NUMBER.jpg. However, using the links in that way makes Internet Explorer (with Firefox it is fine) to switch images slower and the slide show does not work well in slower PCs. I’ll try to find a fix for that. Suggestions are welcome.

Note 2: You can have a look at CJ’s root gallery (http://www.pbase.com/cjburianek). She is using the slideshow with no border and different image sizes.

Again search in the html code (description field) for my data and replace it with your info. Do not write a long text or it won’t fit.

The timing of the slide show is controlled by two parameters: displaySecs and transition_msecs. Both are located in the javascript code. The first one sets the number of seconds each image is displayed, whereas the second one sets the number of miliseconds of the fade in/out process. The default values are 5 secons for displaySecs and 1000 for transition_msecs. You can search for them in the code and replace the inizialization values.

It is a common question “how to edit the root gallery”. Due to the fact that the pbase header is removed, the direct link to the root gallery edition is lost. That is a minor drawback that can be solved: - Editing another non-root gallery and changing in the url box of your browser the non-root gallery name by “root”. - Create a link in your root gallery to the edition page. Of course, that link will be only useful for you, not for the visitors of your galleries.

Based on some users experience, trial pbase users are not allowed to use javascript commands in their pages. It looks that the “javascript” sentence is removed automatically from the user description text. This is not the case for PBase supporters.