templates/masjid/show.html.twig line 250

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block headplus %}
  3.      {% block meta_description %}
  4.     <meta name="description" content="{{masjid.translate(app.request.locale).getName() }}" />
  5.     {% endblock %} 
  7.     <meta name="keywords" content="{{masjid.translate(app.request.locale).getName() }}" />
  8.      <!-- Open Graph / Facebook -->
  9.     <meta property="og:type"   content="article" /> 
  10.     <meta property="og:url"    content="{{absolute_url(path('masjid_show',{'slug':masjid.slug}))}}" /> 
  11.     <meta property="og:title"  content="{{masjid.translate(app.request.locale).getName() }}" /> 
  12.     <meta property="og:description"   content="sharjah-masjids.com - {{masjid.translate(app.request.locale).getName() }} " />
  13.     <meta property="og:locale"  content="{{app.request.locale}}" /> 
  14.     <meta property="og:site_name"  content="https://sharjah-masjids.com/" /> 
  15.     <meta property="og:image"  content="{{absolute_url(asset(masjid.MainPic|imagine_filter('sharer')))}}" /> 
  17.     <!-- Twitter -->
  18.     <meta property="twitter:card" content="summary_large_image">
  19.     <meta property="twitter:url" content="{{absolute_url(path('masjid_show',{'slug':masjid.slug}))}}">
  20.     <meta property="twitter:title" content="{{masjid.translate(app.request.locale).getName() }}">
  21.     <meta property="twitter:description" content="sharjah-masjids.com - {{masjid.translate(app.request.locale).getName() }} ">
  22.     <meta property="twitter:image" content="{{absolute_url(asset(masjid.MainPic|imagine_filter('sharer')))}}">
  24. {% endblock %}
  25. {% trans_default_domain 'messages' %}
  26. {% set page = "masjid" %}
  28. {% block stylesheets %}
  29.     {{ parent() }}
  31.     <style type="text/css">
  32.         .slick-list, .slick-slider {
  33.             text-align: center;
  34.         }
  35.     </style>
  36.     <link href="{{asset('css/sidebar-widget.css')}}" rel="stylesheet">
  37.     <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0-beta.1/leaflet.min.css" />
  38. {% endblock %}
  40. {% block title %}{{masjid.translations[app.request.locale].name}}{% endblock %}
  42. {% block body %}
  43.     <!--KODE SAB BANNER WRAP START-->
  44.     <div class="kode_sab_banner_wrap them_overlay">
  45.         <!--CONTAINER START-->
  46.         <div class="container">
  47.             <div class="sab_banner_text">
  48.                 <h1>{{ masjid.translate(app.request.locale).getName() }}</h1>
  49.                 <ul class="breadcrumbs">
  50.                     <li><a href="{{ path('app_front_main_index') }}"><i class="fa fa-home"></i></a></li>
  51.                     <li><a href="{{ path('masjid_index') }}">{{ "masjid.masjids"|trans }}</a></li>
  52.                     <li><strong>{{ masjid.translate(app.request.locale).getName() }}</strong></li>
  53.                 </ul>
  54.             </div>
  55.         </div>
  56.         <!--CONTAINER END-->
  57.     </div>
  58.     <!--KODE SAB BANNER WRAP END-->
  60.     <!--KODE BLOG MADIUM WRAP START-->
  61.     <div class="kode_blog_madium_wrap detail padding">
  62.         <!--CONTAINER START-->
  63.         <div class="container">
  64.             <div class="row">
  65.                 <div class="col-md-8">
  66.                     <!--KODE BLOG DETAIL ROW START-->
  67.                     <div class="kode_blog_detail_row">
  68.                         <!--KODE BLOG DETAIL DES START-->
  69.                         <div class="kode_team_wrap">
  70.                             <!--CONTAINER START-->
  71.                             <div class="container">
  72.                                 <!--SECTION HDG START-->
  73.                                 <div class="section_hdg hdg_2 hdg_3">
  74.                                     <h3>{{ 'Pictures of Masjid'|trans }} {{ masjid.translations[app.request.locale].name }}</h3>
  75.                                     <span><i class="fa icon-art"></i></span>
  76.                                 </div>
  77.                                 <!--SECTION HDG END-->
  78.                                 <div class="kode-team-slide">
  79.                                     {% if masjid.pictures|length > 0 %}
  81.                                     {% for pic in masjid.pictures %}
  82.                                     <div>
  83.                                         <div class="kode_tem_fig">
  84.                                             <figure>
  85.                                                 <img src="{{ pic.path|imagine_filter('slide')}}" alt="{{ masjid.translations[app.request.locale].name }}" alt="{{ masjid.translations[app.request.locale].name }}">
  86.                                                 <figcaption>
  87.                                                     <!--<h4>{{ pic.title }}</h4>
  88.                                                     <p>{{ pic.caption }}</p>-->
  89.                                                     <ul class="kode_social_icon">
  90.                                                         <li>
  91.                                                             <a class="hvr-ripple-out" 
  92.                                                                href="http://www.facebook.com/sharer.php?u={{absolute_url(path('masjid_show',{'slug':masjid.slug}))}}" 
  93.                                                                onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
  94.                                                                 <i class="fa fa-facebook"></i>
  95.                                                             </a>
  96.                                                         </li>
  97.                                                         <li>
  98.                                                             <a class="hvr-ripple-out" 
  99.                                                                href="https://twitter.com/share?url={{absolute_url(path('masjid_show',{'slug':masjid.slug}))}}" 
  100.                                                                onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">
  101.                                                                 <i class="fa fa-twitter"></i>
  102.                                                             </a>
  103.                                                         </li>
  104.                                                     </ul>
  105.                                                 </figcaption>
  106.                                             </figure>
  107.                                         </div>
  108.                                         
  109.                                     </div>
  110.                                     {% endfor %}
  112.                                 {% else %}
  113.                                         <div>
  114.                                             <i class="fa icon-art" style="font-size:200px" aria-hidden="true"></i>
  115.                                         </div>
  116.                                     {% endif %}
  117.                                 </div>
  118.                             </div>
  119.                             <!--CONTAINER END-->
  120.                         </div>
  121.                         <div class="kode_blog_detail_des">
  123.                             <div class="kode_blog_detail_text">
  124.                                 <h3><a href="#">{{ masjid.translate(app.request.locale).getName() }}</a></h3>
  125.                                 <ul class="kode_meta meta_2">
  126.                                     <li><i class="fa fa-clock-o"></i>{{ masjid.dateOfConsctruct|date('d-m-Y') }}</li>
  127.                                     <li><i class="fa fa-user"></i>  {{ "masjid.show.byAuthor"|trans }} Admin</li>
  128.                                     <li><a href="#comments_anchor"><i class="fa fa-comment"></i>{{ "masjid.show.leaveComment"|trans }}</a></li>
  129.                                 </ul>
  130.                             </div>
  131.                             
  132.                         </div>
  133.                         <!--KODE BLOG DETAIL DES END-->
  134.                         <blockquote class="blog_quote">
  135.                             <span><i class="fa icon-art"></i></span>
  136.                             <div class="quote_text">
  137.                                 <ul>
  138.                                     <li> {{ "masjid.show.info.comm"|trans }} <a href="{{ path('community_show',{slug:masjid.community.slug})}}">{{ masjid.community.translations[app.request.locale].name}}</a></li>
  139.                                     <!--<li>{{ "masjid.show.info.date"|trans }} {{ masjid.dateOfConsctruct|date('d-m-Y') }}</li>-->
  140.                                     <li>{{ "masjid.show.info.style"|trans }} {{ masjid.style }}</li>
  141.                                     <!-- <li>{{ "masjid.show.info.surface"|trans }} {{ masjid.surface }}</li>-->
  142.                                     <!-- <li>{{ "masjid.show.info.height"|trans }} {{ masjid.height }}</li>-->
  143.                                     {% if masjid.isWomen %} <li><i  class="fa fa-female"></i>&nbsp; &nbsp; &nbsp;        {{ "masjid.show.info.lady"|trans }}</li>{% endif %}
  144.                                     {% if masjid.isJumah  %}<li><i  class="fa icon-art"></i>&nbsp; &nbsp; &nbsp;         {{ "masjid.show.info.jumah"|trans }} </li>{% endif %}
  145.                                     {% if masjid.isEnglish  %}<li><i  class="fa fa-language"></i>&nbsp; &nbsp; &nbsp;         {{ "masjid.show.info.english"|trans }} </li>{% endif %}
  146.                                 </ul>
  147.                             </div>
  148.                         </blockquote>
  151.                         <p class="blog_text">
  152.                             {{ masjid.description }}
  153.                         </p>
  155.                         <!--KODE DETAIL FIG START-->
  157.                         <div class="kode_contact_map">
  158.                             <div id="map-canvas" class="map-canvas"></div>
  159.                         </div>
  160.                         <!--KODE DETAIL FIG FIG 2 END-->
  162.                         <!--KODE SOCIAL SHARE START-->
  163.                         <div class="kode_social_share">
  164.                             <a href="#"><i class="fa fa-share-alt"></i>{{ "masjid.show.share"|trans }}</a>
  165.                             <ul class="social_meta">
  166.                                 <li><a class="hvr-ripple-out" href="http://www.facebook.com/sharer.php?u={{absolute_url(path('masjid_show',{'slug':masjid.slug}))}}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-facebook"></i></a></li>
  167.                                 <li><a class="hvr-ripple-out" href="https://twitter.com/share?url={{absolute_url(path('masjid_show',{'slug':masjid.slug}))}}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-twitter"></i></a></li>
  168.                             </ul>
  169.                             <!--KODE PAGINATION START-->
  170.                             <div class="kode_pagination">
  171.                             {% if masjidPrev is not null %}<a class="prve" href="{{ path('masjid_show',{slug:masjidPrev.slug}) }}"><i class="fa fa-arrow-left"></i>{{ 'masjid.pagination.prev'|trans }}</a>{% endif %}
  172.                             {% if masjidNext is not null %}<a class="next" href="{{ path('masjid_show',{slug:masjidNext.slug}) }}">{{ 'masjid.pagination.next'|trans }}<i class="fa fa-arrow-right"></i></a>{% endif %}
  173.                             </div>
  174.                             <!--KODE PAGINATION END-->
  175.                         </div>
  176.                         <!--KODE SOCIAL SHARE END-->
  178.                         <!--KODE COMMENTS MARGIN START-->
  180.                         <div id="comments_anchor" class="kode_comments margin">
  181.                             <h4 class="comment_title">{{  pagination|length }} {{ "masjid.show.comment"|trans }}{% if pagination|length > 1 %}s {% endif %}</h4>
  182.                             <ul id="kode-comment" class="comment">
  183.                                 {% for comment in pagination %}
  184.                                         <li>
  185.                                             <div class="comment_des {% if loop.last %} {% else %}padding {% endif %}">
  186.                                                 <figure class="them_overlay">
  187.                                                     <img src="{{ asset('extra-images/comment.jpg') }}" alt="comment on sharjah-masjids.com ">
  188.                                                 </figure>
  189.                                                 <div class="comment_text">
  190.                                                     <p>{{ comment.content }}</p>
  191.                                                     <ul class="kode_meta">
  192.                                                         <li><a href="#"><i class="fa fa-user"></i>{{ comment.author.name|title }}</a></li>
  193.                                                     </ul>
  194.                                                 </div>
  195.                                             </div>
  196.                                         </li>
  197.                                 {% else %}
  198.                                     <li><em>{{ 'no comment found'|trans }}</em></li>
  199.                                 {% endfor %}
  200.                             </ul>
  201.                         </div>
  204.                         <!--KODE COMMENTS MARGIN END-->
  205.                         {{ render(controller('App\\Controller\\Front\\CommentController::new', {masjidid: masjid.id})) }}
  206.                         <!--KODE COMMENTS MARGIN START-->
  208.                         <!--KODE COMMENTS MARGIN END-->
  210.                         <!--ROW START-->
  211.                         <div class="row">
  212.                             <div class="kode_blog_detail_post">
  213.                                 <div class="col-md-12">
  214.                                     <!--SECTION HDG START-->
  215.                                     <div class="section_hdg">
  216.                                         <h3>{{ 'about.random.mosque'|trans }}</h3>
  217.                                         <span><i class="fa icon-art"></i></span>
  218.                                     </div>
  219.                                     <!--SECTION HDG END-->
  220.                                 </div>
  221.                                 {% for masjid in masjidRandom %}
  222.                                 <div class="col-md-6">
  223.                                     <div class="kode_blog_des des_2">
  224.                                         <figure class="them_overlay">
  225.                                             <img src="{{ masjid.MainPic|imagine_filter('more') }}" width="350px" height="272px" alt="sharjah-masjids.com - {{masjid.translations[app.request.locale].name}}">
  226.                                             <a  class="expand_btn btn_hover2" href="{{path('masjid_show',{'slug':masjid.slug})}}"><i class="fa icon-arrows-1"></i></a>
  227.                                         </figure>
  228.                                         <div class="kode_blog_text">
  229.                                             <h4><a href="{{path('masjid_show',{'slug':masjid.slug})}}"><span>{{ masjid.translations[app.request.locale].name }}</a></h4>
  230.                                             <div class="kode_blog_caption">
  231.                                                 <ul class="kode_meta meta_2">
  232.                                                     <li><a href="{{path('community_show',{slug:masjid.community.slug})}}"><i class="fa icon-art"></i>{{ masjid.community.translations[app.request.locale].name }}</a></li>
  233.                                                     <li><a href="{{path('masjid_show',{slug:masjid.slug})}}"><i class="fa fa-camera"></i>{{ masjid.pictures|length }}</a></li>
  234.                                                 </ul>
  235.                                                 
  236.                                             </div>
  237.                                         </div>
  238.                                     </div>
  239.                                 </div>
  240.                                 {% endfor %}
  242.                             </div>
  243.                         </div>
  244.                         <!--ROW END-->
  245.                     </div>
  246.                     <!--KODE BLOG DETAIL ROW END-->
  247.                 </div>
  250.                 {{ render(controller("App\\Controller\\Front\\MainController::sidebar", { 'masjidId': masjid.id }) )}}
  251.             </div>
  252.         </div>
  253.         <!--CONTAINER END-->
  254.     </div>
  255.     <!--KODE BLOG MADIUM WRAP END-->
  257. {% endblock %}
  258. {% block javascripts  %}
  259.     {{ parent() }}
  260.     <!--js/jquery.downCount.js start-->
  261.     <script src="{{ asset('js/jquery.dlmenu.js') }}"></script>
  262.     <!--Map-->
  263. <script src = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0-beta.1/leaflet.min.js"></script>
  264. <script>
  265.  // Creating map options
  266.     var mapOptions = {
  267.         center: [{{masjid.latitude}}, {{masjid.longitude}}],
  268.         zoom: 17
  270.     }
  272.     // Creating a map object
  273.     var map = new L.map('map-canvas', mapOptions);
  275.     // Creating a Layer object
  276.     var layer = new     L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
  278.     // Adding layer to the map
  279.     map.addLayer(layer);
  282.     var thisIcon = new L.Icon({
  283.     iconUrl: "{{asset('images/map_icon.png')}}",
  284.     iconAnchor: new L.Point(40, 40),
  285.     });
  287.     let iconOptions = {
  288.         title: "{{masjid.translations[app.request.locale].name}}",
  289.         icon: thisIcon
  291.     }
  292.     let marker = new L.Marker([{{masjid.latitude}}, {{masjid.longitude}}] , iconOptions);
  293.     marker.addTo(map);
  296.  </script>
  297. {% endblock %}