templates/front/hunt/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ offer.title }}{% endblock %}
  4. {% block meta %}
  5.     <meta name="description" content="{{ offer.unfoldsDay }}">
  6. {% endblock %}
  8. {% block bodyClass %}{{ offer.type }}{% endblock %}
  10. {% block body %}
  11.     <div class="return"><a href="javascript:history.back();"> Retour </a></div>
  13.     {% for message in app.flashes('error') %}
  14.         <div class="alert alert-danger">
  15.             {{ message }}
  16.         </div>
  17.     {% endfor %}
  19.     <div class="offer-show">
  20.         {% set territory = offer.getTerritory() %}
  21.         {% if offer.images|length == 0 %}
  22.             {% set imagesLength = territory.images|length %}
  23.         {% else %}
  24.             {% set imagesLength = offer.images|length %}
  25.         {% endif %}
  26.         <div class="alg">
  27.             <div class=" images offer-mobile-image {% if imagesLength == 0 %} i_one {% elseif imagesLength == 1 %} i_two  {% else %}  i_three {% endif %}"
  28.                  {% if imagesLength == 1 %}style="grid-template-columns:100%"
  29.                  {% elseif imagesLength == 2 %}style="grid-template-columns:50% 50%"
  30.                  {% else %}style="grid-template-columns:40% repeat({{ imagesLength }},30%)"{% endif %}>
  31.                 {% if offer.getImages()|length == 0 %}
  32.                     {% if territory and territory.images and territory.images|length > 0 %}
  33.                         {% for image in territory.images %}
  34.                             <a class="single_image" data-fancybox="gallery" href="{{ asset('upload/'~image) }}"><img
  35.                                         src="{{ asset('upload/'~image) }}" alt="{{ offer.title }}"></a>
  36.                         {% endfor %}
  37.                     {% else %}
  38.                         <a class="single_image" data-fancybox="gallery"
  39.                            href="{{ asset('build/images/default.png') }}"><img class="full-width"
  40.                                                                                      src="{{ asset('build/images/default.png') }}"
  41.                                                                                      alt="{{ offer.title }}"></a>
  42.                     {% endif %}
  43.                 {% elseif offer.getImages()|length == 1 %}
  44.                     <a class="single_image" data-fancybox="gallery"
  45.                        href="{{ asset('upload/'~offer.getImages()[0]) }}"><img class="full-width"
  46.                                                                                src="{{ asset('upload/'~offer.getImages()[0]) }}"
  47.                                                                                alt="{{ offer.title }}"></a>
  48.                 {% else %}
  49.                     {% for image in offer.getImages() %}
  50.                         <a class="single_image" data-fancybox="gallery" href="{{ asset('upload/'~image) }}"><img
  51.                                     src="{{ asset('upload/'~image) }}" alt="{{ offer.title }}"></a>
  52.                     {% endfor %}
  53.                 {% endif %}
  54.             </div>
  55.             <div class=" images offer-pc-image {% if imagesLength == 0 %} i_one {% elseif imagesLength == 1 %} i_two  {% else %}  i_three {% endif %}"
  56.                  {% if imagesLength == 1 %}style="grid-template-columns:100%"
  57.                  {% elseif imagesLength == 2 %}style="grid-template-columns:50% 50%"
  58.                  {% else %}style="grid-template-columns:40% repeat({{ imagesLength }},30%)"{% endif %}>
  59.                 {% if offer.getImages()|length == 0 %}
  60.                     {% if territory and territory.images and territory.images|length > 0 %}
  61.                         {% for image in territory.images %}
  62.                             <a class="single_image" data-fancybox="gallery" href="{{ asset('upload/'~image) }}"><img
  63.                                         src="{{ asset('upload/'~image) }}" alt="{{ offer.title }}"></a>
  64.                         {% endfor %}
  65.                     {% else %}
  66.                         <a class="single_image" data-fancybox="gallery"
  67.                            href="{{ asset('build/images/default.png') }}"><img class="full-width"
  68.                                                                                src="{{ asset('build/images/default.png') }}"
  69.                                                                                alt="{{ offer.title }}"></a>
  70.                     {% endif %}
  71.                 {% elseif offer.getImages()|length == 1 %}
  72.                     <a class="single_image" data-fancybox="gallery"
  73.                        href="{{ asset('upload/'~offer.getImages()[0]) }}"><img class="full-width"
  74.                                                                                src="{{ asset('upload/'~offer.getImages()[0]) }}"
  75.                                                                                alt="{{ offer.title }}"></a>
  76.                 {% else %}
  77.                     {% if offer.getImages()|length >= 4 %}
  78.                         {% for image in offer.getImages() %}
  79.                             {% if loop.index0 < 2 %}
  80.                                 <a class="single_image" data-fancybox="gallery" href="{{ asset('upload/'~image) }}"><img
  81.                                             src="{{ asset('upload/'~image) }}" alt="{{ offer.title }}"></a>
  82.                             {% elseif loop.index >= 2 %}
  83.                                 {% if loop.index0 == 2 %}<div style="height: 530px;" class="four-images-container">{% endif %}
  84.                                 <a class="single_image" data-fancybox="gallery" href="{{ asset('upload/'~image) }}"><img
  85.                                             src="{{ asset('upload/'~image) }}" alt="{{ offer.title }}" style="height: 50%;width:100%"></a>
  86.                                 {% if loop.index0 == 4 %}</div>{% endif %}
  87.                             {% endif %}
  88.                         {% endfor %}
  89.                     {% else %}
  90.                         {% for image in offer.getImages() %}
  91.                             <a class="single_image" data-fancybox="gallery" href="{{ asset('upload/'~image) }}"><img
  92.                                         src="{{ asset('upload/'~image) }}" alt="{{ offer.title }}"></a>
  93.                         {% endfor %}
  94.                     {% endif %}
  95.                 {% endif %}
  96.             </div>
  97.             {% if imagesLength == 0 %}
  98.                 {% set imagesLength = 1 %}
  99.             {% endif %}
  100.             <span class="nb_images"> {{ imagesLength }} / {{ imagesLength }} <span
  101.                         class="a_mob"> photos </span> </span>
  102.             <a href="javascript:history.back();" class="back-show">
  103.                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  104.                     <path data-name=""
  105.                           d="M233.218 162.145h-11.907l4.936 4.936a1.014 1.014 0 1 1-1.434 1.434l-6.671-6.671a1.007 1.007 0 0 1 0-1.434l6.671-6.671a1.014 1.014 0 1 1 1.434 1.434l-4.936 4.97h11.907a1 1 0 0 1 0 2z"
  106.                           transform="translate(-213.866 -149.485)" style="fill:#172a3b;fill-rule:evenodd"></path>
  107.                 </svg>
  108.             </a>
  109.         </div>
  110.         <div class="body">
  111.             {% if offer.type == 'br' %}
  112.                 {{ include('front/hunt/bracelet.html.twig') }}
  113.             {% endif %}
  114.             {% if offer.type == 'ac' %}
  115.                 {{ include('front/hunt/action.html.twig') }}
  116.             {% endif %}
  117.             {% if offer.type == 'jr' %}
  118.                 {{ include('front/hunt/journey.html.twig') }}
  119.             {% endif %}
  120.         </div>
  121.     </div>
  122.     {% if similarOffers|length > 0 %}
  123.           <div class="similar-offers">
  124.               <div>
  125.                   <ul class="carousel_slides">
  126.                       {% for similar in  similarOffers %}
  127.                           {% set offer = similar[0] %}
  128.                           <li>
  129.                               {{ include('front/hunt/offer_bloc.html.twig') }}
  130.                           </li>
  131.                       {% endfor %}
  132.                   </ul>
  133.                   <h2>Les offres aux alentours</h2>
  134.               </div>
  135.         </div>
  136.     {% endif %}
  137.     <div class="modal fade custom-modal-login in modal-more-info" id="modal-biotope" tabindex="-1" role="dialog">
  138.         <div class="modal-dialog clearfix" role="document">
  139.             <div class="modal-content">
  140.                 <div class="modal-header">
  141.                     <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
  142.                                 aria-hidden="true">×</span>
  143.                     </button>
  144.                     <span class="modal-title"><icon><img src="{{ asset('assets/img/forest.png') }}"></icon>Biotope <br></span>
  145.                 </div>
  146.                 <div class="modal-body">
  147.                     <span> <b> BIOTOPE </b> </span><br>
  148.                     <span>{% for biotope in territory.biotope %}{{ biotope }}{% if not loop.last %}, {% endif %}{% endfor %}</span>
  149.                     <br> <br>
  150.                     <span style="text-transform:uppercase;"> <b> informations supplémentaires </b> </span> <br>
  151.                     {{ territory.biotopeText }}
  152.                 </div>
  153.             </div>
  154.         </div>
  155.     </div>
  156. {% endblock %}
  158. {% block javascripts %}
  159.     {{ parent() }}
  160.     <script type="text/javascript">
  161.         initMap();
  163.         function initMap() {
  164.             {% if offer.territory.longitude is not null %}{% set lng = offer.territory.longitude %}{% else %}{% set lng = -0.594 %}{% endif %}
  165.             {% if offer.territory.latitude is not null %}{% set lat = offer.territory.latitude %}{% else %}{% set lat = 44.837789 %}{% endif %}
  166.             var longitude = '{{ lng }}';
  167.             var latitude = '{{ lat }}';
  168.             var map = new google.maps.Map(document.getElementById('map_details'), {
  169.                 zoom: 11,
  170.                 center: {lat: parseFloat(latitude), lng: parseFloat(longitude)},
  171.                 zoomControl: true,
  172.                 scaleControl: false,
  173.                 mapTypeControl: false
  174.             });
  175.             const cityCircle = new google.maps.Circle({
  176.                 strokeColor: "#1db3a3",
  177.                 strokeOpacity: 1,
  178.                 strokeWeight: 2,
  179.                 fillColor: "#1db3a3",
  180.                 fillOpacity: 0.65,
  181.                 map,
  182.                 center: {lat: parseFloat(latitude), lng: parseFloat(longitude)},
  183.                 radius: 5 * 1000,
  184.             });
  185.         }
  186.     </script>
  187. {% endblock %}