Hint 2 - iframes

I never thought anyone would find out

Whoa, what gives? Yes, you are absolutely reading about a Wordpress-based photography site on a blog that is no longer based on Wordpress. I seemed to get a fair bit of traffic on my site from people wondering how to do this, so I am leaving these posts here for posterity. That said, the internet world has evolved quite a bit in the last four years, so I now use a system that is simpler in some ways, but immensely flexible. So read about this newer flat-file CMS approach as I document it over the next few months.

This article is now partially out-of-date. A newer version of the PageView plugin now dispenses with the use of a .css file entirely and instead the user specifies the appearance of the iframe through parameters passed to the plugin using a Wordpress short code. Please see my recent article on plugin headaches for more specifics. Ignore the section on hacking the .css file inside the pageview plugin. The usefulness of the plugin for embedding galleries is undiminished, and you may still want to read on if for no other reason to savor and enjoy my charmingly quirky writing style. Or not.

The html-based iframe tag apparently is one of those embarrassing things that no self-respecting professional code jockey would ever be caught using in a website design. But just as the chimpanzees at the zoo have no idea that they are part of the Hominidae family and go ahead and pleasure themselves in public anyway, I am not a professional code jockey, and any sense of shame is vastly overshadowed by the pleasure I get from a dirt-easy way to embed my Lightroom HTML galleries directly into a web page.

So I assume you are using Wordpress for your photo website. And you want a way to embed a Lightroom gallery into a static page. Here is the hack:

Go to your Plugins panel in the Admin page of your site. Click on the Add New button near the top and search for the Pageview plugin. Find this plugin and add it to your Wordpress site and activate it. This very simple little plugin will now allow you to embed a link to any other webpage into your page or post and display it in its own window. All you need to do is insert

 [pageview url "title" description] 

into the post. The url is a fully specified link to the gallery you want to embed. I like to keep these galleries organized in a separate folder on my website outside all the Wordpress/Thesis stuff. In my case, I put each gallery in its own folder under a master ‘holder-folder’ for all the galleries. So my url would look something like http://www.mysite.com/LRgalleries/Chimpanzees/index.html I leave the title and description fields blank.

So you go and do this and it looks stupid, with a teeny-tiny window, slider bars, garish colors and all sorts of cruft surrounding the gallery. What you need to do is modify the CSS file that the plugin uses so that it will display your galleries seamlessly.

First, use your favorite ftp client to gain access to your website, and then navigate to the /wp-content/plugins/pageview directory. Copy the pageview.css file back to your computer and use a text editor to delete everything in it and replace it with this:

    div.pageview
    {
    margin: 0px 0px 0px 0px;
    width: 100%;
    font-size: 0.1em;
    background-color:#efeee5;
    }
    div.pageview iframe
    {
    width: 100%;
    height: 660px;
    background-color:#efeee5;
    }

What you will need to do is change the background color to the same background color your site’s pages have, and also change the height to a pixel value that will display the entire Lightroom gallery without displaying the slider bars that will rat you out to the world as a shameful iframe user. Once you have a satisfying size for your galleries, you won’t need to modify this css file anymore. You may have to play around a bit with the height to get it right. Then upload the modified pageview.css file back into the place you got it and replace the existing file.

One final thing that can make this look seamless and help you cover your tracks: make a custom CSS style and enclose your pageview link inside a div with that style. So here is what you want to do. Get into the custom file editor in Thesis and add this to the custom.css file:

    .custom .pgvw {
         background color : #efeee5;
    }

and then when you code your page that is going to have the embedded html gallery in it, wrap it in a div (making sure you use the html editor!!) like so:

[pageview http://www.mysite.com/LRgalleries/chimps/index.html "chimps" gallery]

Voila! Embedded galleries in your page and no tell-tale tracks of your web-design apostasy.


categories:  css, portfolio, programming, web design   tags:  tips