When it comes to web development, I have a propensity to revisit old problems. I just don't like defeat... or maybe I just excel at procrastination? Some months ago I tried to integrate Gallery into WordPress but gave up for several reasons. I thought I'd share how I achieved an embedded Gallery page that does away with PHP bloat (WPG2 not required), fits in with my blog design, and is valid XHTML.
If at first you don't succeed, try again. I did, and I met with the same failure (invalid XHTML produced by the WPG2 plugin). So try again. I did, and this time have a solution I like.
Firstly, some environmental details. I'm using K2 with WordPress and Siriux with Gallery. The width of my content area in K2 is 780px; the Siriux theme is set to a page width of 700px so that it comfortably sits inside my K2 content width.
iTry an iframe
The iframe element lets you create a "page within a page" by embedding one HTML/ XHTML page as a scrolling "inline" frame inside another. I wrote a simple template for my WP theme folder called page-gallery.php:
<?php /*
Template Name: Gallery
*/ ?>
<?php get_header(); ?>
<div class="content">
<p>
<iframe class="galleryframe" src="http://www.bioneural.net/gallery2/main.php" width="100%" height="1050" frameborder="0" scrolling="auto">
Sorry, your browser does not support inline frames. However, you can still view the gallery <a href="http://www.bioneural.net/gallery2/">here</a>.
</iframe>
</p>
</div><!-- Close content -->
<?php get_footer(); ?>Notice get_sidebar() is omitted; this is because I wanted the gallery to fill my entire page width to avoid squeezing the albums into a tall and narrow column.
I had previously created a page for WordPress called "Photos". I went to WP Admin and chose Manage > Pages > Photos > Edit. Instead of the Default Template I chose the Gallery template I had just created in the Page Template control. After saving I experimented with different variables for frame width, height, and scrolling before settling on the above.
Before (user clicks "Photos" tab, then image to go to "external" new page):
After (user clicks "Photos" tab to display embedded Gallery):
Note: The iframe element is valid XHTML 1.0 Transitional, but is depreciated in the Strict DTD.
The gallery remains accessible outside of my WP installation. Independence is a good thing.
Link directly to a Gallery item
Update 24.02.07: See this comment for JavaScript that will allow you to link to a specific Gallery item (album or photo) rather than just the Gallery main page. The main page will show in-frame first but is quickly replaced by the page you specify. It seems you need to use semantic permalinks to get this working, so that the two URLs (WP page and Gallery item) are linked by a single query ("?"). Example syntax is given in the comment below.
Hi,
you are my hero!
I've spent several weekends now trying to embed gallery into my webpage by using the wpg2 plugin - with no success, just like the majority of users searching the forums on the embed project's website.
Just by accident and lucky enough i found your website!
Thanks' a ton!
I'm running a website about music, arts, fashion and stuff - located in Berlin/Germany and photos are some important part of our reports especially when we report about events we attended.
Your solution works perfect for me. One thing i can't figure out is if i link to an album from some report how can i manage that the link leads to the album in the embedded gallery and not to the external application?
This is the link for the embedded gallery page i created using your tutorial. And this a link for one of the albums. Hopefully you even know this.
Thanks' again for finding a way to solve a big problem in some easy way.
Greetings from Berlin/Germany
Roman
Hi Roman; glad I could help.
I see what you mean; on this page I link to a Wellington gallery, but the link was opening the gallery in a new window "outside" the site design. I've now changed this to do what you are asking.
You can target an iframe on another page, but I think this requires some JavaScript. Luckily I found some here (see Mr J's comment). So the steps are thus:
function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))
window.frames["gallery"].location=url
}
}
onload = loadIframe;
Seems to work; see how you get on with it.
Hi there!
Your solutions suits my needs perfectly. It seems very simple, but there's one thing I don't get. How do I add my own images? I realize that the code needs to be changed to my own URL, but that makes the gallery page look like sh-. And you said I won't need Gallery 2, or what?:S
Here's what happens.
If I leave the URL as it was in the code it looks perfect though.
Zaipe, you don't need the seemingly troublesome WPG2 plugin, but this hack was designed for use with a Gallery 2 installation. Having said that you don't need to use Gallery; you could edit the URL in the above template to point to any form of gallery software or even to a set of static pages.
If you are using Gallery then that software provides a web interface to upload your images. Or, if you use a Mac, you can upload direct from iPhoto as I describe here.
I see on your site that my Gallery displays fine in your iframe (although I thought I was blocking hotlinking!); if things look wrong when you link to your own Gallery (by editing the template page), do you have the Siriux theme active?
hi, thanks for putting so much efforts in helping! somehow it doesn't work for me - maybe i did something wrong... mind taking a look at my template?:
[Edited]
did i do anything wrong? when it comes to the efforts i put into my website i'm a giant but regarding coding i'm more like a size zero model... maybe i need to put the java into my js file, but i don't know how...
cheers
roman/berlin/germany
Roman, code doesn't always play nice in my comments section. I'll e-mail you some blocks of code.
Thank you. Thank you. Thank you!
You're welcome Enda. I notice that your Gallery is framed within this page, the URL ending ?page_id=21.
Based on discussion with Roman, if you try to load a specific image from a link elsewhere (using the above JavaScript) e.g. like this, I think it will fail to re-direct. We suspect that the extra "?" in the permalink is the cause. Using a semantic page URL (you can set the permalink structure in WP Admin) should allow this e.g. like this.
man, you're the best!!!!!!!
thank you very much!!! I was going crazy trying to use wpg2!!!!
the best!!! I'll link you!!! you're my rescuer!!!!! my angel!!
woooow!!!
bruce for president!!!!
Hey Vetto; sounds like you spent a few nights on this problem, huh? Glad I could help!
Does the job come with a vehicle? I'd like to customise the Air Force One interior...
Bruce, I was giving this some more thought today (round and around I go!). The #1 reason I continue to use WPG2 is its ability to very cleanly allow single picture or album insertion into blog posts. This is done with a nice toolbar button and popup interface, complete with thumbnails.
What I would prefer is to have a picture gallery that was all part of Wordpress. Managing two database applications (Gallery2 and WP) has its shortcomings.
There are a few such gallery plugins for WP out there, ANiga and fGallery+ being some of the best. Of course, Mac users like us are spoiled with our Gallery upload plugin for iPhoto. I can't give that up anytime soon!
What do you see as the practical shortcomings of two databases Rob? I think an entirely separate installation is a bonus personally, because it doesn't tie you down to any one blogging platform (for example). Say you want to ditch WordPress (as a few noted bloggers seem to be doing lately); you can retain your Gallery and most likely re-integrate it with your new platform of choice.
I'm with you on the value of the iPhoto2Gallery plug-in, although for some reason it won't upload images from my wife's Olympus unless I've edited them in Photoshop. Weird.
I guess when I'm working in WP 98% of the time, it feels like an extra several steps to log into the Gallery admin just to change/add a caption. Or to move one photo to another library. In those cases (where the albums are embedded in WP anyway), it would be nice to have some sort of truly seamless integration so that one never has to leave WP to do such minor changes.
But you're right, the biggest advantage of a standalone Gallery is its independence of WP. I'm curious... point me to some bloggers that have switched away from WP. And switched to what?!
I guess I'm just reevaluating my photo blogging lately. Truthfully, I'm not much of a photographer, especially so lately. And the few photos I take, they're with my wife and our mutual camera. So really, I'm beginning to think that I could get by with her Flickr account and just integrate that into my blog with one of the few fine plugins.
The photos that I take in earnest are the ones for my tech projects. But even in those cases, I'm beginning to think having them in a designated "gallery" is redundant. Especially when I frame a blog post describing the steps around the photos. Why have a separate album of just the photos?
De-bloat. That's what's on my mind lately. :)
The two I can remember are Kristin Pishdadi and Chris Davis: they both jumped to Habari. Expression Engine is the other platform I recall, but can't say who has gone over from WP.
Dear Bruce, Thanks for the lesson. It helped a lot. Cheers
I was getting more and more frustrated trying to get Gallery2 to display as I wanted in my blog.
Bruce "Thank You" you have saved my sanity it looks great now
Bruce,
Nice job. I was uncertain about why I could not get the plugin to work correct and was going to use the redirectify plugin to go to my gallery, but this works great.
Thanks again,
Drew
Brilliant, simply brilliant. I am a mac user, so when the wpg2 plugin was anything but plug and play, I was thrilled to have landed upon your site. Thanks!
This is by far the simplest and most effective way of embedding gallery2 on wordpress! Thank you for sharing this with everyone!