CS2 web photo gallery styles and PHP?

I don’t see why not, as long as it’s on a server that supports it and you don’t mess with ps’s tokens when editing.

never work on an original template! save a copy to a new folder, rename it, and work on that!

I was hoping to try before ansering you, but life decided otherwise!

Thanks.

Francoise

You need to learn how to customize the Web photo gallery styles. There isn’t much documentation out there except what’s in the Photoshop help files. Perhaps I’ll put together a proper ‘illustrated’ tutorial one day..

Since you’re using the ‘Simple’ table version then it’s very easy to modify. And if you have access to something like Dreamweaver then you’re really in business.

The templates are in :
Program Files\Adobe\Adobe Photoshop CS2\Presets\Web Photo Gallery

Make a copy (within the same Web Photo Gallery folder) of the "Simple" folder and its contents and name the copy something like "Simple_Bar1". This is the name that will then appear on the Web Gallery styles pull-down menu in Photoshop.

The important thing to note is that there are 4 parts to the ‘Simple’ style:

Caption.htm
SubPage.htm
IndexPage.htm
Thumbnail.htm

Here’s how you get them to integrate with your existing website:

You need to copy 3 files [Caption.htm,IndexPage.htm and Thumbnail.htm] into a sub folder on your website (eg:"bar1_template"). Place the 4th one [SubPage.htm] into a subfolder within this "bar1_template" folder. The name you give to the subfolder isn’t important.

Load your website in Dreamweaver and then modify IndexPage.htm by deleting or modifying any values that begin and end with a % sign. That’s what the script uses to modify various items on the page as it’s created. Put whatever picture you want in the top header, set any colours, font sizes and atributes, attach a CSS style sheet, delete anything you don’t want to exist. Items like %HEADER%, %PHOTOGRAPHER%, %DATE%, %CONTACTINFO%, %EMAIL% can be deleted and those choices will simply be grayed out in the interface.

The only variables to not delete are:

In IndexPage.htm : the 2 GIF regerences (previous.gif amd next.gif) as well as %PAGE% and a little hidden bit named %THUMBNAILSROWS%.

In SubPage.htm : Leave the 4 broken image links. They’re the left/right and up arrows and the placeholder for the large version of your pictures.

BTW, Ignore the fact that arrow images are dead links. They’ll all be corrected when the website is generated. Just leave them alone.

When you’re done, copy the 4 files back into the "Simple_Bar1" folder in Presets\Web Photo Gallery folder. The script does not expect SubPage.htm to be in a subfolder so put them all together in the same Web Photo Gallery folder, they same way you found them.

Now when you can run the script by choosing the style in the usual Web photo gallery interface and set the ‘Destination’ as a folder on your website. Don’t choose the folder you used to modify the templates, create a new folder (ie: “Bar1"). When done, everything should interrelate properly and all your added bits and pieces will appear where they should. If you want to change what you did simply modify the files that are still in the :"bar1_template" folder, copy them to either the same Presets\Web Photo Gallery folder, overwriting what you did the 1st time, or create a new folder “Bar2" which will be a new addition to you styles. If you mick up just delete the folder with the style that doesn’t work as you’d like.

Note that only 2 pages really need to be modified in the Simple style; The SubPage.htm (which are your individual pages) and IndexPage.htm which is the indexes. Once you get started it will all make sense pretty quickly and you’ll be a wiz in no time.

Read the Photoshop help files on ‘customizing the Web photo gallery styles’ to get more info on how to modify the templates.

Russell

Great response! Russell – do you have any suggestions on how to change the Simple template files to use a frame. I want the multiple thumbnail rows that Simple template provides, but want to keep a small banner at the top of the screen when users scroll down the rows of thumbnails. It appears that %THUMBNAILSROWS% won’t generate rows of thumbnails if it even smells a FrameSet.htm file.
Thanks,
Steve

do you have any suggestions on how to change the Simple template files to use a frame

I think there are already a few ‘frame based’ styles. My best advice is to make a copy of the various styles and open them in Dreamweaver to see how they’re made and modify the various elements. Since you’re working on a copy you can’t break anything and you can learn by ‘trial and error’.

Russell

Hey Russell, thanks so much for that extensive write-up, it was exactly what i needed in almost every regard…

There’s only one problem.

The banner that I am putting at the top of the page alway’s comes up when I generate the galleries as dead. I’m also linking the banner back to the home index page, and the link is always dead too. Here’s the edited simple gallery sub-page, the part with the banner i’m inserting….
<p/>

<div align="center"><a href="../../index.htm"><img src=" ../../Photo%20Galleries/5-27%20PimpsHoes/5-27PimpsBanner.jpg " width="700" height="89" border="1"></a>

<p/>
I think what’s happening is everything looks good when I’m editing the index and sub-gallery files in dreamweaver, and save them into that folder in my website… But when i copy them back over to the photoshop styles folder, they somehow lose the ability to link correctly??????

For some reason, i guess either photoshop or dreamweaver doesn’t correctly intrepert the file name of the banner and the page i’m linking it to. When it gets generated it changes the html in the sub-page syle file to point to the file on my computer, instead of on the website.

I dont know if i’m explaining that clearly, but essentially what happens is the gallery generates, i upload it to the site and visit it, and while the banner IS on every image page and the gallery Index page, it’s dead, both the image and the link.

???

Thanks so much for your help, i really apreciate it.

Oliver Thomas

Keep in mind that your image path is relative to the directory structure of your website. So you have to modify the template in the same hierarchy/relationship that will exist when the browser is created by Photoshop.

Note I’ve replaced your spaces with "_" to get rid of all those darn 20%’s (ugh). Don’t leave spaces in your names. It just makes the code sloppy. The server needs something between letters so Dreamweaver will replace spaces with 20% if you don’t fix it yourself. Adding "_" keeps the code readable.

EXAMPLE:

In this case I’ll assume that you want the browser to work inside "5-27_PimpsHoes" and there are no folders already in there named images, pages or thumbnails. If there are then choose another name.

Your Website root folder/Photo_Galleries/5-27_PimpsHoes
/5-27PimpsBanner.jpg (<– banner pic) /Caption.htm /Subfolder/SubPage.htm /IndexPage.htm /Thumbnail.htm

Note how I put SubPage.htm in a folder named Subfolder(any name would do). Everythng else lives in the 5-27_PimpsHoes folder.

Modify the template files while they are in this relationship with your site. As previously mentioned usually only IndexPage.htm and SubPage.htm need modification.

Once done, copy Caption.htm,SubPage.htm,IndexPage.htm and Thumbnail.htm to the Photoshop’s template folder (as discussed earlier). You can also putll those pages from the 5-27_PimpsHoes folder as they’re no longer needed. You can store them in some storage folder to re-use/re-work them later if needed. You just don’t want to upload them to the server.

The Destination folder you will use to generate the website will be "5-27_PimpsHoes". Everything should then work.

Russell 🙂

PS: Perhaps we can use more family-oriented folder names for our discussions and examples to avoid anyone being offended. Look what happened to Don Imus. Seriously though… it is a bit offensive to old farts like me 😉

Oliver,

A comment regarding your site:

I think 3×32 200px images on the main page is a bit much. That’s 500 KB of thumbnails which will take about 5 minutes to load using dial-up. OK.. who uses dial-up any more. Still, to be nice, try using smaller thumbnails (150px) and spread things so there’s only 40-50 thumbnails per page.

Then again it’s your call – it’s your site. Just my 2 cents 😉

Russell

This forum lost the directory formatting I tried to indicate…

should read:

Your Website root folder/Photo_Galleries/5-27_PimpsHoes
____________________________/5-27PimpsBanner.jpg (<– banner pic) ____________________________/Caption.htm ____________________________/Subfolder/SubPage.htm ____________________________/IndexPage.htm ____________________________/Thumbnail.htm

Note how I put SubPage.htm in a folder named Subfolder(any name would do). Everythng else lives in the 5-27_PimpsHoes folder.

Modify the template files while they are in this relationship with your site. As previously mentioned usually only IndexPage.htm and SubPage.htm need modification.

Seriously, I can’t thank you enough Russell.

I was editing the indexpage.htm and subpage.htm in a folder within my site, but not the destination folder of the generated gallery.

Work amazingly.

You’ll notice I changed the name of the gallery on the site, both as a gesture of thanks, and after you pointing it out I realized another name for the night (which had many, most not NSFW) would do just as well.

I cut the thumbnale sizes down to 150, but kept them all on the same page. This is the biggest gallery I have, most are half this number of images, and I like that people can scan the index page and get a good idea of what a shot is, instead of trying to decipher a 50×50 thumb.

Again, thank you so much, and I hope you don’t mind my coming to you next time something come’s up that I can’t figure out…. Good help is hard to find on the internet sometimes.

Oliver Thomas

PS, I’ll also start_using_underscores_instead_of_spaces. Always wondered why those % signs were coming up in my adresses.

Glad I could help. The trick is very useful for generating browsers that integrate into an existing website layout. I’ll sometimes use a Dreamweaver website template to create the IndexPage.htm and SubPage.htm pages.

Create a new page from the site’s Template, from the IndexPage.htm page just copy and paste in the table containing the 2 arrows and the %pages% as well as the little table below it which contains %THUMBNAILSROWS%. You can trash the rest if you don’t need it. Save this new Template based page as the new IndexPage.htm

Create a second new Template based page and from the SubPage.htm copy the table with the arrows as well as the broken image placeholder below which is %IMAGESRC%. Delete the %NUMERICLINKS% if you don’t need them you can delete any of the %FILENAME%, %FILEINFO%, %CREDITS%, %CAPTIONTITLE%, %COPYRIGHT% tags below. This is your new SubPage.htm page (remember it’s saved in that subfolder).

One really kewl and useful thing is that %CAPTIONTITLE% and %FILEINFO% represent the "Document Title" and "Description" image Metatags (so much for consistency at Adobe…). This means you can add either or both of these to your RAW images while in Bridge and they will be automatically be inserted below each image in the browser. You can put %CAPTIONTITLE% and %FILEINFO% where you wish and set their font characteristics in the custom SubPage.htm page.

I do a number of fine art image galleries for clients and use the %CAPTIONTITLE% for the title of the piece (larger bolder font, 1st line) and then use the %FILEINFO% line for the medium, size and date on a second line (smaller font, no bolding). Thus I can easily add or remove pieces and regenerate the site from a master collection of reduced JPGs. One artist has over 300 pieces on her site (a reference tool used by her Agent) and using Metatags in this way has REALLY saved a ton of time!

Another tip for times when you want to resuse images later is to generate the 1st web browser with "Preserve all Metadata" enabled. Then you’ll have reduced JPGs available in the Images folder (with the "Document Title" and "Description" tags intact) and you can store these for recycling later on. If you want to strip the image metadata from the site before uploading (without the need to redo the site with "Preserve all Metadata" disabled) I would recommend jStrip which is a free utility that does the trick VERY quickly:

<http://davidcrowell.com/archive/2007/03/11/jStrip.aspx>

As you can see, I’m itching to put together a proper tutorial on this technique which I’m surprised is not more commonly used.

Cheers,

Russell 🙂

Oliver,

I’m not sure if you’re still watching this thread, but I put a detailed tutorial of this technique online at : <http://www.russellproulxtips.com/>

Russell

I am, and thank you.

Hi Guys…I’m unsure whether i should of started a new topic – But hope someone can help !? I have built a web site using MS Publisher www.studio143.co.uk (Yup…odd but first time with no idea of web design) Anyway i’m updating and amending it a lot. I have also created two web photo galleries in CS2 but when i drag the files across into the FTP area – you loose the website ! It only lets me have my website or my gallery. I understand this is beacuse of the index.html but haven’t a clue on how to resolve it??

I’ve created a blank page in publisher and made a hyperlink – but where do i point it too !? Should i have my gallery files on my hard drive ….please please help – I’m totally lost!

Many thanks

Heather

In photoshop I can’t access web gallery. Should I re-install the program? Thanks

Heather,
On your current website create a link to your gallery and rename your gallery to anything other than index.html.
If you are uncomfortable with renaming files, you can create a subdirectory and place your gallery there. Then it can have an index.html file name. But you will still need to have a link pointing to your gallery.
Actually using a subdirectory would be more organized.

Thanks for the help Silkrooster – But when i create the link and point it to the gallery ! Do i point it to the folder gallery on my hard drive or make a hyper link to the gallery folder in the ftp folder ! I think this is where i’m going wrong.

In MS Publisher you can highlight the word – select create hyper link and then either point to a folder or area within your pc or a web page etc ! Am i making sense ?

Much appreciated in advance

Hi Everyone….does anyone know the answer to my query !?

I’ve created a sub folder in the FTP bit with all my files for the gallery but how do i point the hyper link ?

Please please can anyone help ! I desperately need to get this gallery working on my web site

Thanks

Heather

You definately do not want it to point to your hard drive, unless your computer is being used as a web server.
More commonly people subscribe to a server which is what I beleive you are doing (going by your questioning)
A hyperlink takes the form of < a href = " folder / filename " >link text < / a >
I purposely placed spaces in the link so the forum did not parse it. The location can take two different types of addresses, absolute and relative. The absolute looks like – " http : // example.com / folder / filename " The relative looks like – " folder / filename " If the page in the same folder as the current page, then you do not need to specify the name of the folder.
Hope this helps

Heather,

The link to your slide-show is:
http://www.studio143.co.uk/Gallery/gallery.swf

so from your home page the link would be <a href="Gallery/gallery.swf">

Doe anyone know how to not have filenames in the flash gallery 1?

Hi Russell,

I wish I’d found your tutorial earlier! But there’s an issue I’m having that I wasn’t sure was addressed in the portion about metadata.

Using Photoshop CS2 templates and images with metadata, the images end up having the description plastered across the actual jpg itself. Is there a fix for this if you’ve already added metadata to all your images?

Vicki

Brand new to Photoshop,I would like to be able to put more than one photo on a page. Any ideas. Joe