symfony-bundle image-bundle

avro/image-bundle

Symfony2 image Bundle

AvroImageBundle

Symfony2 Image Bundle., _(*1)

Easily attach images to any object and display them as a gallery, carousel, or lightbox., _(*2)

Status

• A work in progress
• Currently only works with MongoDB and stores images in GridFS

Requirements

• LiipImagineBundle
• DoctrineMongodbBundle

Installation

Download AvroImageBundle using composer

Add AvroImageBundle in your composer.json:, _(*3)

{
    "require": {
        "avro/image-bundle": "*"
    }
}

Now tell composer to download the bundle by running the command:, _(*4)

``` bash $ php composer.phar update avro/image-bundle, <sub>(*5)</sub>

### Enable the bundle in the kernel:

``` php
// app/AppKernel.php
new Avro\ImageBundle\AvroImageBundle

Add Routing

//app/config/routing, <sub>(*6)</sub>

``` yaml avro_image: resource: "@AvroImageBundle/Resources/config/routing/routing.xml", <sub>(*7)</sub>

### Add Resources
Add CSS
``` html
{% stylesheets output='css/compiled/app.css' filter='cssrewrite, less, ?yui_css'
...
    'bundles/avroimage/css/avro-image.css'
...
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="screen" />
{% endstylesheets %}

Add JS ``` html {% javascripts output='js/compiled/app.js' filter='?yui_js' ... 'bundles/avroimage/js/avro-image.js' ... %} {% endjavascripts %}, <sub>(*8)</sub>

Dump your assets and watch
``` bash
$ php app/console assets:install --symlink=true

$ php app/console assetic:dump --watch --force 

Add Mapping

Add the image reference to the object you want to rate, <sub>(*9)</sub>

``` php <?php // src/Acme/ProductBundle/Document/Product.php, <sub>(*10)</sub>

namespace Acme\ProductBundle\Document;, <sub>(*11)</sub>

use Doctrine\ODM\MongoDB\Mapping\Annotations as ODM; use Avro\ImageBundle\Model\ImageObjectInterface;, <sub>(*12)</sub>

/** * @ODM\Document */ class Product implements ImageObjectInterface { ..., <sub>(*13)</sub>

public function __construct()
{
    $this->images = new \Doctrine\Common\Collections\ArrayCollection();
}
/**
 * @ODM\ReferenceMany(targetDocument="Avro\ImageBundle\Document\Image", cascade={"all"}, sort={"position"="asc"})
 */
protected $images;

/**
 * Set images
 *
 * @param ArrayCollection $images
 * @return Product
 */
public function setImages(\Doctrine\Common\Collections\ArrayCollection $images)
{
    $this->images = $images;
    return $this;
}

/**
 * Get images
 *
 * @return MongoCursor $images
 */
public function getImages()
{
    return $this->images;
}

/**
 * Add images
 *
 * @param Avro\ImageBundle\Document\Image $image
 */
public function addImage(\Avro\ImageBundle\Document\Image $image)
{
    $this->images[] = $image;
    return $this;
}

/**
 * Remove image
 *
 * @param Avro\ImageBundle\Document\Image $image
 */
public function removeImage(\Avro\ImageBundle\Document\Image $image)
{
    $this->images->removeElement($image);
    return $this;
}

/**
 * Get the documents name
 */
public function getDocumentName()
{
    return 'product';
}

...

}, <sub>(*14)</sub>

Configuration Reference
-----------------------
``` yaml
    avro_image:
        db_driver: mongodb 
        carousels:
            my_carousel:
                style=twitter
                width: 300
                height: 300
                slide: true
            my_custom_carousel:
                style: custom
                template: AcmeDemoBundle:Carousel:my_carousel.html.twig

Showing Images

Render images in twitter bootstrap carousel, <sub>(*15)</sub>

html {{ carousel_render('twitter', product.images) }}, <sub>(*16)</sub>

And that's it!, <sub>(*17)</sub>

Contributing

Send in your custom templates!, <sub>(*18)</sub>