The Photo gallery application [Media Sharing]

Let us get started with implementing our custom photo gallery using Zend Framework 2. Since we have already implemented a file management interface, we will use a similar interface to implement a photo gallery.

The schema for a photo gallery will be similar to the Upload entity; additionally, we will have a field to store the thumbnail filename, which is generated during upload. Both the images and the generated thumbnails will bestored in the <Module>\data\images folder. We will use a custom action to display the images in the browser.

Before we get started, let's quickly review some of the important methods that are supported by WebinoImageThumb:

◆        resize ($maxWidth = 0, $maxHeight = 0): This function resizes the image to the specified height and width; if either of the values is set to 0, that dimension will not be considered as a limiter

◆        adaptiveResize ($width, $height): This function attempts to get the image as close to the provided dimensions as possible, and then crops the remaining overflow (from the center) to get the image to be the size specified

◆        crop ($startX, $startY, $cropWidth, $cropHeight): This function crops

the images from the given coordinates to the specified width and height

◆        rotateImage ($direction = 'CW'): Rotates the image by 90 degrees clockwise or counterclockwise

◆        rotateImageNDegrees ($degrees): Rotates the image by the specified degrees

◆        save ($fileName, $format = null): Saves the image by the specified filename

Carry out the following steps:

1.     Create a new entity called ImageUpload with the following table structure:

CREATE TABLE IF NOT EXISTS image_uploads (

id INT NOT NULL AUTO_INCREMENT PRIMARY KEY , filename VARCHAR( 255 ) NOT NULL ,

thumbnail VARCHAR( 255 ) NOT NULL , label VARCHAR( 255 ) NOT NULL , user_id INT NOT NULL,

UNIQUE KEY (filename)

);

2.       Create the relevant ImageUpload entity in the src/Users/Model/ ImageUpload.php file, the TableGateway object in the src/Users/Model/ ImageUploadTable.php file, and the Controller(MediaManagerController) inside the module (CommunicationApp/module/Users) in the src/Users/ Controller/MediaManagerController.php file.

3.       In the Upload form's Submit process, generate the thumbnail by using a new method called generateThumbnail(); this method will take the filename of the existing image as the parameter. The resize methodresizes the image to 75x75 px and saves it to the image upload directory with a tn_ prefix.

This method needs to be placed in the MediaManagerController file, src/ Users/Controller/MediaManagerController.php.

public function generateThumbnail($imageFileName)

{

$path = $this->getFileUploadLocation();

$sourceImageFileName = $path . '/' . $imageFileName;

$thumbnailFileName = 'tn_' . $imageFileName;

$imageThumb = $this->getServiceLocator()

->get('WebinoImageThumb');

$thumb = $imageThumb->create(

$sourceImageFileName,

$options = array());

$thumb->resize(75, 75);

$thumb->save($path . '/' . $thumbnailFileName);

return $thumbnailFileName;

}

4.     Our next step is to write an action to render the image in the Full and Thumbnail

modes; for this we will need to create a custom route that will take the action,

id, and subaction parameters. This is achieved by the following route definition

in the module configuration file, CommunicationApp/module/Users/config/

module.config.php:

'media' => array(

'type'    => 'Segment', 'options' => array(

'route'    => '/media[/:action[/:id[/:subaction]]]',

'constraints' => array(

'action'     => '[a-zA-Z][a-zA-Z0-9_-]*', 'id' => '[a-zA-Z0-9_-]*',

'subaction'     => '[a-zA-Z][a-zA-Z0-9_-]*',

),

'defaults' => array(

'controller' => 'Users\Controller\MediaManager', 'action'    => 'index',

),

),

),

5.       Our next step is to write an action that will respond to the various image requests. This action needs to be placed in the MediaManagerController file,src/Users/Controller/MediaManagerController.php.

public function showImageAction()

{

$uploadId = $this->params()->fromRoute('id');

$uploadTable = $this->getServiceLocator()

->get('ImageUploadTable');

$upload = $uploadTable->getUpload($uploadId);

// Fetch Configuration from Module Config

$uploadPath    = $this->getFileUploadLocation();

if ($this->params()->fromRoute('subaction') == 'thumb')

{

$filename = $uploadPath ."/" . $upload->thumbnail;

} else {

$filename = $uploadPath ."/" . $upload->filename;

}

$file = file_get_contents($filename);

// Directly return the Response

$response = $this->getEvent()->getResponse();

$response->getHeaders()->addHeaders(array( 'Content-Type' => 'application/octet-stream', 'Content-Disposition' => 'attachment;filename="'

.$upload->filename . '"',

));

$response->setContent($file); return $response;

}

6.       Make sure the process works completely, from uploading the picture to

the gallery to displaying it in the photo page. See the following code for the

usage of showImageAction() in the upload view in the media manager,

CommunicationApp/module/Users/view/users/media-manager/view.

phtml:

<section class="upload">

<h2><?php echo $this->escapeHtml($upload->label);?></h2>

<h4><?php echo $this->escapeHtml($upload->filename);?></h4>

<img src="<?php echo $this->url('users/media', array('action'=>'showImage',

'id' => $upload->id,

'subaction' => 'full'));?>" />

</section>

<a href="<?php echo $this->url('users/media');?>">

&raquo; Show Gallery</a>

7.       Now test the application on a browser of your choice. The image upload page should look like the following screenshot:

Once the image upload form is successfully submitted, the image will be resized and shown in the gallery as shown in the following screenshot:

       The View Image link on top of the resized image takes you to a page with the full-sized image:

What just happened?

We have implemented a simple photo gallery by making use of an external image manipulation library. We utilized the resize function to create thumbnails and we created a custom action to handle image rendering in the webbrowser.