Topic: JB Pro and WordPress image location [SOLVED]

Greetings and thanks for producing and supporting such a wonderful gallery display tool!

99% of my galleries are for posts that have attached media. For those, all I have to do is click the [Add JuiceBox Gallery] button.

Now I need to be able to build galleries that will use images associated with different posts. For example, I might have 10 portrait session posts, each with media and a single JB gallery. Now I want to show off my "best of" portraits. I create a post and will have to manually build the JB gallery.

No big deal; I just need a little help with the XML syntax. This is standard WordPress...
All the files live in wp-content/uploads/YYYY/MM/ folders

I was trying to follow the instructions at https://www.juicebox.net/support/creation/ Step 4

<image imageURL="images/tall.jpg" thumbURL="thumbs/tall.jpg" linkURL="http://www.example.com" linkTarget="_blank" >
<title>This is my title.</title> <caption>This is my caption.</caption> </image>

I modified the URLs, but no joy. I tried using JB Builder to generate the code locally, then edit the paths, but still came up empty.

<image imageURL="wp-content/uploads/2019/12/191011-rff-altria-0001-web-ready.jpg"
    thumbURL="wp-content/uploads/2019/12/191011-rff-altria-0001-web-ready.jpg"
    linkURL="wp-content/uploads/2019/12/191011-rff-altria-0001-web-ready.jpg"
    linkTarget="_blank"
    sourcePath="wp-content/uploads/2019/12/191011-rff-altria-0001-web-ready.jpg">
  </image>

I'm sure this will be a simple fix on my part :D

If you need any more info, just let me know.
Thanks again!

Re: JB Pro and WordPress image location [SOLVED]

The imageURL and thumbURL paths can be either absolute (starting with either http:// or https://) or relative (to the web page containing the gallery's embedding code).

If you use relative paths, then how the relative paths should be constructed will depend on the permalink structure that your WordPress site uses.

I would recommend using a leading slash in your paths to denote your root directory and then build up the relative paths from there.
For example, if you have an image located here:

http://www.example.com/wordpress/wp-content/uploads/2019/12/191011-rff-altria-0001-web-ready.jpg

... then you could use an imageURL such as:

imageURL="/wordpress/wp-content/uploads/2019/12/191011-rff-altria-0001-web-ready.jpg"

Otherwise, you could use an absolute path:

imageURL="http://www.example.com/wordpress/wp-content/uploads/2019/12/191011-rff-altria-0001-web-ready.jpg"

Both options above should work fine.
I hope this helps. Please let me know how you get on.

Re: JB Pro and WordPress image location [SOLVED]

Thanks for the suggestions, but I'm still getting a blank box.

I just created a new post, added a few images to the library, and created a JB gallery using the button. Everything worked as expected.

I opened up the xml file and added the <image> ... </image> tags for 3 images (after testing that the absolute paths were correct), saved it, refreshed my post page, and it's blank.

Could it possibly have something to do with the e_library="media" or the postID="XXXXX" ?

This is the XML

<?xml version="1.0" encoding="UTF-8"?>
<juiceboxgallery e_library="media" e_featuredImage="true" e_mediaOrder="ascending" useFlickr="false" flickrUserName="" flickrTags="" e_nextgenGalleryId="" e_picasaUserId="" e_picasaAlbumName="" galleryTitle="" e_textColor="ffffff" e_textOpacity="1" textColor="rgba(255,255,255,1)" e_thumbColor="ffffff" e_thumbOpacity="0.5" thumbFrameColor="rgba(255,255,255,0.5)" showOpenButton="false" showExpandButton="true" showThumbsButton="true" useThumbDots="false" useFullscreenExpand="true" e_galleryWidth="100%" e_galleryHeight="600px" e_backgroundColor="ffffff" e_backgroundOpacity="1" screenMode="LARGE" showPreloader="FALSE" showAutoPlayButtoan="TRUE" firstImageIndex="1" enableLooping="TRUE" imageTransitionType="FADE" showThumbsOnLoad="TRUE" showSmallThumbs="TRUE" maxThumbColumns="20" autoPlayOnLoad="TRUE" captionPosition="NONE" thumbWidth="35" thumbHeight="35" thumbPadding="5" postID="13965"
<image imageURL="http://www.example.com/wp-content/uploads/2019/12/191011-rff-altria-0001-web-ready.jpg" thumbURL="http://www.example.com/wp-content/uploads/2019/12/191011-rff-altria-0001-web-ready.jpg" linkURL="http://www.example.com" linkTarget="_blank" > </image>
<image imageURL="http://www.example.com/wp-content/uploads/2019/12/191011-rff-altria-0003-web-ready.jpg" thumbURL="http://www.example.com/wp-content/uploads/2019/12/191011-rff-altria-0003-web-ready.jpg" linkURL="http://www.example.com" linkTarget="_blank" > </image>
<image imageURL="http://www.example.com/wp-content/uploads/2019/12/191011-rff-altria-0006-web-ready.jpg" thumbURL="http://www.example.com/wp-content/uploads/2019/12/191011-rff-altria-0006-web-ready.jpg" linkURL="http://www.example.com" linkTarget="_blank" > </image>
<image imageURL="http://www.example.com/wp-content/uploads/2019/12/191011-rff-altria-0009-web-ready.jpg" thumbURL="http://www.example.com/wp-content/uploads/2019/12/191011-rff-altria-0009-web-ready.jpg" linkURL="http://www.example.com" linkTarget="_blank" > </image>
/>


Any ideas? Thanks

Re: JB Pro and WordPress image location [SOLVED]

Thank you for posting the content of your XML file. I see the problem now.

The numerically-named XML file in the 'wp-content/uploads/juicebox' folder is not the XML file that Juicebox uses when the gallery is displayed. It simply stores the configuration options for the gallery (no image data) and other plugin settings.
Galleries created by WP-Juicebox do not use static XML files (like those generated by JuiceboxBuilder-Pro).
The gallery's actual XML data is generated dynamically at the time the gallery is displayed (from the 'config.php' file and functions within the 'wp-juicebox.php' file) using the options and settings stored in the numerically-named XML file.
It is not possible to add image data to the numerically-named XML file (and trying to adapt the plugin to display custom images would not be easy).
The plugin will always display all images attached to the post.

To display other images, you could either:
(1) Use Juicebox-Pro's Flickr options to display images from a Flickr account.
(2) Create a gallery on your computer with JuiceboxBuilder-Pro and embed the gallery manually in your post following the baseUrl method of embedding documented here (which I thought you might have initially been doing).

(1) Enter your gallery's baseUrl embedding code into a 'Formatting -> Custom HTML' Gutenberg block.

(2) Upload your complete gallery folder to your root directory and use a leading slash in your embedding code paths to denote your root directory. This should work with any permalink structure. For example:

<!--START JUICEBOX EMBED-->
<script src="/gallery_folder/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "/gallery_folder/",
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "600",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

You can upload your gallery folder to any directory on your web server as long as the two paths in the embedding code (the path to the 'juicebox.js' and the baseUrl itself, pointing towards the gallery folder) are correct. (Your root directory might just be a convenient place for you to upload your gallery folder.)

I hope this helps.

Re: JB Pro and WordPress image location [SOLVED]

Thanks! I'm starting to get a handle on this, but will need to clarify a few things.

As Flickr is not an option, I'll be hosting my own images. The question is "where"?

Keeping in mind, I'm using standard WordPress conventions. Since jbcore is in the plugins, I hard-coded script src to
http://www.example.com/wp-content/plugi … uicebox.js

I added a new subfolder to the juicebox folder created in wp-content/uploads by the plugin and copied in some image files.

I used JB Builder-Lite (can't find my pro version...) to generate a config.xml.

I edited the paths in config.xml for each image file to the jb_gallery_1 path
http://www.example.com/wp-content/uploa … gallery_1/

I uploaded config.xml to the jb_gallery_1

I added a custom HTML Gutenberg block and pasted in the embed code

It still shows up blank...

I hate to be so dense, but I'm just not clear on exactly what needs to go where and how to reference it.

Re: JB Pro and WordPress image location [SOLVED]

If you do not want to use the plugin's functionality (of displaying all images attached to the post) and do not want to use Flickr as a source of images, then the best thing to do would be to forget about WP-Juicebox and create and embed a Juicebox gallery independent of the plugin.

Try the following:
(1) Create a gallery with JuiceboxBuilder-Pro on your computer and save it to a new and empty folder named 'gallery_folder'.
(2) Upload the complete gallery folder to the root directory of your web space.
(3) Enter the following embedding code (without modification) into a 'Formatting -> Custom HTML' Gutenberg block.

<!--START JUICEBOX EMBED-->
<script src="/gallery_folder/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "/gallery_folder/",
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "600",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

As you have WP-Juicebox installed, you can use the 'jbcore' folder from the plugin if you like (to avoid the need to upload the one inside the gallery folder). Just change the path in the following line to point towards the 'wp-juicebox/jbcore/juicebox.js' file inside the plugin's folder. (This is not necessary but will save a little space on your web server.)

<script src="/gallery_folder/jbcore/juicebox.js"></script>

If you really want to, you can store your gallery images elsewhere (for example, your WordPress Media Library) but you'd need to adjust all the imageURL and thumbURL paths in your gallery's 'config.xml' file.
It would be much easier (and quicker) to just follow the three steps above. (No editing or modifications would be required.)

can't find my pro version...

Please fill in the Download Link Request Form and we'll send you a new download link for your Juicebox-Pro purchase. (I cannot find your transaction under the email address you use for the forum.)

It still shows up blank...

If you continue to experience difficulties, then please post the URL to your gallery's web page so that I can see the problem for myself.
Once I'm able to see your gallery live on your web server, I should hopefully be able to determine the exact cause of the problem and propose a solution.
Thank you.

Re: JB Pro and WordPress image location [SOLVED]

Greetings, and Happy Holidays, Steven! My apologies for not getting back to you sooner.

Thanks to your help you can close this marked as "Solved"

I had some slight tweaking to do on my end, but it's working perfectly now.

As an FYI, client restrictions prevent me from using Flickr.

This is pretty cool, being able to reference the same images in multiple galleries without having to worry about post attachments or duplicating data.

Thanks again, wishing you the best for the coming year!

Re: JB Pro and WordPress image location [SOLVED]

Greetings, and Happy Holidays, Steven! My apologies for not getting back to you sooner.

No problem at all!

Thanks to your help you can close this marked as "Solved"

Will do!

I had some slight tweaking to do on my end, but it's working perfectly now.

That's great to hear! Thank you for taking the time to post back to let me know.

Thanks again, wishing you the best for the coming year!

Happy New Year to you, too!