Creating simple image gallery using sfAssetsLibraryPlugin and sfJQueryLightboxPlugin

This article has moved to this location.


In this article, i would like to share how to create a simple image gallery in symfony using exsisting plugins. What plugins do we need? Below are list of plugins that will be used in this article :

  1. sfAssetsLibraryPlugin
  2. sfThumbnailPlugin (required by sfAssetsLibraryPlugin)
  3. sfJQueryLightboxPlugin
  4. sfJqueryReloadedPlugin (required by sfJQueryLightboxPlugin)

Backend

It is assumed you’ve already installed sfAssetsLibraryPlugin. Please refer to the sfAssetsLibraryPlugin’s documentation, for detailed instructions.

Let’s just get started.

  1. Determine the size of the thumbnail image that will be displayed in the frontend. It’s can be done by modifying the plugin settings. In this article, the size of image is defined in the small setting of thumbnails section.
    Open your backend’s apps.yml, and add this settings below:

      sfAssetsLibrary:
        upload_dir: media #root folder
        thumbnails:
          small: { width: 154, height: 140, shave: true }
          large: { width: 320, height: 300, shave: true }
    
  2. Create a gallery directory as a child of the root directory (in this article is media)
  3. Create subdirectories as a child of gallery directory, then upload images into subdirectories you’ve just created



After you have finished the step by step above, Now we move to the next step.. displaying gallery in the frontend application.

Frontend

Here are step by step to create gallery for your frontend’s application :

  1. Create a gallery module (./symfony generate:module frontend gallery)
  2. Add the following routing rule to your frontend’s routings.yml

    #--MODULE gallery
    gallery_list:
      url: /gallery
      param: { module: gallery, action: index }
    
  3. Open the actions.class.php file, then modify it’s index action:

    public function executeIndex(sfWebRequest $request)
    {
       $parentPath = null;
       $path = $request->getParameter('dir', 'gallery');
       $folder = sfAssetFolderPeer::retrieveByPath($path);
       $this->forward404Unless(!$folder->isRoot());
       $parentPaths = explode('/', $folder->getParentPath());
       if (0 < $cnt = count($parentPaths)) {
         $parentPath = $parentPaths[$cnt-1];  
       }
       $dirs = $folder->getChildren();
       $c = new Criteria();
       $c->add(sfAssetPeer::FOLDER_ID, $folder->getId());
       $c->addDescendingOrderByColumn(sfAssetPeer::CREATED_AT);
       $this->files = sfAssetPeer::doSelect($c);
       $this->dirs = $dirs;
       $this->folder = $folder;
       $this->parentPath = $parentPath;
    }
    

    In the action above, the default directory is set to gallery when a user visit the gallery page for the first time, and hide all the directories except gallery’s and it’s childrens.

  4. Open the indexSuccess.php file, then modiy it’s content:

    <?php use_stylesheet('gallery.css', 'last') ?>
    <?php use_helper('I18N', 'sfAsset') ?>
    <h1><?php echo strtoupper($folder->getRelativePath()) ?></h1>
    <hr/>
    <div id="media">
    <?php if (null !== $parentPath && $parentPath == 'gallery'): ?>
      <div class="assetImage">
        <div class="thumbnails">
          <?php echo link_to_asset(image_tag('/sfAssetsLibraryPlugin/images/up', 'size=64x64 alt=up title='.__('Parent directory', null, 'sfAsset')), '@gallery_list?dir='. $folder->getParentPath()) ?>
        </div>
        <div class="assetComment" id="ajax_dir_0">..</div>
      </div>
    <?php endif ?>
    
    <?php foreach ($dirs as $dir): ?>
      <div class="assetImage">
        <div class="thumbnails">
          <?php echo link_to_asset(image_tag('/sfAssetsLibraryPlugin/images/folder', 'size=64x64 alt=folder title='.$dir->getName()), '@gallery_list?dir=' . $dir->getRelativePath()) ?>
        </div>
        <div class="assetComment"><?php echo auto_wrap_text($dir->getName()) ?></div>
      </div>
    <?php endforeach ?>
    </div>
    <div id="gallery">
    <?php foreach ($files as $sf_asset): ?>
    	<?php $src_thumb = $sf_asset->getUrl('small', isset($folder) ? $folder->getRelativePath() : null); ?>
    	<?php echo image_tag($src_thumb, array('class'=>'light', 'width'=>154, 'height'=>140)) ?>
    <?php endforeach ?>
    </div>
    </div>
    

Below is a screenshot of the gallery page when it’s viewed for the first time:

And below is a screenshot of the gallery page after a user clicked Me directory:

Adding Lightbox

In order to make our gallery more alive ;), let us add the jquery lightbox into our application, so that when a user clicking on one of the images, it’ll display as follows:

  1. Install sfJQueryLightboxPlugin and sfJqueryReloadedPlugin.
  2. reopen the indexSuccess.php file, and load jQuery and sfJQueryLightbox helper so the line 02 above become:

    <?php use_helper('I18N', 'sfAsset', 'jQuery', 'sfJQueryLightbox') ?>
    

    Edit the gallery tag and add light_image function, so it’ll become:

    <div id="gallery">
    <?php foreach ($files as $sf_asset): ?>
    	<?php $path = isset($folder) ? $folder->getRelativePath() : null ?>
    	<?php $src_thumb = $sf_asset->getUrl('small', $path); ?>
    	<?php $src_full = $sf_asset->getUrl('full', $path); ?>
    	<?php echo light_image($src_thumb, $src_full, array('title'=>$sf_asset->getDescription()), array('class'=>'light', 'width'=>154, 'height'=>140)) ?>	
    <?php endforeach ?>
    </div>
    

Done!!!.

CSS

Below is the css used for gallery module (gallery.css) :

#media { float: left;width: 70px;text-align: center;margin-right: 5px; }
#media a img {display:block;border:none;margin:0;}
#media .assetImage {height: 100px;}
#media .assetComment { background-color: white;color: black;padding-top: 3px; font-weight: bold;text-transform: uppercase;}
#media .thumbnails a:hover img { background: #eee; }
#gallery { opacity: 1; overflow: hidden;}
#gallery a {display:inline-block;position:relative; margin:2px;padding: 2px;width:174px;}
#gallery img.light {outline: 1px solid #ddd;border-top: 1px solid #fff;	padding: 10px;background: #f0f0f0;}

Hope it’s useful..
Thank you for visiting my blog..

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: