Category:Module | Category:Module -> Images | Category:Module -> Photo Gallery
New version PhotoBox2: http://codeigniter.com/wiki/PhotoBox2/
A very basic photo gallery module. This is primarily for demonstration purposes to show how to build a simple gallery module with very little code. NOTE: it only works with JPGs out-of-the-box.
Installation:
You first need to install the HMVC 4 module. Tested with CI 1.6.3 and HMVC version 4.2.06
Then, create a module folder named “photobox” and in that module directory put three new directories: controllers, views, and photobox (yes, another directory called photobox). Make this photobox sub-directory writeable by the webserver. This is where you will dump your full size images and where thumbnails can be written/cached by the module.
Name this controller photobox.php (so HMVC/ME calls it automatically):
<?php
class Photobox extends Controller {
// the image extension this module can work with
var $img_ext = '.jpg';
var $thumb_height = 150;
// this will be used to rename files and also
// cull them from the directory listing
var $thumb_string = '_thumb';
// this directory must exist alongside the
// module controller dir (at the same level)
// and it must have write permissions
// for the thumbnail cache to work
var $photo_dir = 'photobox';
// string for the title and heading
var $heading = 'PhotoBox Module';
function Photobox()
{
parent::Controller();
// PHP4 has problems with var declaration
// so concatenate here to get the proper path
// detect if we are in module context
// so this controller can be used out of module too
$mod_base = (defined('MODBASE')) ? MODBASE.__CLASS__.'/' : '';
$this->photo_dir = $mod_base.$this->photo_dir;
}
// generate an index page that lists the files
// with thumbnails as links to larger size.
// the view file builds thumb img tags that request back
// to this controller's show() function to get their images
function index()
{
$this->load->helper('directory');
$this->load->helper('html');
$this->load->helper('url');
// get the list of photos from the disk
$dirmap = directory_map($this->photo_dir, TRUE);
// remove the thumbs from the files array
$data['files'] = array_filter($dirmap, array($this,'_cull_thumbs'));
$data['heading'] = $this->heading;
$this->load->view('index', $data);
}
// show a thumb or full size image - outputs directly
// this is an "image controller" because it renders
// the image directly to the browser
function show($size, $file)
{
$this->load->helper('file');
$path = $this->photo_dir.'/'.$file;
if ($size === 'thumb')
{
// this is weak because it relies on filename
$thumb_path = str_replace($this->img_ext, $this->thumb_string.$this->img_ext, $path);
if (!file_exists($thumb_path))
{
// regenerate the thumb file from the full size
$this->_thumb($path);
}
$path = $thumb_path;
}
// load up the image from the disk - file_helper
$mimetype = get_mime_by_extension($path);
header('Content-Type: '.$mimetype);
echo read_file($path);
}
// generate the thumbnail file using CI lib
function _thumb($path)
{
$config['source_image'] = $path;
$config['create_thumb'] = TRUE;
$config['thumb_marker'] = $this->thumb_string;
$config['height'] = $this->thumb_height;
$config['width'] = $this->thumb_height;
$this->load->library('image_lib', $config);
$this->image_lib->resize();
}
// remove the thumb files from the listing
function _cull_thumbs($fname)
{
return !strpos($fname,$this->thumb_string);
}
}
/* End of file photobox.php */
/* Location: ./system/application/modules/photobox/controllers/photobox.php */
The view file called index.php:
<html>
<head>
<title><?php echo $heading ?></title>
<style type="text/css">
body {
background-color: #fff;
margin: 20px;
font-family: Lucida Grande, Verdana, Sans-serif;
font-size: 14px;
color: #4F5155;
}
h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 16px;
font-weight: bold;
margin: 12px 0 2px 0;
padding: 5px 0 6px 0;
}
</style>
</head>
<body>
<h1><?php echo $heading ?></h1>
<?php foreach($files as $file): ?>
<?php $f = htmlentities($file); ?>
<?php echo anchor('photobox/show/view/'.$f, img('photobox/show/thumb/'.$f)); ?>
<?php endforeach; ?>
</body>
</html>
You should have:
/*
modules/photobox/controllers/photobox.php
modules/photobox/views/index.php
modules/photobox/photobox/a_bunch_of_jpgs_here
*/
Usage
1. Make sure you have a working HMVC / Modular Extensions install.
2. Make sure you make the photobox sub-dir writeable by the webserver.
3. Put some jpg photos in the photobox sub-directory.
4. Navigate to the URL for the module: something like: example.com/photobox