Journal
Textpattern + SimpleViewer
2 January 2006 › 26 comments
I advocate open source efforts on the web, and I love free software. Whenever I get a chance, I try to vote my dollar and support grassroots efforts, opting to donate money rather than buy expensive packages. The reason for this is two-fold. First, I am cheap and usually like to try something to see if I like it. Secondly, I love the potential that altruistic collaboration has for usurping big businesses, such as Firefox vs. Internet Explorer.
This article is about getting the open source CMS Textpattern working with the freeware photo system SimpleViewer. Last November, I made my wife her very own website, which includes a blog and photo gallery. Ever since we launched her site, I have been getting requests for a tutorial on how I got these two systems working together. I apologize for the lateness. Here it is…
Step 1: SimpleViewer
I am assuming that you are already somewhat adept at setting up Textpattern, and that you are familiar with various web technologies such as PHP and XML. If you haven’t already, go and download SimpleViewer, along with the PHP Build Script. While it is possible to disperse the files, and change the image locations via imagePath and thumbPath in the PHP / XML files, I have opted to keep all the files within a self-contained directory, /fotos/.
Basically, I have made an index.html page that is identical to the rest of the site templates, which are managed via TXP. This allows me to keep all relevant files grouped together. This is necessary, because despite being able to change the image directories, you cannot edit the location of the XML file relative to the SWF viewer, apart from purchasing the source code.
Upload your photo gallery directory via FTP. You should have these files…
/images/- set to 755/thumbs/- set to 755viewer.swfindex.htmlbuildgallery.phpimageData.xml
Step 2: Textpattern
In the Textpattern interface, go to Admin › Preferences › Advanced, and change your Image Directory to the location of your SimpleViewer images folder. In the case of my wife’s site, this directory is "fotos/images". This way, when you upload photos via Content › Images, they will automatically be ready for inclusion in your gallery.
Step 3: Build Gallery
Each time additional photos are uploaded to the /fotos/images/ directory, you will need to run the /fotos/buildgallery.php script. This will automatically scan the /images/ directory, and re-create the XML file accordingly, as well as save smaller thumbnail images to the /thumbs/ directory. I have made a browser shortcut to the PHP file for my wife.
Summary
There you have it, an easy way to create a Textpattern driven SimpleViewer photo gallery. The basic premise could also be used for a PostCard Viewer gallery instead. If you consider yourself a guru, you could probably get both viewers running from within the same root, sharing the /images/ directory. Now, go forth and make beautiful galleries with your newfound knowledge!
Discussion + Dissension
Comments closed after 2 weeks.
#1 matthew Smith
Nathan,
Thanks. This worked well, and was simpler than I thought. You write a great tutorial. Its kind of a bummer that you lose txp’s abilities to manage thumbnails and article images with this method. I dream of a world where both are possible – guess we’ll have to wait till the new earth :)
Here’s where I have this working: My wife’s blog redesign, I’m moving her from blogger to textpattern. Its still “under construction”, but have a look.
minismith.com
also, in case anyone is interested I found out how to make the flash background transparent so that you can throw a styled background image around your viewer if you want.
The method is to add
param name="wmode" value="transparent"to your object tag andwmode="transparent"to your embed tag. It worked well for me, and took care of some of the awkward margin’s around the photos.Adios y Gracias,
Matthew
#2 Nathan Smith
Matthew: I am glad that it worked out. They don’t call it “Simple”-Viewer for nothing, eh? Sadly, I do not think that managing thumbnails via Textpattern would be possible, because it dumps all images to the same directory, and just adds a “T” to the filename to denote thumbnail.
It would be possible to use Textpattern’s default
/images/directory, so long as you change the corresponding locations of your primary and thumbnails photos via the PHP and XML files. Just look for theimagePathandthumbPathin the code, and change them to an absolute location, four total changes.That’s a good suggestion about the
wmode. I was using that on the previous version of my portfolio for awhile, to simulate a loading screen. One of the drawbacks is that Macs purportedly don’t do well when Flash has transparent backgrounds. My new portfolio uses SlideShowPro. It’s great, and only $20.#3 Laz
Hi, I try to make the Textpattern + SimpleViewer stuff, but it’s not working. Can somebody send the buildgallery.php and screenshots from the admin pages? Thx, Laz
#4 Nathan Smith
Laz, the buildgallery.php file is available from the SimpleViewer web server downloads page. I don’t use the admin pages, so I can’t really send you any screenshots. Once you get the server-side files set up, you should be okay.
#5 Laz
THX! :D
#6 Kyle
HI! Thanks for the info. I have two questions though.
1. When I open my site in explorer the images sometimes load in the bottom right side of the page, then after clicking on one it goes back to the center/correct position.why?
2. When I make my browser smaller by dragging it from the bottom left my images get smaller and look pixelated. Is there a simple code to rectify this?
I thank you for any help you can give in advance!
#7 Nathan Smith
Kyle: I would have to see an example page to know for sure what you’re referring to. Perhaps the method you’ve used for positioning the Flash object on the page has a slight error. As far as the browser resizing your images, that happens because Flash is scalable, so if it runs out of room it will attempt to squish the image. If you put your SWF within a fixed-width div, this wouldn’t happen. I wouldn’t worry about it, even the SimpleViewer Demo scales down.
#8 Kyle
Thank you for getting back to me so quickly!
About the scaling issue.. The only reason this is a problem for me is because I am designing this site for clients to view work and when the images get scaled down it looks a little unprofessional. Can I ad a scroll bar to the bottom of the page to fix this? And bear with me, is there simple code to do so? Im not very html savy so Im also not sure where to put the code to edit the swf either.
One million thanks!
Kyle
#9 Nathan Smith
Kyle: I usually give a width to
objectdirectly with CSS. Instead of making it 100%, pick a pixel width, and that should keep it from scaling down too far.#10 Kristin
Hi. I am new to making websites and i just made one using simpleviewer. Is there a way to change the font that comes up above my thumbnails? I cant seem to find it, I can change the font below the thumbs only.
#11 Nathan Smith
Kristin: I believe this could only be done by purchasing SimpleViewer’s source code. Changing the font is something that can only be done from within Flash.
#12 Kristin
Thats great news I did buy the source code! The bad news is that although I have flash I have no clue how to change fonts in the program. Thanks.
#13 Nathan Smith
Kristin: I never bought SimpleViewer, so I can’t be of any more help to you. However, you will probably find the answers you’re looking for in the SimpleViewer FAQ. If all else fails, try shooting an email to the author. :)
#14 JFH
Kyle,
If resizing is a quality problem, you should read that :
http://www.airtightinteractive.com/news/?p=37
JF
#15 Stephen Chanasyk
Nathan, I was having the same problem as you setting up Simpleviewer to work with Textpattern and was getting a frstrated until I found this on the airtight site. If you look under Data Customization Options you’ll find this (though you might have found this already).
Basically you add a parameter called Flashvars to the obeject and the embed tag. It is then set to called “xmlDataPath=my_data/my_xmlfile.xml”
And it works. Allows me to use a textpattern article to hold the viewer and have the xml file and image folders anywhere I want.
I have added one gallery of photos to my site and now just have to work out all the other ones (Fire)
#16 Nathan Smith
Stephen: Thanks for that tip! I hadn’t dug around enough to find that in the data customization options. Too bad we can’t fork the image upload area from within Textpattern, aside from setting the directory in the admin interface. :)
#17 Stephen Chanasyk
ya, a bit of a pain. There is SimpleViewerAdmin. From what the site says you can administer multiple albums. It’s written in PHP.
#18 Nathan Smith
Stephen: Yeah, I had considered that, but for my wife, I didn’t want her to have to login to / use two different interfaces. She didn’t really want to make use of article images, so making Textpattern’s sole image dump the depository for SimpleViewer wasn’t a problem. That Admin would probably be great for a larger site using Textpattern though, to keep things separate.
#19 Stephen Chanasyk
One thing I just found out. There seems to be a problem with simpleviewer and firefox (#19 in the faq. my galleries display very small or clipped when viewed in Firefox v1.5). The solution is to change the DOCTYPE of the page that has the viewer (more info…). Otherwise it seems to work quite well with textpattern – except for the FTPing and such.
#20 Nathan Smith
Interesting find. That reminds me of the old issue of stretching things 100% vertically in XHTML. Try adding a height of 100% to your
htmlandbodyvia CSS and see if that helps at all. I’m not guaranteeing that it will, as I’ve not dealt with the Porta version. Example: View the source of my gallery page.#21 Bassam
Hello All
I’ve been trying to set up a flash photography site and would like to use Simviewer for my albums…I will have at least 5 albums and would like to load them into a SWF movie which will have the buttons, and is used as a backround.
I get it to work with one galley but since I need to have multiple galleries I have to move he XML file into a folder that contains all the files relating to the specific album, which means that the XML file is no longer in the root folder and thats when the problem acures,
My question is this, is it posible to modify the source code in the viewer.swf file so it will call on an XML file with a specific name (ex. gal1.xml, gal2.xml, and so on) that way I can place all the swf files and xml files in the root directory and with a button just call on the specific SWF file I need?
Thank you
bassam@shaw.ca
#22 Nathan Smith
Bassam: That would probably be possible, if you purchased Simpleviewer’s source FLA file. Aside from that, I don’t think there’s any way to edit the SWF directly. I’m assuming that you will have full access to change how it works if you buy the retail version, but I haven’t. Contact the author for more info.
#23 Bassam
Thank you for the reply
I have contacted the author but he has not responded yet (over a week) and I need to get this done asap.
Cheers
#24 Alex
Hy Matthew. First let me note that your work is GREAT and keep it up like that ! bravo! anyway so I draw things and I am really not into the things with any codding, so I wat to use background instead of some color with the simple viewer, but because I am dum I do not know what to do with the code. So you can take a look at elfuego.info -> click on gallery. This is the idea, but if you see there I want to make the border to go inside the gallery and I am afraid the only option is with some background image. So I am editing some basic html to do so. I am awaiting your reply ! Thanks in advance !
#25 Alex
Ok I did it :) but still there is one little issue ! It works dine under IE, but under Opera it color is some kind of forced and there is no background ! any suggestions ? Thanks !
#26 Nathan Smith
Alex: You’re using neither Textpattern nor CSS, so we’re really not on the same page here. I would suggest trying it without any iframes, and using something besides Adobe ImageReady to handle your code output. You might also want to try emailing the author of SimpleViewer, since I didn’t make it.