1 (edited by thechris83 2019-01-20 00:47:44)

Topic: Server side file locations

Hello!  I'm new to Juicebox, but I think (and hope) I have everything setup right, so far so good.

My question is this...

Currently in my test gallery everything is within the same folder...the gallery page itself plus the images folder and the others Juicebox creates.

However on my server side my current file setup is like this...

testgallery.html is in the main root or whatever folder just like the index.html and other pages (plus the CSS/etc files for my site).

The images are in sub folders like...

/images/galleries/testgalleryimages

However if I put all the Juicebox files (config and other sub folders) inside the testgalleryimages folder it won't work as its looking for those files in the same folder as the HTML file is in (and it can't be there as i have many galleries).

Is there an easy way to change where it looks for these files??  So that i can have it set to find them in the subfolders and such?

Any help/suggestions would be great! :-)

Re: Server side file locations

There are many ways that you can structure your web site and Juicebox galleries.
Here are a few tips which might help.

Using the regular embedding code noted here (and presented on the 'Publish' tab of JuiceboxBuilder-Pro), the contents of the gallery folder (not the gallery folder itself) should be uploaded to the same directory as the web page containing the gallery's embedding code.

If you move of rename the gallery's configuration file (default name 'config.xml'), then you can point towards it using a configUrl entry within the gallery's embedding code, for example:

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

No matter whether of not you use a custom configUrl, all relative paths within the gallery's configuration file ( imageURLs, thumbURLs and linkURLs) will be relative to the web page containing the gallery's embedding code.

Short descriptions of the configUrl and baseUrl embed options can be found here.

Alternatively, you could upload a complete gallery folder to anywhere on your web server and point towards it using a baseUrl entry within the gallery's embedding code, for example:

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

The baseUrl method of embedding is documented here.
When using the baseUrl method of embedding, all relative paths within the configuration file (imageURLs, thumbURLs and linkURLs) will be relative to the baseUrl.

Additionally, you can upload your gallery's 'jbcore' folder to anywhere you like on your web server. In fact, multiple galleries can even share a single 'jbcore' folder. Please see here for details.
All you need to do is make sure that you point towards the 'juicebox.js' file within the 'jbcore' folder within the <script> tag, for example:

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

The location of the 'jbcore' folder is completely independent of the configUrl and baseUrl options (which still work as noted above).

if you use any of the suggestions above, then you will not need to modify any of the paths inside the gallery's configuration file.
However, if you want to store your images elsewhere on your web server (not inside the 'images' and 'thumbs' folders within the gallery folder), then you will need to manually modify the paths (the imageURLs, thumbURLs and linkURLs) inside the gallery's configuration file (by opening the file in a plain text editor) bearing in mind that if you use a baseUrl, then relative paths will be relative to the baseUrl.

I hope this helps.

Re: Server side file locations

I think I got it working right, at least with how I have the test folder(s)/etc setup.  Once I start using it live with the way the site is setup (which I am trying to duplicate in the test layout) I will see if I run into anymore issues.

However I do have another question on a different topic, if you don't mind?!

So when you create a gallery and import/add your pictures to it...you can choose to resize and/or add a watermark to your images.  My main question is regarding the watermark.

I have existing galleries that the images have already been sized and also had a watermark applied (via another program), so these do not need a watermark.  However there will be new images added to the galleries that will need to use the Juicebox resize and add watermark options (to minimize doing this in a separate program).

So when I go to make the gallery in Juicebox, I will have to import the existing gallery pictures, but of course I will not check the resize/watermark options.  However I will then need to add the new images and I will have to check the resize and watermark options.  By doing this though puts ANOTHER watermark on the original gallery images that already have a watermark on them (in addition to the new ones).

Is there a way around this?  Where it will only watermark select images?  Or am I going to have to spend hours hoping/trying to find hundreds of old original images from my existing galleries (before they were edited/watermarked)?

Re: Server side file locations

When you create a gallery with JuiceboxBuilder-Pro, the application stores the locations of the source images in the gallery's 'config.xml' file (the sourcePath attributes in the <image> tags).
As long as you do not relocate your source images, JuiceboxBuilder-Pro will use the un-watermarked source images (rather than the already watermarked gallery images) if a new watermark is to be applied to the images (so gallery images will not be watermarked twice).

If the source images are no longer available in their original locations, then JuiceboxBuilder-Pro will have no option but to use the already watermarked gallery images and will watermark them again.
In this case, the best course of action would be to copy the gallery images to a safe location whilst the gallery is being saved and then move them back into the 'images' folder afterwards (overwriting the double-watermarked images).
The image filenames will be the same so there will be no need to modify any paths in any files.

I hope this helps.

Re: Server side file locations

Thanks for the reply...for some reason that was a little confusing to read the way it was worded (or its just me, who knows).

If the source images are no longer available in their original locations, then JuiceboxBuilder-Pro will have no option but to use the already watermarked gallery images and will watermark them again.

With my watermarked images there is no source image or whatever they are saved with the watermark permanently already on them.  Only new images that I was to add to the gallery will not have the mark.

So basically what you're saying in a nut shell is that the only way to not get a double watermark is to only use images that are not already watermarked?

Re: Server side file locations

I'm sorry if my reply was confusing.

When you add an image to a gallery in JuiceboxBuilder-Pro, the application knows where the original (source) image is stored on your hard drive and keeps a note of this location (via the sourcePath attribute).

If JuiceboxBuilder-Pro needs to reprocess images (to resize them or to add/remove a watermark), then it will use the image that you originally added to the gallery (from its original location on your hard drive outside the gallery folder) rather than the already-processed image in the gallery's 'images' folder.

For example, if you drag and drop an image into JuiceboxBuilder-Pro from C:\images\image_0007.jpg and save the gallery to C:\galleries\gallery_folder, then the processed gallery image will be at C:\galleries\gallery_folder\images\image_0007.jpg.

If you then open the gallery in JuiceboxBuilder-Pro and JuiceboxBuildler-Pro needs to re-process the images, the application will use the image from C:\images\image_0007.jpg instead of C:\galleries\gallery_folder\images\image_0007.jpg to generate a new gallery image.

However, if the C:\images\image_0007.jpg image has been deleted, moved or renamed, then JuiceboxBuilder-Pro will not be able to find it and it will use the gallery image instead.

Essentially, as long as you do not delete, move or rename the images that you use to create your gallery, all will be fine when editing a gallery.

I hope this helps to clarify things.

Re: Server side file locations

That (for whatever reason) was easier to follow.  Thanks

So basically what I said in my last message is pretty much true.  To make it work right I will need to find the original non watermarked versions of my current (non-juicebox) gallery images so I do not get double watermarks when I bring those into Juicebox.

Re: Server side file locations

To make it work right I will need to find the original non watermarked versions of my current (non-juicebox) gallery images...

If the source images are still in the same location on your hard drive as they were when you first created the gallery, then JuiceboxBuilder-Pro will automatically find them via the sourcePath entries in the gallery's 'config.xml' file. There will be no need to go looking for them yourself or to manually re-add them to your gallery.

Otherwise, you could certainly find them yourself (if they are no longer in their original location) and re-add them to your gallery or just copy the watermarked gallery images (in the 'images' folder) to a safe location and use them to overwrite any double-watermarked images (again, in the 'images' folder) after you have edited your gallery.

Re: Server side file locations

I think the biggest thing you've missed or misunderstood...is that my current website galleries are NOT Juicebox or anything to do with it.  They are another gallery type that I am hoping to replace.  Those images (100's of them) were all watermarked by me in another watermarking program.  So the whole sourcepath and stuff you're talking about does not apply the my current gallery images.  If I use the ones already watermarked then Juicebox will put another watermark on them unless I find the original (not watermarked) images to use.

In the end it seems I was right from the beginning it just took a bit to get there with a bit of confusion in the middle, haha. :-)

Re: Server side file locations

Thank you for the clarification.
Yes, I did not realise that the gallery you referred to was not a Juicebox one. (It sounded to me like it might have been a Juicebox gallery with a custom file structure.) Sorry for the misunderstanding.

If I use the ones already watermarked then Juicebox will put another watermark on them unless I find the original (not watermarked) images to use.

If you plan to create a Juicebox-Pro gallery using both watermarked and un-watermarked source images, then perhaps the best thing to do would be to let Juicebox-Pro watermark all images and then overwrite the double-watermarked images in the gallery's 'images' folder with your original watermarked images.

Otherwise, you could do one of the following:

(1) Find the original un-watermarked images (if you still have them somewhere) and use them to create your Juicebox-Pro gallery.

(2) Watermark your currently un-watermarked images (by whatever method you used to watermark your other images) so that all your images are watermarked before you feed them to Juicebox-Pro (and then do not use Juicebox-Pro's pwn watermarking feature).
You could actually use Juicebox-Pro to watermark your images. Run through the process of creating a gallery using Juicebox-Pro's watermarking feature just to get your images watermarked (you'll find them in the gallery's 'images' folder).
You can then create a fresh gallery using these newly watermarked images along with your existing older watermarked images (turning off Juicebox-Pro's own watermarking feature).

I'm not sure if any of these suggestions will help but I thought I should mention them just in case.

Re: Server side file locations

So far I've got things working, I'm going another route with my existing pictures but I have another question.

In the section:

"<!-- Image gallery content for non-javascript devices -->"

and then of course it was the ol' usual html code/etc to show pictures.  Is there a way to do a mass edit of the URL for the images...since my main .HTML file will not be inside the same folder as the /images folder?  Or would this have to be done manually?

Also I have the layout to where the thumbnails are above the main image.  Is there any way to lessen the distance between the bottom of the thumbnails and the top of the main image?

Thanks so much for your help so far!

Re: Server side file locations

In the section:

"<!-- Image gallery content for non-javascript devices -->"

and then of course it was the ol' usual html code/etc to show pictures.

This is the SEO content code which is used primarily to help search engines find and index gallery images in their search results (but it is also used to display gallery images in browsers that do not have JavaScript enabled).
It is generated in the gallery's 'index.html' file (and also presented on JuiceboxBuider-Pro's ''Publish' tab) when the 'Add SEO Content' checkbox is selected in JuiceboxBuilder-Pro's 'Customize -> Sharing' section.
Please see the Search Engine Optimization support section for further details.

Is there a way to do a mass edit of the URL for the images...since my main .HTML file will not be inside the same folder as the /images folder?

JuiceboxBuilder-Pro constructs galleries only with the default structure (with the images stored in a folder named 'images' directly within the gallery folder) and all paths (in the gallery's 'config.xml' file and also in the SEO content code) point to the images in this location.
It is not possible to modify the image paths within JuiceboxBuilder-Pro.
You would need to modify the SEO content code (and possibly the paths in the 'config.xml' file, too) manually in a plain text editor (such as Notepad++).
However, you could quite easily modify all paths in a single search and replace action.
For the SEO content code that you refer to, open the gallery's 'index.html' file in a plain text editor (or copy and paste the embedding code from JuiceboxBuilder-Pro into the editor), then search for:

<img src="images/

... and replace all instances with something like the following (changing the new path as necessary):

<img src="new_path/images/

Also I have the layout to where the thumbnails are above the main image.  Is there any way to lessen the distance between the bottom of the thumbnails and the top of the main image?

Please see this FAQ which may help:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

If you use the default imageScaleMode of SCALE_DOWN, then your images are likely already displayed as large as they can be within the gallery's image area. (They probably span the entire width of the gallery's image area from left to right with space at the top and bottom.) If they were to be scaled any larger, then there would be less space at the top and bottom but cropping would occur at the left and right.
Two ways to compensate for this would be to either:
(1) Reduce the height of your gallery (to change the aspect ratio of the gallery's image area to better match that of your images).
... or:
(2) Increase the size of the images by setting imageScaleMode to either SCALE or FILL (but please be aware that cropping will likely occur).

You could also perhaps reduce the default thumbPadding (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section) from '10' (pixels) to something smaller (but please note that this will affect the spacing around all sides of each thumbnail).

I hope this points you in the right direction.