templates/pages/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/front/base.html.twig' %}
  3. {% block title %}{{ parametres.structure.name ?? company_name }} | {{ title }}{% endblock %}
  4. {% block stylesheets %}
  5.     <link rel="stylesheet" href="{{ asset('assetics/assets/lib/Magnific-Popup-master/dist/magnific-popup.css') }}">
  6.     <style>
  7.         .card{
  8.             margin-bottom: 20px!important;
  9.         }
  10.         .card h5 button{
  11.             font-size: 18px!important;outline: none!important;
  12.         }
  13.     </style>
  14. {% endblock %}
  15. {% block body %}
  16.     {% set host = '' %}
  17.     {% if app.environment == 'prod' %}
  18.         {% set host = 'https://akwabacheznous.com/cit/site/public' %}
  19.     {% else %}
  20.         {% set host = 'http://127.0.0.1:8000' %}
  21.     {% endif %}
  22.     <div class="container">
  23.         {% include 'flash/__flash.html.twig' %}
  24.     </div>
  25.     {% if get_pub(pub_large) %}
  26.         {% set pub = get_pub(pub_large)[0] %}
  27.         <div class="container" style="margin-top: 30px!important;">
  28.             <div class="large-pub" style="width: 100%; height: 150px; background: #fff; display: flex; flex-direction: row; justify-content: center; align-items: center">
  29.                 <a href="{{ pub.link }}">
  30.                     {% if pub.filename %}
  31.                         <img src="{{ vich_uploader_asset(pub, 'imageFile') | imagine_filter('pub_large') }}" alt="{{ pub.name }}">
  32.                     {% else %}
  33.                         <img src="{{ asset('assetics/assets/images/empty-large-pub.png') }}" alt="{{ pub.name }}">
  34.                     {% endif %}
  35.                 </a>
  36.             </div>
  37.         </div>
  38.     {% endif %}
  40.     <section id="col-3-tours">
  41.         <div class="container">
  42.             <div class="trending-tour__tittle">
  43.                 <!-- section tittle -->
  44.                 <div class="section-tittle">
  45.                     <h2>{{ parametres.structure.incontournableTextFond }}</h2>
  46.                     <div class="section-tittle__line-under"></div>
  47.                     <p><span>{{ parametres.structure.incontournableTextTitle }}</span></p>
  48.                 </div>
  49.                 <p style="margin-top: 20px;">{{ parametres.structure.incontournableTextContent }}</p>
  50.             </div>
  51.             <div class="row">
  52.                 {% include 'pages/home/partials/__incontournable_card.html.twig' with {articles: articles} %}
  53.                 <div class="col-md-12">
  54.                     <a href="{{ path('articles.incontournables') }}" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> Voir plus de sites incontournables</a>
  55.                 </div>
  56.             </div>
  57.         </div>
  58.     </section>
  60.     <section id="popular-destination" style="margin-bottom: 50px; background-image: url({{ asset('assetics/internes/images/worldBrg2.png') }}); background-size: cover; background-position: center top">
  61.         <div class="wand-container">
  62.             <div class="popular-destination__tittle">
  63.                 <!-- section tittle -->
  65.                 <div class="section-tittle">
  66.                     <h2>AKWABA</h2>
  67.                     <div class="section-tittle__line-under"></div>
  68.                     <p><span>Bons plans</span></p>
  69.                 </div>
  70.             </div>
  71.         </div>
  72.         <div class=" wand-container">
  73.             <div class="destination-mansory-layout">
  74.                 {{ get_title(1, 'destination-mansory-layout__item--ver-1') }}
  75.                 {#<a href="https://akwabacheznous.com/cit/site/public/visiter/circuits-touristiques/4" class="destination-mansory-layout__item destination-mansory-layout__item--ver-1">
  76.                     <img src="{{ asset('assetics/internes/images/uploads/destination/mansory1.jpg') }}" alt="mansory1">
  77.                     <div class="destination-mansory-layout__item__tour-info">
  78.                         <div class="destination-mansory-layout__item__tour-info__line"></div>
  79.                         <p>Circuits touristique</p>
  80.                         <span>(4 Tours)</span>
  81.                     </div>
  82.                 </a>#}
  83.                 {{ get_title(2, 'destination-mansory-layout__item--nor-1') }}
  84.                 {#<a href="{{ path('ci.pages.deplacements') }}" class="destination-mansory-layout__item destination-mansory-layout__item--nor-1">
  85.                     <img src="{{ asset('assetics/internes/images/bonplans/deplacement.jpg') }}" alt="Déplacement">
  86.                     <div class="destination-mansory-layout__item__tour-info">
  87.                         <div class="destination-mansory-layout__item__tour-info__line"></div>
  88.                         <p>Déplacements</p>
  89.                         <span>(Transports)</span>
  90.                     </div>
  91.                 </a>#}
  92.                 {{ get_title(3, 'destination-mansory-layout__item--hor-1') }}
  93.                 {#<a href="{{ path('ci.pages.hebergements') }}" class="destination-mansory-layout__item destination-mansory-layout__item--hor-1">
  94.                     <img src="{{ asset('assetics/internes/images/bonplans/hotel.jpg') }}" alt="Trouver un hébergement">
  95.                     <div class="destination-mansory-layout__item__tour-info">
  96.                         <div class="destination-mansory-layout__item__tour-info__line"></div>
  97.                         <p>Trouver un hébergement</p>
  98.                         <span>(où sejourner)</span>
  99.                     </div>
  100.                 </a>#}
  101.                 {{ get_title(4, 'destination-mansory-layout__item--ver-2') }}
  102.                 {#<a href="https://akwabacheznous.com/cit/site/public/sejourner/shopping/18" class="destination-mansory-layout__item destination-mansory-layout__item--ver-2">
  103.                     <img src="{{ asset('assetics/internes/images/uploads/destination/mansory6.jpg') }}" alt="mansory6">
  104.                     <div class="destination-mansory-layout__item__tour-info">
  105.                         <div class="destination-mansory-layout__item__tour-info__line"></div>
  106.                         <p>Shopping</p>
  107.                         <span>(Faites vos achats)</span>
  108.                     </div>
  109.                 </a>#}
  110.                 {{ get_title(5, 'destination-mansory-layout__item--hor-2') }}
  111.                 {#<a href="https://akwabacheznous.com/cit/site/public/sejourner/restaurants/7" class="destination-mansory-layout__item destination-mansory-layout__item--hor-2">
  112.                     <img src="{{ asset('assetics/internes/images/bonplans/restaurant.jpg') }}" alt="Trouver un restaurant">
  113.                     <div class="destination-mansory-layout__item__tour-info">
  114.                         <div class="destination-mansory-layout__item__tour-info__line"></div>
  115.                         <p>Trouver un restaurant</p>
  116.                         <span>(Des spécialités de tous genres)</span>
  117.                     </div>
  118.                 </a>#}
  119.                 {{ get_title(6, 'destination-mansory-layout__item--nor-2') }}
  120.                 {#<a href="https://akwabacheznous.com/cit/site/public/sejourner/manifestations-et-spectacles/3" class="destination-mansory-layout__item destination-mansory-layout__item--nor-2">
  121.                     <img src="{{ asset('assetics/internes/images/bonplans/events.jpg') }}" alt="Events">
  122.                     <div class="destination-mansory-layout__item__tour-info">
  123.                         <div class="destination-mansory-layout__item__tour-info__line"></div>
  124.                         <p>Events</p>
  125.                         <span>(Evenements à voir)</span>
  126.                     </div>
  127.                 </a>#}
  128.             </div>
  129.         </div>
  131.     </section>
  133.     <div class="container">
  134.         <div class="row" style="margin-top: 30px!important;margin-bottom: 30px!important;">
  135.             <div class="col-md-6">
  136.                 <div class="top-desti__tittle">
  137.                     <!-- section tittle -->
  138.                     <div class="section-tittle">
  139.                         <h2>Côte d’Ivoire</h2>
  140.                         <div class="section-tittle__line-under"></div>
  141.                         <p>Nos <span>Brochures</span></p>
  142.                     </div>
  143.                 </div>
  144.             </div>
  145.             <div class="col-md-6">
  146.                 <div class="top-desti__tittle text-right">
  147.                     <!-- section tittle -->
  148.                     <div class="section-tittle pull-right">
  149.                         <h2>Côte d’Ivoire</h2>
  150.                         <div class="section-tittle__line-under"></div>
  151.                         <p class="text-right">En <span>Images</span></p>
  152.                     </div>
  153.                 </div>
  154.             </div>
  155.         </div>
  156.         <div class="row">
  157.             <script src="{{ asset('assetics/assets/js/jquery-3.3.1.min.js') }}"></script>
  158.             <script src="{{ asset('assetics/thematiques/js/bootstrap.bundle.js') }}"></script>
  159.             <script>
  160.                 $(document).ready(function () {
  161.                     $('.carousel').carousel({
  162.                         interval: 2000
  163.                     })
  164.                 })
  165.             </script>
  166.             <div class="col-md-4">
  167.                 <div id="carouselBrochure" class="carousel slide" data-ride="carousel">
  168.                     <ol class="carousel-indicators">
  169.                         <li data-target="#carouselBrochure" data-slide-to="0" class="active"></li>
  170.                         <li data-target="#carouselBrochure" data-slide-to="1" class=""></li>
  171.                         <li data-target="#carouselBrochure" data-slide-to="2" class=""></li>
  172.                     </ol>
  173.                     <div class="carousel-inner">
  174.                         {% for index, brochure in brochures %}
  175.                             <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
  176.                                 {% if brochure.filename %}
  177.                                     <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" src="{{ vich_uploader_asset(brochure, 'imageFile') | imagine_filter('medium') }}" alt="{{ brochure.name }}" data-holder-rendered="true">
  178.                                 {% else %}
  179.                                     <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" src="{{ asset('assetics/internes/images/empty.jpg') }}" alt="{{ brochure.name }}" data-holder-rendered="true">
  180.                                 {% endif %}
  181.                                 <div class="carousel-caption d-none d-md-block" style="background-color: rgba(0,0,0, 0.5)">
  182.                                     <h5>
  183.                                         <a style="font-size: 30px!important;color: #fff!important;text-shadow: 0 0 5px #000!important;" href="{{ path('brochures.show', {'id': brochure.id, 'slug': brochure.slug}) }}">
  184.                                             {{ brochure.name }}
  185.                                         </a>
  186.                                     </h5>
  187.                                     <p>Voir plus de détails </p>
  188.                                 </div>
  189.                             </div>
  190.                         {% endfor %}
  191.                     </div>
  192.                     <a class="carousel-control-prev" href="#carouselBrochure" role="button" data-slide="prev">
  193.                         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  194.                         <span class="sr-only">Previous</span>
  195.                     </a>
  196.                     <a class="carousel-control-next" href="#carouselBrochure" role="button" data-slide="next">
  197.                         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  198.                         <span class="sr-only">Next</span>
  199.                     </a>
  200.                 </div>
  201.                 <div class="row" style="margin-top: 20px;">
  202.                     <div class="col-md-12 text-center">
  203.                         <a href="{{ path('brochures.index') }}" class="btn btn-primary"><i class="fa fa-plus"></i> Voir plus de brochure</a>
  204.                         <div class="clearfix"></div>
  205.                     </div>
  206.                 </div>
  207.             </div>
  208.             <div class="col-md-8">
  209.                 <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  210.                     <ol class="carousel-indicators">
  211.                         {% for index, categorieimage in enimages %}
  212.                             <li data-target="#carouselExampleCaptions" data-slide-to="{{ index }}" {% if loop.index == 1 %}class="active"{% endif %}></li>
  213.                         {% endfor %}
  214.                     </ol>
  215.                     <div class="carousel-inner">
  216.                         {% for index, categorieimage in enimages %}
  217.                             <div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
  218.                                 {% if categorieimage.filename %}
  219.                                     <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" src="{{ vich_uploader_asset(categorieimage, 'imageFile') | imagine_filter('medium') }}" alt="{{ categorieimage.name }}" data-holder-rendered="true">
  220.                                 {% else %}
  221.                                     <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" src="{{ asset('assetics/internes/images/empty.jpg') }}" alt="{{ categorieimage.name }}" data-holder-rendered="true">
  222.                                 {% endif %}
  223.                                 <div class="carousel-caption d-none d-md-block" style="background-color: rgba(0,0,0, 0.5)">
  224.                                     <h5>
  225.                                         <a style="font-size: 40px!important;color: #fff!important;text-shadow: 0 0 5px #000!important;" href="{{ path('enimages.show', {'id': categorieimage.id, 'slug': categorieimage.slug}) }}">
  226.                                             {{ categorieimage.name }}
  227.                                         </a>
  228.                                     </h5>
  229.                                     <p style="font-size: 20px!important;color: #fff!important;text-shadow: 0 0 5px #000!important;">{{ pluralize(categorieimage.enimages.count, 'image') }}</p>
  230.                                 </div>
  231.                             </div>
  232.                         {% endfor %}
  233.                     </div>
  234.                     <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
  235.                         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  236.                         <span class="sr-only">Previous</span>
  237.                     </a>
  238.                     <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
  239.                         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  240.                         <span class="sr-only">Next</span>
  241.                     </a>
  242.                 </div>
  243.                 <div class="row" style="margin-top: 20px;">
  244.                     <div class="col-md-12">
  245.                         <a href="{{ path('enimages.index') }}" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> Voir plus d'images</a>
  246.                         <div class="clearfix"></div>
  247.                     </div>
  248.                 </div>
  249.             </div>
  250.         </div>
  251.     </div>
  253.     {#<section style="margin-bottom: 70px;">
  254.         <div class="container" style="margin-bottom: 50px;">
  255.             <div class="row" style="margin-top: 30px!important;margin-bottom: 30px!important;">
  256.                 <div class="col-md-6">
  257.                     <div class="top-desti__tittle">
  258.                         <!-- section tittle -->
  259.                         <div class="section-tittle">
  260.                             <h2>Côte d’Ivoire</h2>
  261.                             <div class="section-tittle__line-under"></div>
  262.                             <p>Nos <span>Brochures</span></p>
  263.                         </div>
  264.                     </div>
  265.                 </div>
  266.                 <div class="col-md-6">
  267.                     <div class="top-desti__tittle text-right">
  268.                         <!-- section tittle -->
  269.                         <div class="section-tittle pull-right">
  270.                             <h2>Côte d’Ivoire</h2>
  271.                             <div class="section-tittle__line-under"></div>
  272.                             <p class="text-right">En <span>Images</span></p>
  273.                         </div>
  274.                     </div>
  275.                 </div>
  276.             </div>
  277.             <div class="deal-tour">
  278.                 <a href="{{ path('brochures.index') }}" class="deal-tour__item deal-tour__item--largest" style="margin-right: 15px!important;">
  279.                     {% if brochure.filename %}
  280.                         <img src="{{ vich_uploader_asset(brochure, 'imageFile') | imagine_filter('medium') }}" alt="{{ brochure.name }}">
  281.                     {% else %}
  282.                         <img src="{{ asset('assetics/internes/images/empty.jpg') }}" alt="{{ brochure.name }}">
  283.                     {% endif %}
  284.                     <div class="deal-tour__item__countdown-sale">
  286.                         <div class="deal-tour__item__info">
  287.                             <span>{{ brochure.name}} </span>
  288.                             <p>Voir plus de brochures <i class="fa fa-angle-double-right"></i> </p>
  289.                         </div>
  290.                     </div>
  291.                 </a>
  293.                 <div class="deal-tour__item--middle">
  294.                     {% for index, categorieimage in enimages %}
  295.                         {% if loop.index == 1 or  loop.index == 2 or loop.index == 3 or loop.index == 4  %}
  296.                             <a href="{{ path('enimages.show', {'id': categorieimage.id, 'slug': categorieimage.slug}) }}" class="deal-tour__item deal-tour__item--small">
  297.                                 {% if categorieimage.filename %}
  298.                                     <img src="{{ vich_uploader_asset(categorieimage, 'imageFile') | imagine_filter('medium') }}" alt="{{ categorieimage.name }}">
  299.                                 {% else %}
  300.                                     <img src="{{ asset('assetics/internes/images/empty.jpg') }}" alt="{{ categorieimage.name }}">
  301.                                 {% endif %}
  302.                                 <div class="deal-tour__item__info">
  303.                                     <span>{{ categorieimage.name }} </span>
  304.                                     <p>{{ categorieimage.enimages|length }} image(s) <i class="fa fa-angle-double-right"></i> </p>
  305.                                 </div>
  306.                             </a>
  307.                         {% endif %}
  308.                     {% endfor %}
  309.                 </div>
  310.                 <div class="deal-tour__item--middle" style="display: flex; flex-direction: column;">
  311.                     {% for index, categorieimage in enimages %}
  312.                         {% if loop.index == 5 or  loop.index == 6  %}
  313.                             <a href="{{ path('enimages.show', {'id': categorieimage.id, 'slug': categorieimage.slug}) }}" class="deal-tour__item deal-tour__item--small deal-tour__item--vertical">
  314.                                 {% if categorieimage.filename %}
  315.                                     <img src="{{ vich_uploader_asset(categorieimage, 'imageFile') | imagine_filter('medium') }}" alt="{{ categorieimage.name }}">
  316.                                 {% else %}
  317.                                     <img src="{{ asset('assetics/internes/images/empty.jpg') }}" alt="{{ categorieimage.name }}">
  318.                                 {% endif %}
  319.                                 <div class="deal-tour__item__info">
  320.                                     <span>{{ categorieimage.name }} </span>
  321.                                     <p>{{ categorieimage.enimages|length }} image(s) <i class="fa fa-angle-double-right"></i> </p>
  322.                                 </div>
  323.                             </a>
  324.                         {% endif %}
  325.                     {% endfor %}
  326.                 </div>
  327.             </div>
  328.             <div class="row" style="margin-top: 20px;">
  329.                 <div class="col-md-12">
  330.                     <a href="{{ path('brochures.index') }}" class="btn btn-primary pull-left"><i class="fa fa-plus"></i> Voir plus de brochure</a>
  331.                     <a href="{{ path('enimages.index') }}" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> Voir plus d'images</a>
  332.                     <div class="clearfix"></div>
  333.                 </div>
  334.             </div>
  335.         </div>
  336.     </section>#}
  338.     {#<section>
  339.         <div class="container">
  340.             <div class="top-desti__tittle">
  341.                 <!-- section tittle -->
  342.                 <div class="section-tittle">
  343.                     <h2>Côte d’Ivoire</h2>
  344.                     <div class="section-tittle__line-under"></div>
  345.                     <p>Côte d’Ivoire : <span>Terre d’hospitalité</span></p>
  346.                 </div>
  347.             </div>
  348.         </div>
  350.         <div class="top-desti" style="margin-top: 50px;">
  351.             <a href="{{ host }}/cote-d-ivoire/histoire-de-la-cote-divoire/1" class="top-desti__item">
  352.                 <img src="{{ asset('assetics/internes/images/uploads/destination/desti1.jpg') }}" alt="desti1">
  353.                 <div class="top-desti__ammout">
  354.                     <span>HISTOIRE</span>
  355.                 </div>
  356.             </a>
  357.             <a href="{{ host }}/cote-d-ivoire/geographie-de-la-cote-divoire/2" class="top-desti__item">
  358.                 <img src="{{ asset('assetics/internes/images/uploads/destination/desti2.jpg') }}" alt="desti1">
  359.                 <div class="top-desti__ammout">
  360.                     <span>GEOGRAPHIE</span>
  361.                 </div>
  362.             </a>
  363.             <a href="{{ host }}/ci/symbole-etat" class="top-desti__item">
  364.                 <img src="{{ asset('assetics/internes/images/symboles/drapeau.jpg') }}" alt="desti1">
  365.                 <div class="top-desti__ammout">
  366.                     <span>SYMBOLE DE L'ETAT</span>
  367.                 </div>
  368.             </a>
  369.             <a href="{{ host }}/ci/institutions/" class="top-desti__item">
  370.                 <img src="{{ asset('assetics/internes/images/uploads/destination/desti4.jpg') }}" alt="desti1">
  371.                 <div class="top-desti__ammout">
  372.                     <span>INSTITUTIONS</span>
  373.                 </div>
  374.             </a>
  375.             <a href="{{ host }}/ci/en-image/" class="top-desti__item">
  376.                 <img src="{{ asset('assetics/internes/images/uploads/destination/desti3.jpg') }}" alt="desti1">
  377.                 <div class="top-desti__ammout">
  378.                     <span>EN IMAGES</span>
  379.                 </div>
  380.             </a>
  381.             <a href="{{ host }}/ci/brochures/" class="top-desti__item">
  382.                 <img src="{{ asset('assetics/internes/images/uploads/destination/desti6.jpg') }}" alt="desti1">
  383.                 <div class="top-desti__ammout">
  384.                     <span>BROCHURES TOURISTIQUES</span>
  385.                 </div>
  386.             </a>
  387.         </div>
  388.     </section>#}
  390.     {% if homevideos.video.enable and homevideos.video.videoUrl %}
  391.         <section>
  392.             <div class="video-popup-1">
  393.                 <div class="video-popup-1__head-Brg"></div>
  394.                 <div class="container">
  395.                     <div class="video-popup-1__tittle">
  396.                         <img src="{{ asset('assetics/internes/images/uploads/video-popup/melbouensnow.png') }}" alt="Home video">
  397.                     </div>
  398.                     <h2>VIDEO PRESENTATION</h2>
  399.                     <div class="video-popup-1__area">
  400.                         <span id="btn-popup"><img src="{{ asset('assetics/internes/images/video-popup/btn-popup.png') }}" alt="button-pop"></span>
  401.                         <div class="video-popup-img">
  402.                             {% if homevideos.video.filename %}
  403.                                 <img src="{{ absolute_url(vich_uploader_asset(homevideos.video, 'imageFile') | imagine_filter('homevideo')) }}" alt="Home video">
  404.                             {% else %}
  405.                                 <img src="{{ absolute_url(asset('assetics/internes/images/uploads/video-popup/imgSnowtour.jpg')) }}" alt="Home video">
  406.                             {% endif %}
  407.                         </div>
  408.                     </div>
  409.                 </div>
  410.             </div>
  412.             <div class="preview-video-1">
  413.                 <div class="preview-video-1__close" ></div>
  414.                 <div class="preview-video-1__area">
  415.                     <span class="preview-video-1__btn-close" >&times;</span>
  416.                     {#<iframe width="560" height="315" src="https://www.youtube.com/embed/wpFcAiqCWnI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>#}
  417.                     <iframe class="preview-video-1__iframe" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" data-src="{{ homevideos.video.videoUrl }}?rel=0&autoplay=1&loop=1"  allowfullscreen></iframe>
  418.                 </div>
  419.             </div>
  421.         </section>
  422.     {% endif %}
  424.     {#<section class="travel-tip-1__area">
  425.         <div class="container">
  426.             <div class="travel-tip-1__tittle">
  427.                 <!-- section tittle -->
  428.                 <div class="section-tittle">
  429.                     <h2>Circuits Touristiques</h2>
  430.                     <div class="section-tittle__line-under"></div>
  431.                     <p>Circuits <span>Touristiques</span></p>
  432.                 </div>
  433.             </div>
  434.             <div class="row">
  435.                 <div class="col-md-6">
  436.                     <div class="travel-tip-1" style="margin-bottom: 0px!important;">
  437.                         <img src="{{ asset('assetics/internes/images/uploads/testi/carteCI.png') }}" alt="travel-tip-1">
  438.                         <span data-rel="location1" class="travel-tip-1__btn travel-tip-1__btn--location1 ">1</span>
  439.                         <span data-rel="location2" class="travel-tip-1__btn travel-tip-1__btn--location2">2</span>
  440.                         <span data-rel="location3" class="travel-tip-1__btn travel-tip-1__btn--location3">3</span>
  441.                         <span data-rel="location4" class="travel-tip-1__btn travel-tip-1__btn--location4">4</span>
  442.                         <span data-rel="location5" class="travel-tip-1__btn travel-tip-1__btn--location5">5</span>
  443.                         <!-- tips -->
  445.                         <a href="javascript:;" class="travel-tip-1__tip travel-tip-1__tip--location1 location1">
  446.                             <h3>15 Things You Need to Know Before You Go!</h3>
  447.                             <span><i class="far fa-calendar-check"></i>July 4, 2019 </span>
  448.                             <span><i class="far fa-user"></i>By Admin</span>
  449.                             <span><i class="far fa-comment-alt"></i>2 commnets</span>
  450.                             <p>Aliquam blandit facilisis purus, eget volutpat ante congue a. Quo neque sapiente libero repellendus eligendi ducimus.</p>
  451.                         </a>
  453.                         <a href="javascript:;" class="travel-tip-1__tip travel-tip-1__tip--location2 location2">
  454.                             <h3>5 Things You Need to Know Before You Go!</h3>
  455.                             <span><i class="far fa-calendar-check"></i>July 4, 2019 </span>
  456.                             <span><i class="far fa-user"></i>By Admin</span>
  457.                             <span><i class="far fa-comment-alt"></i>2 commnets</span>
  458.                             <p>Aliquam blandit facilisis purus, eget volutpat ante congue a. Quo neque sapiente libero repellendus eligendi ducimus.</p>
  459.                         </a>
  461.                         <a href="javascript:;" class="travel-tip-1__tip travel-tip-1__tip--location3 location3">
  462.                             <h3>3 Things You Need to Know Before You Go!</h3>
  463.                             <span><i class="far fa-calendar-check"></i>July 4, 2019 </span>
  464.                             <span><i class="far fa-user"></i>By Admin</span>
  465.                             <span><i class="far fa-comment-alt"></i>3 commnets</span>
  466.                             <p>Aliquam blandit facilisis purus, eget volutpat ante congue a. Quo neque sapiente libero repellendus eligendi ducimus.</p>
  467.                         </a>
  469.                         <a href="javascript:;" class="travel-tip-1__tip travel-tip-1__tip--location4 location4">
  470.                             <h3>1 Things You Need to Know Before You Go!</h3>
  471.                             <span><i class="far fa-calendar-check"></i>July 4, 2019 </span>
  472.                             <span><i class="far fa-user"></i>By Admin</span>
  473.                             <span><i class="far fa-comment-alt"></i>4 commnets</span>
  474.                             <p>Aliquam blandit facilisis purus, eget volutpat ante congue a. Quo neque sapiente libero repellendus eligendi ducimus.</p>
  475.                         </a>
  477.                         <a href="javascript:;" class="travel-tip-1__tip travel-tip-1__tip--location5 location5">
  478.                             <h3>25 Things You Need to Know Before You Go!</h3>
  479.                             <span><i class="far fa-calendar-check"></i>July 4, 2019 </span>
  480.                             <span><i class="far fa-user"></i>By Admin</span>
  481.                             <span><i class="far fa-comment-alt"></i>5 commnets</span>
  482.                             <p>Aliquam blandit facilisis purus, eget volutpat ante congue a. Quo neque sapiente libero repellendus eligendi ducimus.</p>
  483.                         </a>
  484.                     </div>
  485.                 </div>
  486.                 <div class="col-md-6">
  487.                     <div class="travel-tip-1">
  488.                         <div id="accordion">
  489.                             <div class="card">
  490.                                 <div class="card-header" id="headingOne">
  491.                                     <h5 class="mb-0">
  492.                                         <button style="font-size: 13px!important;" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  493.                                             <i class="fa fa-chevron-down"></i> 1 - Things You Need to Know Before You Go!
  494.                                         </button>
  495.                                     </h5>
  496.                                 </div>
  498.                                 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
  499.                                     <div class="card-body">
  500.                                         <div>Aliquam blandit facilisis purus, eget volutpat ante congue a. Quo neque sapiente libero repellendus eligendi ducimus.</div>
  501.                                     </div>
  502.                                 </div>
  503.                             </div>
  504.                             <div class="card">
  505.                                 <div class="card-header" id="headingTwo">
  506.                                     <h5 class="mb-0">
  507.                                         <button style="font-size: 13px!important;" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
  508.                                             <i class="fa fa-chevron-down"></i> 2 - Things You Need to Know Before You Go!
  509.                                         </button>
  510.                                     </h5>
  511.                                 </div>
  513.                                 <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
  514.                                     <div class="card-body">
  515.                                         <div>Aliquam blandit facilisis purus, eget volutpat ante congue a. Quo neque sapiente libero repellendus eligendi ducimus.</div>
  516.                                     </div>
  517.                                 </div>
  518.                             </div>
  519.                             <div class="card">
  520.                                 <div class="card-header" id="headingThree">
  521.                                     <h5 class="mb-0">
  522.                                         <button style="font-size: 13px!important;" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
  523.                                             <i class="fa fa-chevron-down"></i> 3 - Things You Need to Know Before You Go!
  524.                                         </button>
  525.                                     </h5>
  526.                                 </div>
  528.                                 <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
  529.                                     <div class="card-body">
  530.                                         <div>Aliquam blandit facilisis purus, eget volutpat ante congue a. Quo neque sapiente libero repellendus eligendi ducimus.</div>
  531.                                     </div>
  532.                                 </div>
  533.                             </div>
  534.                             <div class="card">
  535.                                 <div class="card-header" id="headingFour">
  536.                                     <h5 class="mb-0">
  537.                                         <button style="font-size: 13px!important;" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
  538.                                             <i class="fa fa-chevron-down"></i> 4 - Things You Need to Know Before You Go!
  539.                                         </button>
  540.                                     </h5>
  541.                                 </div>
  543.                                 <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
  544.                                     <div class="card-body">
  545.                                         <div>Aliquam blandit facilisis purus, eget volutpat ante congue a. Quo neque sapiente libero repellendus eligendi ducimus.</div>
  546.                                     </div>
  547.                                 </div>
  548.                             </div>
  549.                             <div class="card">
  550.                                 <div class="card-header" id="headingFive">
  551.                                     <h5 class="mb-0">
  552.                                         <button style="font-size: 13px!important;" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
  553.                                             <i class="fa fa-chevron-down"></i> 5 - Things You Need to Know Before You Go
  554.                                         </button>
  555.                                     </h5>
  556.                                 </div>
  558.                                 <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion">
  559.                                     <div class="card-body">
  560.                                         <div>Aliquam blandit facilisis purus, eget volutpat ante congue a. Quo neque sapiente libero repellendus eligendi ducimus.</div>
  561.                                     </div>
  562.                                 </div>
  563.                             </div>
  564.                         </div>
  565.                     </div>
  566.                 </div>
  567.             </div>
  568.         </div>
  569.     </section>#}
  571.     {% if actualites|length != 0 %}
  572.     <section>
  573.         <div class="container">
  574.             <div class="travel-tip-2__tittle" style="margin: 30px 0 25px;">
  575.                 <!-- section tittle -->
  576.                 <div class="section-tittle">
  577.                     <h2>Actualités touristiques</h2>
  578.                     <div class="section-tittle__line-under"></div>
  579.                     <p>Dernières  <span>Nouvelles</span></p>
  580.                 </div>
  581.             </div>
  582.             <div class="travel-tip-2">
  583.                 {% for actualite in actualites %}
  584.                 <div class="travel-tip-2__item">
  585.                     {% if actualite.filename %}
  586.                         <img class="travel-tip-2__thumb" src="{{ vich_uploader_asset(actualite, 'imageFile') | imagine_filter('medium670X500') }}" alt="{{ actualite.name }}">
  587.                     {% else %}
  588.                         <img src="{{ asset('assetics/internes/images/empty.jpg') }}" alt="{{ actualite.name }}">
  589.                     {% endif %}
  590.                     <div class="col-lg-6">
  591.                         <a href="{{ path('cit.actualites.show', {'id': actualite.id, 'slug': actualite.slug}) }}" class="travel-tip-2__item__info">
  592.                             <h3>{{ actualite.name }}</h3>
  593.                             {#{% set published =  actualite.published|split(' ') %}
  594.                             <span><i class="far fa-calendar-check"></i> {{ published[0] }}, {{ published[1] }} {{ published[2] }} </span>#}
  595.                             <span><i class="far fa-calendar-check"></i> {{ actualite.published ?? (actualite.createdAt|date('d/m/Y'))}} </span>
  596.                             <span><i class="far fa-comment-alt"></i>2 commnets</span>
  597.                             <p>{{ actualite.description }}</p>
  598.                         </a>
  599.                     </div>
  601.                 </div>
  602.                 {% endfor %}
  603.             </div>
  604.         </div>
  605.     </section>
  606.     {% endif %}
  608.     <div class="scroll-top">
  609.         <i class="fas fa-angle-up"></i>
  610.     </div>
  612.     <section>
  613.         <h2 class="instagram__tittle">instagram</h2>
  614.         <div class="instagram">
  615.             <a href="javascript:" class="instagram__item">
  616.                 <img src="{{ asset('assetics/internes/images/uploads/testi/instagram1.jpg') }}" alt="instagram1">
  617.             </a>
  618.             <a href="javascript:" class="instagram__item">
  619.                 <img src="{{ asset('assetics/internes/images/uploads/testi/instagram2.jpg') }}" alt="instagram2">
  620.             </a>
  621.             <a href="javascript:" class="instagram__item">
  622.                 <img src="{{ asset('assetics/internes/images/uploads/testi/instagram3.jpg') }}" alt="instagram3">
  623.             </a>
  624.             <a href="javascript:" class="instagram__item">
  625.                 <img src="{{ asset('assetics/internes/images/uploads/testi/instagram4.jpg') }}" alt="instagram4">
  626.             </a>
  627.             <a href="javascript:" class="instagram__item">
  628.                 <img src="{{ asset('assetics/internes/images/uploads/testi/instagram5.jpg') }}" alt="instagram5">
  629.             </a>
  630.             <a href="javascript:" class="instagram__item">
  631.                 <img src="{{ asset('assetics/internes/images/uploads/testi/instagram6.jpg') }}" alt="instagram6">
  632.             </a>
  633.         </div>
  634.     </section>
  636.     {% if parametres.structure.enablePopup %}
  637.         {% if parametres.structure.filenamepopup and parametres.structure.typePopup == 0 %}
  638.             {% set image = absolute_url(vich_uploader_asset(parametres.structure, 'imagePopupFile') | imagine_filter('popupimage')) %}
  639.             {% set typeimage = 'image' %}
  640.             {% set delegate = 'a' %}
  641.         {% elseif (parametres.structure.videoPopup and parametres.structure.typePopup == 1) %}
  642.             {% set image = parametres.structure.videoPopup~'?autoplay=1' %}
  643.             {% set typeimage = 'iframe' %}
  644.             {% set delegate = '' %}
  645.         {% endif %}
  647.         <script src="{{ asset('assetics/assets/js/jquery-3.3.1.min.js') }}"></script>
  648.         <script src="{{ asset('assetics/assets/lib/Magnific-Popup-master/dist/jquery.magnific-popup.min.js') }}"></script>
  649.         <script>
  650.             $(document).ready(function () {
  651.                 setTimeout(function() {
  652.                     if ($('.btn').length) {
  653.                         $.magnificPopup.open({
  654.                             items: {
  655.                                 src: '{{ image }}'
  656.                             },
  657.                             delegate: '{{ delegate }}',
  658.                             type: '{{ typeimage }}'
  659.                         });
  660.                     }
  661.                 }, 1000);
  662.             });
  663.         </script>
  664.     {% endif %}
  666. {% endblock %}
  667. {% block javascripts %}
  668.     <script>
  669.         $(document).ready(function () {
  670.             $('.collapse').collapse()
  671.         })
  672.     </script>
  673. {% endblock %}