Hack: A Very Simple Gallery Plugin

So my very good friend Jay takes amazing time-lapse photographs and videos and posts them to his site Skylapser. He has set up a camera that takes nightly videos of the sky and posts them to a folder on his site. Then he wanted to have a page that listed the files with links directly to them.

I thought this could be an easy plugin that could be useful to others too. You could throw a bunch of files into a folder and have a quick way to list them. They could be videos, images, PDFs, or anything. And you could update the contents of the folder and the page would automatically grab the new list.

Here’s the code for the plugin. You can just save it in a PHP file very-simple-gallery.php and put it in your Plugins folder. Then remember to enable it on the Plugins page in WordPress admin.

<?php
/*
Plugin Name: Very Simple Gallery
Plugin URI: 
Description: A very simply gallery shortcode that puts all files in a local folder on to a page and uses a simple icon for each one.
Version: 1.0
Author: Gary Rosenzweig
Author URI: https://wptipsandhacks.com
*/

add_shortcode('very-simple-gallery','wpshortcode_simple_gallery');

function wpshortcode_simple_gallery($atts) {
	ob_start();
	$dir = ABSPATH . $atts['dir'] .'/';
	if (!is_dir($dir)) return "Error: $dir is not a directory.";
	if (!($dh = opendir($dir))) return "Error: Unable to open $dir.";
    while (($file = readdir($dh)) !== false) {
       	 if (filetype($dir . $file) == "file") {
       	 	echo '<a href="' . get_home_url() . '/' . $atts['dir'] . '/' . $file .'">';
       	 	echo '<div style="float:left; margin:5px; width: '.$atts['width'].'px; height: '.$atts['height'].'px;" >';
       	 	echo('<img style="width: 100%;" src="' . $atts['icon'] . '"><br clear=all>');
  			echo "$file";
 			echo "</a></div>\n";
		}
	}
    closedir($dh);
    return ob_get_clean();
}

Alternatively, you could add the code, minus the comments, to your functions.php file.

Once you have it going, then the shortcode on the page would look like this.

[very-simple-gallery dir="pics" width=200 height=400 icon="/wp-content/plugins/very-simple-gallery/icon.png"]

The dir attribute specifies the directory of files. It is relative to the WordPress main level. So if you wanted to put the directory in wp-content, then you could use wp-content/gallery-pics or something like that. The same is true for the icon attribute. That’s the file that will be used as an icon graphic.

The width and height are for the entire block that contains the icon and the filename. So, for instance, if you want the icon to be 100×100 then a width of 100 and a height of 200 works well. The extra 100 pixels in height is room for the filename.

Inside the code, there is more you can customize. You can play with the style of the div and the img. I set the margin to 5px and I used a float:left so that the icons would fill a responsive-width page nicely.

Leave a Reply

Your email address will not be published. Required fields are marked *