Topic: From Lightroom to Wordpress [SOLVED]

All,
I'm confused as how to proceed. We have a working handcoded web site and are moving towards a Wordpress-powered one. All images are maintained in Lightroom. I installed all the plugins.

Would anybody be so kind to provide a brief step-by-step tutorial how to put a gallery created with the Lightrooom Plugin onto an existing Wordpress page? Do I need the WP plugin at all or would the use of a code snippet make more sense?

If (what I expect) this process requires moving files per hand, please include typical folder structures.

Thank you so much.

Christoph

Re: From Lightroom to Wordpress [SOLVED]

WP-Juicebox (the dedicated Juicebox plugin for WordPress) allows you to create and embed Juicebox galleries from within the WordPress Dashboard.
If you want to embed a Juicebox gallery created with the Lightroom plugin into a WordPress page or post, then you'll need to do so manually using the baseUrl method of embedding documented here.

Here are the steps involved.

(1) Create your Juicebox gallery with the Lightroom plugin and save the gallery to a new empty folder of its own.
(2) Upload the complete gallery folder (not just the contents) to your web server without any modification to the contents within. (See note below regarding location.)
(3) Create or edit a WordPress page or post and select 'Text' as the input method (rather than 'Visual) for the editor.
(4) Paste the baseUrl embedding code into the editor.
(5) Click 'Publish' (or 'Update').

I would recommend that you upload your gallery folders to your web space's root directory for convenience but it does not matter where you upload your gallery folder to on your web server as long as the two paths within the baseUrl embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

For example, if your gallery folder is named 'gallery123' and you upload the complete gallery folder to your web space's root directory, then you could use the following embedding code (changing the background color and gallery dimensions as necessary).

<script src="/gallery123/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: '/gallery123/',
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '600',
        backgroundColor: 'rgba(255,255,255,1)'
    });
</script>
<div id="juicebox-container"></div>

Incidentally, if you plan to embed multiple galleries into your website, the 'juicebox.js' file should be loaded only once per web page rather than once per gallery so you might like to add the <script> tag loading the 'juicebox.js' file into your theme's header and them omit it from each gallery's embedding code.

Also, in a WordPress page where the gallery's parent container is determined by the theme's layout, I would recommend setting the gallery's width to 100% (so that it fills the width of the parent container) and the height to a fixed pixel value such as 600px. The parent container is unlikely to have a height specified via CSS (the theme will not know how much content will be present on the page) so setting the gallery's height to a percentage could cause the gallery to have an unexpected height (Juicebox will not be able to determine what the gallery's actual height should be a percentage of). A fixed pixel gallery height is much safer in such a scenario.

I hope these notes help.

Re: From Lightroom to Wordpress [SOLVED]

Steven,
thank you for your excellent support even on a Sunday for somebody who years ago paid a minor sum to your company... Great!
Christoph

Re: From Lightroom to Wordpress [SOLVED]

You're welcome!