Pull and Display Images in Website Gallery from Dropbox Directory

4
votes

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.

4
phpjquerydropbox
Jon, You commented on Ashley's answer that you found a solution, would you be kind enough to post your solution? - pgarciacamou
If I remember correctly, what I thought was a solution didn't end up working in the end. I have marked the question as unanswered. - Jon
Ok, thanks for answering back! - pgarciacamou

4 Answers

3
votes

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>';
}
3
votes

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

2
votes

I think I found a very good solution for beginners like me. Drop box is rather restrictive of what you can do with it. However, you can sync an FTP folder and sub directories via an FTP client. I use the open source WINSCP. I let it run in the background. It constantly scans both ftp and dropbox folders for sync. If a file disappears from one folder, it disappears from the other. Therefore you can use dropbox to edit the photos in your gallery and use the javascript above to create an awesome light-box. There are probably other solutions, but I found this to be VERY simple. Also, you can simply retrieve files and delete them from dropbox if you are worried about space. I know this was posted a year ago, but I just spent the entire day trying to mess with dropbox core api and it is unfortunately over my head.

1
votes

you could also try to pull the images with the dropbox chooser.

Michael