Pull and Display Images in Website Gallery from Dropbox Directory

Question

I'm working with a client who is a photographer to create a simple website, and I was hoping to set up a photo gallery that pulls from a Dropbox folder, so whenever she wants to update the images in the gallery, she just has to swap the photos out of the Dropbox folder. Simple, right?

Is there a way to pull images from a Dropbox directory using jQuery or PHP and display them onto a webpage? I have successfully pulled text from a text file on Dropbox, but I don't know if this same thing is possible for images in a directory.

I did some Google searching, but I kept getting results teaching me how to upload and download pictures to a Dropbox directory -- not what I want.

Answer 1

It's really pretty simple. Here is a snippet from http://davidwalsh.name/generate-photo-gallery Follow this link and you'll found a simple way to solve your issue (demo included).

/** settings **/
$images_dir = '<path-to-your-dropbox>';
$thumbs_dir = '<path-to-your-generated thumbnails>';
$thumbs_width = 200;
$images_per_row = 3;

/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
  $index = 0;
  foreach($image_files as $index=>$file) {
    $index++;
    $thumbnail_image = $thumbs_dir.$file;
    if(!file_exists($thumbnail_image)) {
      $extension = get_file_extension($thumbnail_image);
      if($extension) {
        make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
      }
    }
    echo '<a href="',$images_dir.$file,'" class="photo-link smoothbox" rel="gallery"><img src="',$thumbnail_image,'" /></a>';
    if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }
  }
  echo '<div class="clear"></div>';
}
else {
  echo '<p>There are no images in this gallery.</p>';
}

Answer 2

I have done a similar thing a while ago. So, yes, this is possible. You may search "php gallery without database". All you need is to specify a path to your Dropbox's images directory and make it accessible via web.

Do you need to learn how Dropbox works? In a two words: it syncs a local directory (let's say "C:/Dropbox/gallery/" at photographer's computer) with Dropbox's servers. After that, every other instance of Dropbox where installed and signed in with photographer's account will get and apply any changes of "C:/Dropbox/Gallery/" to the their own copy (let's say, "/var/www/Dropbox/gallery" e.g. on the web-server).

So, first of all you need to install Dropbox on the web server (https://www.dropbox.com/install?os=lnx). Is it problem? If yes, you need to find another way. If not, you may just write a simple function/class which will scan served web dir (like /var/www/Dropbox/gallery) for images and generate a web-accessible paths to the images.

Simplest example:

<?php
$images = glob("/var/www/Dropbox/gallery/*.*");
for ($i=0; $i<count($files)-1; $i++)
{
    $img = $images[$i];
    echo '<img src="/'.$img.'" alt="random image" />";
}
?>

Also, you maybe interested in this: My PHP DropBox Gallery 1.0 Beta