Affichage image dans Carousel
andriamihaja
Bonjour,
Voila je rencontre un probleme pour la mise en page de ma gallerie
Ce que je fais
Voici mon controller
<?php
namespace App\Controller;
use App\Entity\SousService;
use App\Entity\Proprety;
use App\Entity\Photo;
use App\Repository\PropretyRepository;
use App\Repository\SousServiceRepository;
use App\Repository\PhotoRepository;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\Request;
use Doctrine\Common\Persistence\ObjectManager;
use Symfony\Component\Routing\Annotation\Route;
use Twig\Environment;
class HomeController extends AbstractController
{
/**
* @Route("/", name="home")
*/
public function index(PropretyRepository $repository)
{
$properties = $repository->findAll();
return $this->render('home.html.twig',[
'properties' => $properties
]);
}
/**
* @Route("portfolio/", name="portfolio")
*/
public function portfolio(PhotoRepository $repository)
{
$photos = $repository->findAll();
return $this->render('pages/portfolio.html.twig',[
'photos' => $photos
]);
}
/**
* @Route("service/{id}", name="service")
*/
public function show(Proprety $proprety)
{
$sousServices = new SousService();
return $this -> render('pages/service.html.twig',[
'proprety' => $proprety,
'id'=> $proprety->getId()
]);
}
/**
* @Route("{name}/gallerie", name="photo")
*/
public function gallerie(SousService $sousservice, SousServiceRepository $repository)
{
$services = $repository->findLatest();
$photos = new Photo();
return $this -> render('pages/gallerie.html.twig',[
'sousServices' => $sousservice,
'name'=> $sousservice->getName(),
'services' => $services
]);
}
}et voici ma page gallerie.html.twig:
{% extends 'home.html.twig' %}
{% block body %}
<body data-spy="scroll" data-target="#mynav" data-offset="85">
<div id="preloader">
<div id="status">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
<header>
<div id="navigation">
<div class="navbar-wrapper">
<nav class="navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ path('home') }}" style="background-image:url('../images/logo.png')"></a>
</div>
<div id="mynav" class="navbar-collapse collapse">
<ul class="nav navbar-nav main-nav-list">
<li><a href="#home">Menu</a></li>
<li><a href="{{path('portfolio')}}">Realisation</a></li>
<li><a href="studio.html">Studio Photo/video</a></li>
<li><a href="#">Publicité</a></li>
{% if app.user %}
<li><a href="{{ path('admin.proprety.index')}} "><i class="fa fa-laptop"></i></a></li>
{% endif %}
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<section id="home">
<div id="home-slider" class="carousel slide carousel-mod" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
{% for Photo in sousServices.photos %}
{% if Photo.categorie =='1' %}
<div class="{% if loop.index==1 %}item active{% else %}item{% endif %}" style="background-image: url('../{{vich_uploader_asset(Photo, 'imageFile') }}')">
<div class="client">
<h1>client: {{Photo.client}}</h1>
</div>
</div>
{% else%}
<div class="{% if loop.index==1 %}item active{% else %}item{% endif %}">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="{{ Photo.lien }}" allowfullscreen></iframe>
</div>
<div class="client">
<h1>client: {{Photo.client}}</h1>
</div>
</div>
{% endif %}
{% endfor %}
<a class="left-control" href="#home-slider" data-slide="prev"><i class="fa fa-angle-left"></i></a>
<a class="right-control" href="#home-slider" data-slide="next"><i class="fa fa-angle-right"></i></a>
<ol class="carousel-indicators">
{% for Photo in sousServices.photos %}
<li {% if loop.index0==0 %}class="active"{% else %}{% endif %}data-target="#home-slider" data-slide-to="{{loop.index0}}"></li>
{% endfor %}
</ol>
</div>
</div>
</section>
</header>
<section class="section-wrapper" id="about">
<div class="row">
<div class="container">
<div class="wrapper-plus">
{% for SousService in services %}
<div class="col-lg-3 col-md-3">
<div class="plus">
<div class="plus-holder wow flipInY" data-wow-duration="1s" data-wow-delay="300ms">
<a href="{{ path('photo', {'name':SousService.name}) }}">
<div class="plus-image">
<img src="../images/description/drone.png" alt=""/>
<div class="plus-overlay">
<div class="img-overlay"></div>
</div>
</div>
</a>
<div class="plus-meta">
<h4 class="plus-name">Voir aussi nos</h4>
<div class="plus-role">{{SousService.name}}</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</section>
<div class="bottom-footer">
<div class="container">
<div class="bottom-footer-center wow fadeInDown" data-wow-duration="1s" data-wow-delay="300ms">
<ul class="bottom-social-icons">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-mobile-phone"></i></a></li>
</ul>
</div>
<div class="bottom-footer-left wow fadeInUp" data-wow-duration="1s" data-wow-delay="450ms">
<p><span>© Fait par</span> <a href="https://www.andsolutions.it">Magikom</a></p>
</div>
</div>
</div>
<a href="#" class="scroll-up"><i class="fa fa-arrow-up"></i></a>
{% endblock %}voici mon portfolio.html.twig
<div class="portfolio-wrap">
<div class="myport wow fadeInDown" data-wow-duration="1s" data-wow-delay="600ms">
{% for Photo in photos %}
<div class="mix category-{{ Photo.categorie }} portfolio" data-cat="{{ Photo.categorie }}" data-myorder="{{loop.index}}">
<div class="img-holder">
<a href="{{ path('photo', {'name':Photo.service.name}) }}">
{% if (Photo.categorie=='1') %}
<img src="{{vich_uploader_asset(Photo, 'imageFile')| imagine_filter('thumb') }}">
{% else %}
<div class="resp-container">
<iframe class="resp-iframe" src="{{ Photo.lien }}"></iframe>
</div>
{% endif %}
<div class="works-overlay">
<div class="img-overlay"></div>
</div>
<div class="overlay-content">
<div class="works-overlay-category"></div>
<div class="works-overlay-text">{% if (Photo.categorie=='1') %}IMAGE{% elseif (Photo.categorie=='2') %}VIDEO{% else %}PROJET{% endif %}</div>
<div class="works-overlay-icon"><i class="{% if (Photo.categorie=='1') %}fa fa-image{% elseif (Photo.categorie=='2') %}fa fa-video-camera{% else %}fa fa-graduation-cap{% endif %}"></i></div>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</div>En faite,je veux que quand l'on appuie sur une image du portfolio,celui-ci s'ouvre en item active dans la page gallerie.html.twig
Pour l'instant l'item active est toujours la première image dans mon entité Photo,Je ne sais pas comment recuperer le rand de laphoto et ensuite la mettre dans l'item active
Je vous remercie pour votre aide.