Sirius Sirius - 3 months ago 19
Twig Question

Custom the style of each element in a loop [symfony2]

I'm rendering a list of categories from my database in my index page, i don't know how to give a unique style to each category, it's easy to give a unique style for all the categories, but how to personalize the style to each one.

Each category is render in a grid block and each grid block have his own style.

What happening right now is each category are repeated by the number of category in the database.

This is my twig file:

{% for entity in entities %}
<div class="global-wrap">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row row-wrap">
<div class="col-xs-12 col-md-8">
<div class="thumb">
<a class="hover-img" href="{{ path('categorieProducts', { 'entity' : entity.id }) }}">
<img height="357px" width="100%" src="{{ asset('bundles/flyplatform/img/blog1.jpg')}}" alt="Image Alternative text" title="" />
<div class="hover-inner hover-inner-block hover-inner-bottom hover-inner-bg-black hover-hold">
<div class="text-small">
<h5 style="font-family: Lato, sans-serif; text-align: center;font-size: 34px;font-weight: 500">{{ entity.name }}</h5>
<h6 style="text-align: right;font-family: Lato, sans-serif;font-size: 20px;font-weight: 400">77497 reviews</h6>
</div>
</div>
</a>
</div>
</div>


<div class="col-xs-6 col-md-4">
<div class="thumb">
<a class="hover-img" href="{{ path('categorieProducts', { 'entity' : entity.id }) }}">
<img height="357px" width="100%" src="{{ asset('bundles/flyplatform/img/blog1.jpg')}}" alt="Image Alternative text" title="" />
<div class="hover-inner hover-inner-block hover-inner-bottom hover-inner-bg-black hover-hold">
<div class="text-small">
<h5>{{ entity.name }}</h5>
<h6>54531 reviews</h6>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="thumb">
<a class="hover-img" href="{{ path('categorieProducts', { 'entity' : entity.id }) }}">
<img height="357px" width="100%" src="{{ asset('bundles/flyplatform/img/blog1.jpg')}}" alt="Image Alternative text" title="" />
<div class="hover-inner hover-inner-block hover-inner-bottom hover-inner-bg-black hover-hold">
<div class="text-small">
<h5>{{ entity.name }}</h5>
<h6>68703 reviews</h6>

</div>
</div>
</a>
</div>
</div>


<div class="col-xs-12 col-md-8">
<div class="thumb">
<a class="hover-img" href="{{ path('categorieProducts', { 'entity' : entity.id }) }}">
<img height="357px" width="100%" src="{{ asset('bundles/flyplatform/img/grid1.png')}}" alt="Image Alternative text" title="" />
<div class="hover-inner hover-inner-block hover-inner-bottom hover-inner-bg-black hover-hold">
<div class="text-small">
<h5 style="font-family: Lato, sans-serif; text-align: center;font-size: 34px;font-weight: 500">{{ entity.name }}</h5>
<p style="text-align: right;font-family: Lato, sans-serif;font-size: 20px;font-weight: 400">44391 reviews</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
{% endfor %}


.

public function categorycityAction()
{
$em = $this->getDoctrine()->getManager();
$entities = $em->getRepository('FLYBookingsBundle:Categories')->findAll();
return $this->render('FLYBookingsBundle:Post:categorycity.html.twig', array('entities' => $entities));
}


ADD:

the answer of @zizoujab give me the idea to render each category separately in the page index and each category have his own controller action then for each controller action i can make a query builder that will search the category id the database.

but i have the following error:


An exception has been thrown during the rendering of a template
("Controller
"FLY\xxxxxxxBundle\Controller\PostController::categorylondonAction()"
requires that you provide a value for the "$entity" argument (because
there is no default value or because there is a non optional argument
after this one).")


index.html.twig

{% render (controller('FLYBookingsBundle:Post:categorylondon')) %}


PostRepository.php

london category have the
id 1
in the database.

public function byLondon($entity)
{
$qb = $this->createQueryBuilder('u')
->select('u')
->Where('u.id = 1')
->orderBy('u.id')
->setParameter('entity', $entity);
return $qb->getQuery()->getResult();
}


.

PostController.php

public function categorylondonAction($entity)
{
$em = $this->getDoctrine()->getManager();
$entities = $em->getRepository('FLYBookingsBundle:Categories')->byLondon($entity);
return $this->render('FLYBookingsBundle:Post:categorylondon.html.twig', array('entities' => $entities));
}

Answer

I finally fixed my issue.

This is how i render my controller in index.html.twig:

{% render (controller('FLYBookingsBundle:Post:categorylondon' , { 'id': 1 })) %}

Controller:

public function categorylondonAction($id)
    {
        $em = $this->getDoctrine()->getManager();
        $entities = $em->getRepository('FLYBookingsBundle:Categories')->findBy(array('id' => $id));
        return $this->render('FLYBookingsBundle:Post:categorylondon.html.twig', array('entities' => $entities));
    }

Thank you @VaN and @zizoujab for you help.

Comments