1 (edited by movietajm 2017-12-16 07:41:15)

Topic: How to update gallery through web? [SOLVED]

Hi. I used to have SimpleViewer and I had BuildGallery to manually upload photos from my cellphone and then run the buildscript. How do I do this with Juicebox?

Re: How to update gallery through web? [SOLVED]

Unfortunately, there is no BuildGallery script for Juicebox but there are perhaps a few alternatives you might like to consider.

(1) You could source your gallery with images from a Flickr account and then just upload images to your Flickr account to automatically have them appear in your gallery (without the need to modify or update any gallery files).

(2) You could use a PHP script (to dynamically generate a 'config.xml' file each time the gallery is viewed) to display images from a designated folder on your web server. You could then upload new images to this folder (via FTP) for the images to appear in your gallery.

(3) You could use Showkase (in its Gallery Manager theme) to manage your gallery online through a web browser interface. (The Showkase interface is optimized for desktop rather than mobile so navigating around it on a mobile device might not be ideal but it should work fine.)

Further information on #2 can be found in this forum post (scroll down to the answer to Query #3).

I hope these suggestions point you in the right direction.

Re: How to update gallery through web? [SOLVED]

Ok. Thx. Will try php first and then Flickr!

Re: How to update gallery through web? [SOLVED]

You're welcome! I hope you're able to use one of these ideas.

5 (edited by movietajm 2017-12-06 20:22:24)

Re: How to update gallery through web? [SOLVED]

Flickr worked excellent but do you know if there is any way to get the image in fullsize WITHOUT open the Flickr-page? Or a download button for fullsize image?

Re: How to update gallery through web? [SOLVED]

The php didnt work.

Using a PHP file to dynamically generate a gallery's XML configuration file is a tried and tested method which should work fine. In fact, WP-Juicebox (the dedicated Juicebox plugin for WordPress) uses this method to display all galleries created by the  plugin. It's also mentioned in this FAQ:
Can Juicebox handle a custom data source, for example RSS or Instagram?

When adding the configUrl entry to your gallery's embedding code, make sure that you separate all your embedding code parameters with commas, for example:

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

Also, please note that the configUrl value is a path to a file. It can be a relative path (relative to the web page containing the embedding code) or an absolute path. For example, if you use:

configUrl: "config.php",

... then your PHP script should be named "config.php" and located in the same directory as the web page containing the embedding code.

Flickr worked excellent but do you know if there is any way to get the image in fullsize WITHOUT open the Flickr-page? Or a download button for fullsize image?

This is just the way that Juicebox works and it cannot be changed: the Open Image button redirects to the Flick page containing the image and the Download Button is disabled for Flickr galleries (as Flickr does not seem to like images hosted on their servers from being downloaded via PHP).
If you want to be able to open an image in a new tab or have the Download Button active (to allow users to download the images), then you'll need to host the images yourself.

Maybe you could give the PHP suggestion another try. It should work fine. If you run into any difficulties, just let me know and I'll try to help you further. (If possible, please provide the PHP code you are using and post the URL to your gallery's web page on your web server. Thank you.)

Re: How to update gallery through web? [SOLVED]

Excellent! Thx! I will give php one more try.

Btw. If you check http://zeerux.com/galleri/index.html the gallery seems fine from pc but from android it says below thumbs (1 of 1), can I get rid of this? I actually would have captions from flickr but for some reason only the uploaded date would show, not the imagedate?

Re: How to update gallery through web? [SOLVED]

... from android it says below thumbs (1 of 1), can I get rid of this?

You can disable the thumbnail paging text (e.g. "1 of 1") in Small Screen Mode by setting showSmallPagingText="FALSE" in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section.

I actually would have captions from flickr but for some reason only the uploaded date would show, not the imagedate?

I'm not sure how you have entered your Flickr titles and descriptions but you might need to set flickrShowDescription="TRUE" in JuiceboxBuilder-Pro's 'Customize -> Flickr' section.
(The default value for flickrShowTitle is TRUE but the default value for flickrShowDescription is FALSE.)

Re: How to update gallery through web? [SOLVED]

Yeah, but then it only shows the date for the upload, not the date that the picture was taken

Re: How to update gallery through web? [SOLVED]

I do not know how your Flickr descriptions have been populated (maybe generated automatically by Flickr or entered manually by yourself) but Juicebox will just display whatever the Flickr descriptions are.
It sounds like you might need to change the Flickr descriptions for your images in the Flickr interface.
Juicebox will display only the Flickr titles (for the image titles) and the Flickr descriptions (for the image captions).
It is not possible for Juicebox to extract information from any other Flickr field for use in the Juicebox caption area.

If you used the PHP suggestion (instead of using Flickr as a source for your gallery), then you could use PHP to extract certain embedded IPTC metadata from the images (such as the 'CreationDate') and then use this information as image titles or captions.
Knowledge of PHP would be required but it should certainly be possible.
If you'd like to look into this further, please see the PHP support page for the iptcparse function.
It might be a bit of work initially to write the script but it might prevent you from having to manually edit the Flickr descriptions for all your images.

Re: How to update gallery through web? [SOLVED]

Ive got it to work but I have several problems.

1. If you check http://zeerux.com/galleri/ you can see the following problems that has something to do with the config.php file:

1.1 The title of the gallery is visible and the buttons float both over image and beside it. The galleryfile got the buttons over the image and caption from the image under the image.
1.2. It seems like something overwrites my settings?

2. If I upload a image, it lands as thumb nr2? I want new images to get as first image.

this is my config.php:

<?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="The Neighbourhood 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>';
?>

this is my index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>The Neighbourhood Gallery</title>
    <meta charset="utf-8" />
    <meta name="description" content="" />

    <!-- START OPEN GRAPH TAGS-->
    <meta property="og:title" content="The Neighbourhood Gallery" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />
    <meta property="og:description" content="" />
    <!-- END OPEN GRAPH TAGS-->

    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        configUrl : 'config.php',
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: 'rgba(18,18,18,1)'
    });
    </script>
    <div id="juicebox-container">
            <!-- Image gallery content for non-javascript devices -->
            <noscript>
                <h1>The Neighbourhood Gallery</h1>
                <p></p>

            </noscript>
        </div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

and this is my config.xml

<?xml version="1.0" encoding="UTF-8"?>

<juiceboxgallery 

    useFlickr="false"
    maxThumbColumns="7"
    captionPosition="BELOW_IMAGE"
    buttonBarPosition="OVERLAY_IMAGE"
    galleryTitlePosition="NONE"
    backgroundColor="rgba(18,18,18,1)"
    topBackColor="rgba(0,0,0,0.5)"
    thumbFrameColor="rgba(204,204,204,1)"
    thumbHoverFrameWidth="3"
    thumbSelectedFrameWidth="5"
    topAreaHeight="5"
    stagePadding="10"
    showOpenButton="true"
    showExpandButton="false"
    showThumbsButton="true"
    showImageOverlay="ALWAYS"
    showOverlayOnLoad="true"
    showImageNumber="false"
    maxCaptionHeight="50"
    captionHAlign="CENTER"
    showSplashPage="NEVER"
    showInfoButton="false"
    screenMode="LARGE"
    showSmallPagingText="false"
    showSmallThumbsButton="false"
    showSmallThumbsOnLoad="false"
    backButtonUseIcon="true"
    showImageNav="ALWAYS"
    captionBackColor="rgba(0,0,0,0.4)"
    useLargeImages="false"
    resizeOnImport="true"
    maxImageWidth="2048"
    maxImageHeight="1536"
    showNavButtons="false"
    flickrShowTitle="false"
    showAutoPlayButton="false"
    useFullscreenExpand="false"
    useThumbDots="false"
    expandInNewPage="TRUE"
    showThumbsOnLoad="true"
    galleryTitle="The Neighbourhood Gallery"
    enableDirectLinks="false"
    imageNavPosition="IMAGE"
    thumbNavPosition="CENTER"
    buttonBarHAlign="RIGHT"/>

Re: How to update gallery through web? [SOLVED]

(1) As you are using a PHP file to dynamically generate the gallery's XML content (configUrl : 'config.php',) Juicebox does not use your 'config.xml' file at all.
If you want the configuration options from your 'config.xml' file to be used in your gallery, you'l need to copy them across into your 'config.php' file (as attributes to the opening <juiceboxgallery> tag).

(2) The PHP script will read the directory and display the images in alphabetical order.
If you would like to reverse this order, use PHP's array_reverse function on the array of images before the loop which outputs the <image> tags.
You can manipulate the array using other functions (built-in PHP functions or custom functions) to sort the images in any order you like.

Try something like the following (which incorporates both of my suggestions above):

<?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');
$gallery=array_reverse($gallery);
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<juiceboxgallery useFlickr="false" maxThumbColumns="7" captionPosition="BELOW_IMAGE" buttonBarPosition="OVERLAY_IMAGE" galleryTitlePosition="NONE" backgroundColor="rgba(18,18,18,1)" topBackColor="rgba(0,0,0,0.5)" thumbFrameColor="rgba(204,204,204,1)" thumbHoverFrameWidth="3" thumbSelectedFrameWidth="5" topAreaHeight="5" stagePadding="10" showOpenButton="true" showExpandButton="false" showThumbsButton="true" showImageOverlay="ALWAYS" showOverlayOnLoad="true" showImageNumber="false" maxCaptionHeight="50" captionHAlign="CENTER" showSplashPage="NEVER" showInfoButton="false" screenMode="LARGE" showSmallPagingText="false" showSmallThumbsButton="false" showSmallThumbsOnLoad="false" backButtonUseIcon="true" showImageNav="ALWAYS" captionBackColor="rgba(0,0,0,0.4)" useLargeImages="false" resizeOnImport="true" maxImageWidth="2048" maxImageHeight="1536" showNavButtons="false" flickrShowTitle="false" showAutoPlayButton="false" useFullscreenExpand="false" useThumbDots="false" expandInNewPage="TRUE" showThumbsOnLoad="true" galleryTitle="The Neighbourhood Gallery" enableDirectLinks="false" imageNavPosition="IMAGE" thumbNavPosition="CENTER" buttonBarHAlign="RIGHT">';
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>';
?>

Re: How to update gallery through web? [SOLVED]

I used this code:

<?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 useFlickr="false" maxThumbColumns="7" captionPosition="BELOW_IMAGE" buttonBarPosition="OVERLAY_IMAGE" galleryTitlePosition="NONE" backgroundColor="rgba(18,18,18,1)" topBackColor="rgba(0,0,0,0.5)" thumbFrameColor="rgba(204,204,204,1)" thumbHoverFrameWidth="3" thumbSelectedFrameWidth="5" topAreaHeight="10" stagePadding="10" showOpenButton="true" showExpandButton="false" showThumbsButton="true" showImageOverlay="ALWAYS" showOverlayOnLoad="true" showImageNumber="false" maxCaptionHeight="50" captionHAlign="CENTER" showSplashPage="NEVER" showInfoButton="false" screenMode="LARGE" showSmallPagingText="false" showSmallThumbsButton="false" showSmallThumbsOnLoad="false" backButtonUseIcon="true" showImageNav="ALWAYS" captionBackColor="rgba(0,0,0,0.4)" useLargeImages="false" resizeOnImport="true" maxImageWidth="2048" maxImageHeight="1536" showNavButtons="false" flickrShowTitle="false" showAutoPlayButton="false" useFullscreenExpand="false" useThumbDots="false" expandInNewPage="TRUE" showThumbsOnLoad="true" galleryTitle="The Neighbourhood Gallery" enableDirectLinks="false" imageNavPosition="IMAGE" thumbNavPosition="CENTER" buttonBarHAlign="RIGHT">';
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>';
?>

and that worked a bit.. but I cant see the caption at all?

Re: How to update gallery through web? [SOLVED]

and that worked a bit..

If you still want to reverse the order of the images, replace:

$gallery=GetDirArray('images');

... with:

$gallery = GetDirArray('images');
$gallery = array_reverse($gallery);

but I cant see the caption at all?

Your PHP script does not populate the image titles or captions with anything at all. They are currently empty.
As an example, if you want to display the filename (without the file extension) as the image title and the IPTC Description (embedded within the image) as the image caption, then replace:

echo '<title></title>';
echo '<caption></caption>';

... with:

echo '<title><![CDATA[' . pathinfo($gallery[$i], PATHINFO_FILENAME) . ']]></title>'; // Extract and use filename without file extension for image title
$caption = '';
$size = getimagesize('images/' . $gallery[$i], $info); // Puts image info into $info array
if(isset($info['APP13'])) { // If IPTC data is present in image info...
    $iptc = iptcparse($info['APP13']); // Put IPTC data into $iptc array
    $caption = $iptc['2#120']; // Use IPTC Description as image caption
    $caption = preg_replace('/\r\n|\r|\n/', '<br />', $caption); // Ensure line feeds and carriage returns from IPTC Description are respected
    $caption = preg_replace('/\p{Cc}+/u', '', $caption); // Strip control characters from image caption
}
echo '<caption><![CDATA[' . $caption[0] . ']]></caption>'; // Display image caption

With your current gallery settings, you'll likely need to increase the maxCaptionHeight value (from 50 to something larger, such as the default value of 120) to accommodate both an image title and an image caption (for both to be visible).

I hope this helps.

Re: How to update gallery through web? [SOLVED]

Ah nice. But its enough with the title from the filename since its datebased. What code can I use the if I only want imagetitel
? (filename without extension) thx again!

Re: How to update gallery through web? [SOLVED]

If you just want to use the filename for the image title (and have no image caption), then, in the original code, change:

echo '<title></title>';
echo '<caption></caption>';

... to:

echo '<title><![CDATA[' . pathinfo($gallery[$i], PATHINFO_FILENAME) . ']]></title>';
echo '<caption></caption>';

Here's the complete code:

<?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');
$gallery=array_reverse($gallery);
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<juiceboxgallery useFlickr="false" maxThumbColumns="7" captionPosition="BELOW_IMAGE" buttonBarPosition="OVERLAY_IMAGE" galleryTitlePosition="NONE" backgroundColor="rgba(18,18,18,1)" topBackColor="rgba(0,0,0,0.5)" thumbFrameColor="rgba(204,204,204,1)" thumbHoverFrameWidth="3" thumbSelectedFrameWidth="5" topAreaHeight="5" stagePadding="10" showOpenButton="true" showExpandButton="false" showThumbsButton="true" showImageOverlay="ALWAYS" showOverlayOnLoad="true" showImageNumber="false" maxCaptionHeight="50" captionHAlign="CENTER" showSplashPage="NEVER" showInfoButton="false" screenMode="LARGE" showSmallPagingText="false" showSmallThumbsButton="false" showSmallThumbsOnLoad="false" backButtonUseIcon="true" showImageNav="ALWAYS" captionBackColor="rgba(0,0,0,0.4)" useLargeImages="false" resizeOnImport="true" maxImageWidth="2048" maxImageHeight="1536" showNavButtons="false" flickrShowTitle="false" showAutoPlayButton="false" useFullscreenExpand="false" useThumbDots="false" expandInNewPage="TRUE" showThumbsOnLoad="true" galleryTitle="The Neighbourhood Gallery" enableDirectLinks="false" imageNavPosition="IMAGE" thumbNavPosition="CENTER" buttonBarHAlign="RIGHT">';
for ($i=0; $i<sizeof($gallery); $i++)
{
    echo '<image imageURL="images/'.$gallery[$i].'" thumbURL="images/'.$gallery[$i].'" linkURL="" linkTarget="">';
    echo '<title><![CDATA[' . pathinfo($gallery[$i], PATHINFO_FILENAME) . ']]></title>';
    echo '<caption></caption>';
    echo '</image>';
}
echo '</juiceboxgallery>';
?>

Re: How to update gallery through web? [SOLVED]

EXCELLENT! Exact how I want it! Thx for all your help! This case is now solved =) Have a nice christmas!

Re: How to update gallery through web? [SOLVED]

You're welcome!
I'm glad you've now got a PHP script which works as you like.
I hope you have a great Christmas, too!