PhotoBox HMVC Module Modular Extensions

Derek Jones edited this page Jul 5, 2012 · 10 revisions
Clone this wiki locally

Category:Module | Category:Module::Images | Category:Module::Photo Gallery

New version 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.


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):


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()
        // 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()
        // 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)
        $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
            $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);         
    // 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:```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>

<?php echo $heading ?>

<?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:


  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: