.: HosiriS :.

Informatica e non solo

Creiamo una galleria immagini con Symfony

Posted by hosiris su ottobre 31, 2010

Avviso subito che questo post è valido solo se state usando Propel come ORM perchè prevediamo l’uso del plugin sfAssetsLibraryPlugin. Non parlerò dell’installazione di questo plugin che è ben spiegata nel readme.
I restanti plugin che utilizzeremo e che vi conviene installare da subito sono:

  • sfThumbnailPlugin
  • sfJQueryLightboxPlugin
  • sfJqueryReloadedPlugin

Accediamo al backend di sfAsset (…/backend/sfAsset) e creiamo una cartella “gallery”. All’interno di questa cartella potrete uploadare tutte le immagini.
Per configurare il frontend cominciamo con il creare il modulo gallery:

$ ./symfony generate:module frontend gallery

Aggiungiamo la rotta per il nuovo modulo:

# apps/frontend/config/routing.yml
gallery_list:
  url: /gallery
  param: { module: gallery, action: index }

Apriamo il file action.class.php del modulo gallery e aggiungiamo:

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];
  }
  $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;
}

Adesso modifichiamo il template, quindi apriamo il file indexSuccess.php

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

Cancelliamo la cache:

$ ./symfony cc

In questo modo vedremo apparire la galleria nella pagina: http://yoursite/frontend_dev.php/gallery.

Possiamo aggiungere un effetto lightbox alle immagini quando viene cliccata una immagine.
Riapriamo il file indexSuccess.php e mofichiamo l’uso dell’helper in:

e modifichiamo il div gallery come segue:

Ricaricate la pagina, et voila… tutto pronto.

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

 
%d blogger cliccano Mi Piace per questo: