1 (edited by rmjjkj 2015-07-07 20:39:08)

Topic: ftp protocol for Muse sites

Hello,

I have embedded a photo gallery into Muse published it, http://www.apostolicfaithchurchportland … lery.html.

Since I would like to be able to just add images to the "images" folder via ftp, what are the steps that I need to follow? Will the config file change based on the images folder?

Thank you.

Re: ftp protocol for Muse sites

Since I would like to be able to just add images to the "images" folder via ftp, what are the steps that I need to follow?

If you want to be able to upload images to a designated folder and have them displayed in your gallery without the need to modify any gallery files, then please see the example in this forum post.

Will the config file change based on the images folder?

Yes. Using the method in the forum post, when the gallery is viewed, the 'config.xml' file will be built dynamically (on the web server by the PHP script) using the image data from the designated folder.

3 (edited by rmjjkj 2015-07-08 19:47:06)

Re: ftp protocol for Muse sites

Do PHP files work with Muse? Does this mean that I delete the confi.xml file? And where exactly do I copy this: configUrl : 'config.php' in the embedding code? Ahead of <!--START JUICEBOX EMBED-->? I am not knowledgeable with code.

Thank you.

Re: ftp protocol for Muse sites

Do PHP files work with Muse?

PHP is a server-side scripting language. All PHP code is processed on the web server and, as such, you will not be able to preview your dynamically-generated gallery locally in Muse but it will work fine when you upload it to your web server.

Does this mean that I delete the confi.xml file?

That is correct. You would not need to use the 'config.xml' file created by JuiceboxBuilder-Pro. This is a static file which will only ever display the images listed in it. If you added images to a designated folder and wanted them to be displayed inthe gallery, then you would need to either:
(1) Manually edit the 'config.xml' file to include the new images.
... or:
(2) Use the 'config.php' file (from the forum post I linked to above) to dynamically generate a fresh XML file each time the gallery is displayed (listing all images in the designated folder at the time the gallery is displayed ).

And where exactly do I copy this: configUrl : 'config.php' in the embedding code?

Your embedding code might look something like this:

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

5 (edited by rmjjkj 2015-07-09 01:51:41)

Re: ftp protocol for Muse sites

Thank you. I have followed the instructions precisely. However, when I do that, I get this error message: Juicebox Error: Config XML file not found.

This is my embed code:

<!--START JUICEBOX EMBED-->
<script type="text/javascript" src="/2015CampPhotos/jbcore/juicebox.js"></script>
<script>
new juicebox({
configUrl: "config.php",
containerId: "juicebox-container",
baseUrl : "/2015CampPhotos/",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(255,255,255,1)"
});
</script>
<div id="juicebox-container">
<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1></h1>
<p></p>
<p><img src="images/2015-18806.jpg" title="2015-18806" alt="" /><br>2015-18806 </p>
<p><img src="images/2015-18967.jpg" title="2015-18967" alt="" /><br>2015-18967 </p>
<p><img src="images/2015-18774.jpg" title="2015-18774" alt="" /><br>2015-18774 </p>
<p><img src="images/2015-18751.jpg" title="2015-18751" alt="" /><br>2015-18751 </p>
<p><img src="images/2015-18788.jpg" title="2015-18788" alt="" /><br>2015-18788 </p>
<p><img src="images/2015-18742.jpg" title="2015-18742" alt="" /><br>2015-18742 </p>
<p><img src="images/2015-18750.jpg" title="2015-18750" alt="" /><br>2015-18750 </p>
<p><img src="images/2015-18741.jpg" title="2015-18741" alt="" /><br>2015-18741 </p>
<p><img src="images/2015-18689.jpg" title="2015-18689" alt="" /><br>2015-18689 </p>
<p><img src="images/2015-18712.jpg" title="2015-18712" alt="" /><br>2015-18712 </p>
<p><img src="images/2015-18539.jpg" title="2015-18539" alt="" /><br>2015-18539 </p>
<p><img src="images/2015-18628.jpg" title="2015-18628" alt="" /><br>2015-18628 </p>
<p><img src="images/2015-18502.jpg" title="2015-18502" alt="" /><br>2015-18502 </p>
<p><img src="images/2015-18504.jpg" title="2015-18504" alt="" /><br>2015-18504 </p>
<p><img src="images/2015-18470.jpg" title="2015-18470" alt="" /><br>2015-18470 </p>
<p><img src="images/2015-18497.jpg" title="2015-18497" alt="" /><br>2015-18497 </p>
<p><img src="images/2015-18322.jpg" title="2015-18322" alt="" /><br>2015-18322 </p>
<p><img src="images/2015-18412.jpg" title="2015-18412" alt="" /><br>2015-18412 </p>
<p><img src="images/2015-18440.jpg" title="2015-18440" alt="" /><br>2015-18440 </p>
<p><img src="images/2015-18526.jpg" title="2015-18526" alt="" /><br>2015-18526 </p>
<p><img src="images/2015-18547.jpg" title="2015-18547" alt="" /><br>2015-18547 </p>
<p><img src="images/2015-17198.jpg" title="2015-17198" alt="" /><br>2015-17198 </p>
<p><img src="images/2015-17234.jpg" title="2015-17234" alt="" /><br>2015-17234 </p>
<p><img src="images/2015-17367.jpg" title="2015-17367" alt="" /><br>2015-17367 </p>
<p><img src="images/2015-17402.jpg" title="2015-17402" alt="" /><br>2015-17402 </p>
<p><img src="images/2015-17225.jpg" title="2015-17225" alt="" /><br>2015-17225 </p>
<p><img src="images/2015-17419.jpg" title="2015-17419" alt="" /><br>2015-17419 </p>
<p><img src="images/2015-17277.jpg" title="2015-17277" alt="" /><br>2015-17277 </p>
<p><img src="images/2015-17339.jpg" title="2015-17339" alt="" /><br>2015-17339 </p>
<p><img src="images/2015-17373.jpg" title="2015-17373" alt="" /><br>2015-17373 </p>
<p><img src="images/2015-17180.jpg" title="2015-17180" alt="" /><br>2015-17180 </p>
<p><img src="images/2015-17222.jpg" title="2015-17222" alt="" /><br>2015-17222 </p>
<p><img src="images/2015-17455.jpg" title="2015-17455" alt="" /><br>2015-17455 </p>
<p><img src="images/2015-17460.jpg" title="2015-17460" alt="" /><br>2015-17460 </p>
<p><img src="images/2015-17467.jpg" title="2015-17467" alt="" /><br>2015-17467 </p>
<p><img src="images/2015-17584.jpg" title="2015-17584" alt="" /><br>2015-17584 </p>
<p><img src="images/2015-17587.jpg" title="2015-17587" alt="" /><br>2015-17587 </p>
<p><img src="images/2015-17605.jpg" title="2015-17605" alt="" /><br>2015-17605 </p>
<p><img src="images/2015-17612.jpg" title="2015-17612" alt="" /><br>2015-17612 </p>
<p><img src="images/2015-17648.jpg" title="2015-17648" alt="" /><br>2015-17648 </p>
<p><img src="images/2015-17668.jpg" title="2015-17668" alt="" /><br>2015-17668 </p>
<p><img src="images/2015-17717.jpg" title="2015-17717" alt="" /><br>2015-17717 </p>
<p><img src="images/2015-17728.jpg" title="2015-17728" alt="" /><br>2015-17728 </p>
<p><img src="images/2015-17153.jpg" title="2015-17153" alt="" /><br>2015-17153 </p>
<p><img src="images/2015-17754.jpg" title="2015-17754" alt="" /><br>2015-17754 </p>
<p><img src="images/2015_MG_261rp.jpg" title="2015_MG_261rp" alt="" /><br>2015_MG_261rp </p>
<p><img src="images/2015_MG_279rp.jpg" title="2015_MG_279rp" alt="" /><br>2015_MG_279rp </p>
<p><img src="images/IMG_2159.jpg" title="IMG_2159" alt="" /><br>IMG_2159 </p>
<p><img src="images/2015-19491.jpg" title="2015-19491" alt="" /><br>2015-19491 </p>
<p><img src="images/2015-19497.jpg" title="2015-19497" alt="" /><br>2015-19497 </p>
<p><img src="images/2015-19576.jpg" title="2015-19576" alt="" /><br>2015-19576 </p>
<p><img src="images/_DSC9416.jpg" title="_DSC9416" alt="" /><br>_DSC9416 </p>
<p><img src="images/_DSC9547A.jpg" title="_DSC9547A" alt="" /><br>_DSC9547A </p>
<p><img src="images/2015-20799.jpg" title="2015-20799" alt="" /><br>2015-20799 </p>
<p><img src="images/2015-20810.jpg" title="2015-20810" alt="" /><br>2015-20810 </p>
<p><img src="images/2015-20853.jpg" title="2015-20853" alt="" /><br>2015-20853 </p>
<p><img src="images/2015-20903.jpg" title="2015-20903" alt="" /><br>2015-20903 </p>
<p><img src="images/2015-19316.jpg" title="2015-19316" alt="" /><br>2015-19316 </p>
<p><img src="images/2015-20918.jpg" title="2015-20918" alt="" /><br>2015-20918 </p>
<p><img src="images/2015_MG_283rp.jpg" title="2015_MG_283rp" alt="" /><br>2015_MG_283rp </p>
<p><img src="images/2015-19334.jpg" title="2015-19334" alt="" /><br>2015-19334 </p>
<p><img src="images/2015_MG_288rp.jpg" title="2015_MG_288rp" alt="" /><br>2015_MG_288rp </p>
<p><img src="images/2015_MG_293rp.jpg" title="2015_MG_293rp" alt="" /><br>2015_MG_293rp </p>
<p><img src="images/2015_MG_304rp.jpg" title="2015_MG_304rp" alt="" /><br>2015_MG_304rp </p>
<p><img src="images/2015_MG_314rp.jpg" title="2015_MG_314rp" alt="" /><br>2015_MG_314rp </p>
<p><img src="images/2015_MG_325rp.jpg" title="2015_MG_325rp" alt="" /><br>2015_MG_325rp </p>
<p><img src="images/2015_MG_332rp.jpg" title="2015_MG_332rp" alt="" /><br>2015_MG_332rp </p>
<p><img src="images/2015_MG_337rp.jpg" title="2015_MG_337rp" alt="" /><br>2015_MG_337rp </p>
<p><img src="images/2015_MG_346rp.jpg" title="2015_MG_346rp" alt="" /><br>2015_MG_346rp </p>
<p><img src="images/2015_MG_347rp.jpg" title="2015_MG_347rp" alt="" /><br>2015_MG_347rp </p>
<p><img src="images/2015_MG_351rp.jpg" title="2015_MG_351rp" alt="" /><br>2015_MG_351rp </p>
<p><img src="images/2015_MG_362rp.jpg" title="2015_MG_362rp" alt="" /><br>2015_MG_362rp </p>
<p><img src="images/2015_MG_363rp.jpg" title="2015_MG_363rp" alt="" /><br>2015_MG_363rp </p>
<p><img src="images/2015_MG_369rp.jpg" title="2015_MG_369rp" alt="" /><br>2015_MG_369rp </p>
<p><img src="images/2015_MG_371rp.jpg" title="2015_MG_371rp" alt="" /><br>2015_MG_371rp </p>
<p><img src="images/2015_MG_372rp.jpg" title="2015_MG_372rp" alt="" /><br>2015_MG_372rp </p>
<p><img src="images/2015_MG_380rp.jpg" title="2015_MG_380rp" alt="" /><br>2015_MG_380rp </p>
<p><img src="images/2015_MG_381rp.jpg" title="2015_MG_381rp" alt="" /><br>2015_MG_381rp </p>
<p><img src="images/2015_MG_232rp.jpg" title="2015_MG_232rp" alt="" /><br>2015_MG_232rp </p>
<p><img src="images/2015_MG_233rp.jpg" title="2015_MG_233rp" alt="" /><br>2015_MG_233rp </p>
<p><img src="images/2015_MG_234rp.jpg" title="2015_MG_234rp" alt="" /><br>2015_MG_234rp </p>
<p><img src="images/2015_MG_235rp.jpg" title="2015_MG_235rp" alt="" /><br>2015_MG_235rp </p>
<p><img src="images/2015_MG_236rp.jpg" title="2015_MG_236rp" alt="" /><br>2015_MG_236rp </p>
<p><img src="images/2015_MG_237rp.jpg" title="2015_MG_237rp" alt="" /><br>2015_MG_237rp </p>
<p><img src="images/2015_MG_238rp.jpg" title="2015_MG_238rp" alt="" /><br>2015_MG_238rp </p>
<p><img src="images/2015_MG_239rp.jpg" title="2015_MG_239rp" alt="" /><br>2015_MG_239rp </p>
<p><img src="images/2015_MG_240rp.jpg" title="2015_MG_240rp" alt="" /><br>2015_MG_240rp </p>
<p><img src="images/2015_MG_241rp.jpg" title="2015_MG_241rp" alt="" /><br>2015_MG_241rp </p>
<p><img src="images/2015_MG_242rp.jpg" title="2015_MG_242rp" alt="" /><br>2015_MG_242rp </p>
<p><img src="images/2015_MG_243rp.jpg" title="2015_MG_243rp" alt="" /><br>2015_MG_243rp </p>
<p><img src="images/2015_MG_244rp.jpg" title="2015_MG_244rp" alt="" /><br>2015_MG_244rp </p>
<p><img src="images/2015_MG_245rp.jpg" title="2015_MG_245rp" alt="" /><br>2015_MG_245rp </p>
<p><img src="images/2015_MG_246rp.jpg" title="2015_MG_246rp" alt="" /><br>2015_MG_246rp </p>
<p><img src="images/2015_MG_247rp.jpg" title="2015_MG_247rp" alt="" /><br>2015_MG_247rp </p>
<p><img src="images/2015_MG_248rp.jpg" title="2015_MG_248rp" alt="" /><br>2015_MG_248rp </p>
<p><img src="images/2015_MG_249rp.jpg" title="2015_MG_249rp" alt="" /><br>2015_MG_249rp </p>
<p><img src="images/2015_MG_250rp.jpg" title="2015_MG_250rp" alt="" /><br>2015_MG_250rp </p>
<p><img src="images/2015_MG_251rp.jpg" title="2015_MG_251rp" alt="" /><br>2015_MG_251rp </p>
<p><img src="images/2015_MG_252rp.jpg" title="2015_MG_252rp" alt="" /><br>2015_MG_252rp </p>
<p><img src="images/2015_MG_253rp.jpg" title="2015_MG_253rp" alt="" /><br>2015_MG_253rp </p>
<p><img src="images/2015_MG_254rp.jpg" title="2015_MG_254rp" alt="" /><br>2015_MG_254rp </p>
<p><img src="images/2015_MG_255rp.jpg" title="2015_MG_255rp" alt="" /><br>2015_MG_255rp </p>
<p><img src="images/2015_MG_256rp.jpg" title="2015_MG_256rp" alt="" /><br>2015_MG_256rp </p>
<p><img src="images/2015_MG_257rp.jpg" title="2015_MG_257rp" alt="" /><br>2015_MG_257rp </p>
<p><img src="images/2015_MG_258rp.jpg" title="2015_MG_258rp" alt="" /><br>2015_MG_258rp </p>
<p><img src="images/2015_MG_259rp.jpg" title="2015_MG_259rp" alt="" /><br>2015_MG_259rp </p>
<p><img src="images/2015_MG_260rp.jpg" title="2015_MG_260rp" alt="" /><br>2015_MG_260rp </p>
</noscript>
</div>
<!--END JUICEBOX EMBED-->




And this is my config.php file:

<?php
header("Content-type: application/xml");
function GetDirArray($folder)
{
    $handle=opendir($folder);
    while ($file=readdir($handle))
    {
        if ($file!="." && $file!="..")
        {
            $ret[count($ret)]=$file;
        }
    }
    closedir($handle);
    sort($ret);
    return $ret;
}
$gallery=GetDirArray('images');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<juiceboxgallery galleryTitle="Juicebox Gallery">';
for ($i=0; $i<sizeof($gallery); $i++)
{
    echo '<image imageURL="images/'.$gallery[$i].'" thumbURL="images/'.$gallery[$i].'" linkURL="" linkTarget="">';
    
    echo '<title></title>';
    echo '<caption></caption>';
    echo '</image>';
}
echo '</juiceboxgallery>';
?>

What am I missing? the config.php is in my gallery folder. The embed code was in muse. I did publish the changes and received the error message.

Re: ftp protocol for Muse sites

If you created the 'config.php' file in a text editor, please make sure that it is named 'config.php' and that it does not have a different file extension such as 'config.php.txt'.

Also, please check that your web server has PHP installed on it. (Most web servers have PHP installed by default but it would be worth checking to be sure.)

If you continue to experience difficulties, please post the URL to your gallery's web page so that I can see the problem for myself and hopefully help further.
It might also help if you could zip your complete gallery folder and upload it somewhere (and provide a download link) so that I can take a look at all your files together and figure out what the problem is. Thank you.

7 (edited by rmjjkj 2015-07-09 17:52:14)

Re: ftp protocol for Muse sites

I just found out this information about Business Catalyst hosting, which is who our website is hosted by:

I've got some PHP code on my website that someone else programmed for me. Can I use that?
   
No. Business Catalyst is designed to fulfill most business needs without requiring you to hire programmers, and running server-side code such as PHP, ASP, and .NET is not supported.

Also,

Can I integrate an external system with my Business Catalyst site?
    Yes. Adobe provides extensive APIs that allow you to connect most third-party systems to Business Catalyst. For example, you'll be able to synchronize your inventory, view recent orders, get a customer list, and more.

So is there another way to accomplish the same that considering I am using Muse and Business Catalyst?

Here's a link to the web page: http://www.apostolicfaithchurchportland … otos.html.  And here's a link to all the files: https://www.dropbox.com/s/nigrvkta93tb5 … .zip?dl=0. The thumbs are loading up slowly, and some of them do not seem to load at all. Does Juicebox automatically crop the thumbs? Should we be clicking Crop to Fit?

Can one add more than one gallery to a web page? What's the maximum amount of pictures recommended for each gallery?

Thank you.

Re: ftp protocol for Muse sites

So is there another way to accomplish the same that considering I am using Muse and Business Catalyst?

You would really need to use a server-side script to build a dynamic XML file on-the-fly when the gallery is displayed. It cannot be done client side (for example with JavaScript).
The only other method of uploading images and having them included in a gallery without the need to modify any gallery files would be to use a Flickr account as a source of images.
If you use a Flickr account as a source of images, you could upload new images to the Flickr account and they would automatically be included in the gallery.
Certain Flickr configuration options are available to Juicebox-Lite (the free version) and others are available to Juicebox-Pro only so you can find descriptions of all Flickr options in these two section.
Lite: http://www.juicebox.net/support/config_ … te-options
Flickr Pro: http://www.juicebox.net/support/config_ … kr-options

The thumbs are loading up slowly, and some of them do not seem to load at all.

I have checked out your gallery (the static version without the 'config.php' file) and all thumbnails load OK.
However, you have set maxThumbRows="4" and thumbsPosition="BOTTOM" (default value). On my screen, 40 thumbnails are displayed. In your gallery, this totals approximately 42MB of data. Also, your gallery uses imagePreloading="PAGE" (default value) so the user's browser will be preloading and caching all images on the current thumbnail page which amounts to even more data for the browser to initially load when the gallery is first displayed.
I would recommend using smaller images for your thumnails (some are currently over 3MB each and a couple are over 4MB) and you could set imagePrelaoding="NEXT" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) to preload only the next image rather than all images on the current thumbnail page. This would significantly reduce the load on the browser when the gallery is first displayed.

Does Juicebox automatically crop the thumbs?

Juicebox scales the thumbURL images to fill the thumbWidth and thumbHeight dimensions. If the aspect ratio of the thumbURL image does not exactly match the thumbWidth x thumbHeight aspect ratio, cropping will occur.

Should we be clicking Crop to Fit?

'Crop to fit' will crop images (if necessary) to fill the specified image dimensions. If you do not set 'Crop to fit', then JuiceboxBuilder will respect the aspect ratio of the source image and will resize it using the specified image dimensions as maximum bounds.
'Crop to fit' affects only the main images in a gallery, not the thumbnails. (Thumbnails are always 'cropped to fit' to ensure that all thumbnail images match the specified thumbnail dimensions.)

Can one add more than one gallery to a web page?

Yes. Theoretically, there is no limit to the number of galleries you can have on a single page. Please see the Embedding Multiple Galleries support section for online examples.'
Just remember to embed each gallery into a <div> container with a unique 'id' and load the 'juicebox.js' file only once per web page (not once per gallery).

What's the maximum amount of pictures recommended for each gallery?

There is no real maximum to the number of images you can have in a gallery. As long as your images are of a reasonable file size and you set imagePreloading to an appropriate value for your gallery, everything should be fine.