templates/gcs-community/gcs-community.html.twig line 1

Open in your IDE?
  1. {% extends "layout/layout.html.twig" %}
  2. {% block title %}GFS - Resources
  3. {% endblock %}
  5. {% block content %}
  6.     {% set user = app.session.get('loginUserName') %}
  7.     <!--Start Main Slider-->
  8.     <section class="main-slider-section product-main-slider resources-section-slider">
  9.         <div class="container container-lg">
  10.             {% if editmode %}
  11.                 {{ pimcore_image("myImage",{
  12.                         "title" : "Drag image for desktop",
  13.                         "height" : 200
  14.                     }) }}
  15.                 {{ pimcore_image("mobileImage",{
  16.                         "title" : "Drag image for mobile",
  17.                         "height" : 200
  18.                     }) }}
  19.             {% endif %}
  20.             <div class="custom-slider singal-slider main-slider">
  22.                 <div class="slide">
  23.                     <div class="slide-media slide-media-desktop">
  24.                         {% if not editmode %}
  25.                             {{ pimcore_image("myImage",{
  26.                                         "title" : "Drag image for desktop",
  27.                                         "width" : 200,
  28.                                         "height" : 200
  29.                                     }) }}
  30.                         {% endif %}
  31.                     </div>
  33.                     <div class="slide-media slide-media-mobile">
  34.                         {% if not editmode %}
  35.                             {{ pimcore_image("mobileImage",{
  36.                                         "title" : "Drag image for mobile",
  37.                                         "width" : 200,
  38.                                         "height" : 200
  39.                                     }) }}
  40.                         {% endif %}
  41.                     </div>
  42.                     <div class="silde-content-box">
  43.                         <div class="slide-content">
  44.                             <h1>
  45.                                 <span class="title-sm d-block">{{ pimcore_input("headline",{
  46.                                             "placeholder": "headimg one line"
  47.                                         }) }}</span>
  48.                                 <span class="title-lg underline-end">{{ pimcore_input("headline2",{
  49.                                             "placeholder": "headimg two line"
  50.                                         }) }}</span>
  51.                             </h1>
  52.                         </div>
  53.                     </div>
  54.                 </div>
  55.             </div>
  56.         </div>
  57.     </section>
  58.     <!--End Main Slider-->
  60.     <!--Start Breadcrumbs-->
  61.     <div class="breadcrumb-holder">
  62.         <ol class="breadcrumb">
  63.             <li class="breadcrumb-item">
  64.                 <a href="/{{app.request.locale}}">{{'Home'|trans}}</a>
  65.             </li>
  66.             <li class="breadcrumb-item">{{'Resources'|trans}}</li>
  67.             <li class="breadcrumb-item active" aria-current="page">
  68.                 {{"Gcs Community" | trans}}
  69.             </li>
  70.         </ol>
  71.     </div>
  72.     <!--End Breadcrumbs-->
  73.     <section>
  74.         <div class="container">
  75.             <div class="row">
  76.                 <div class="col-12">
  77.                     <h2 class="heading text-center mt-5">
  78.                         {{ pimcore_input("gcsCommunity",{
  79.                             "placeholder" : "Gcs & Community"
  80.                         }) }}
  81.                     </h2>
  82.                 </div>
  83.             </div>
  84.             <div class="row">
  85.                 <div class="col-12">
  86.                     <div class="community-box">
  87.                         <div class="community-box-item">
  88.                             <div class="card">
  89.                             <div class="card-img">
  90.                                 {# <img src="/static/assets/images/cullinary-champ-transparent.png" alt="Gcs Community" class="img-fluid"> #}
  91.                                     {{ pimcore_image("cullinaryTales",{
  92.                                         "imgAttributes": {'class': 'img-fluid', 'alt': 'Gcs Community'}
  93.                                     }) }}
  94.                                 
  95.                                 </div>
  96.                             </div>
  98.                             <div class="community-box-shared">
  99.                                 {% for i in pimcore_block("cullinaryTalesBlock").iterator %}
  100.                                     
  101.                                         {% if editmode %}
  102.                                             {{ pimcore_video("campaignVideo") }}
  103.                                         {% else %}    
  104.                                             {% if pimcore_video("campaignVideo").getData().path %}
  105.                                                 <div class="card video-poster-card" data-video-src="{{pimcore_video("campaignVideo").getData().path}}" data-video-type="video/mp4">
  106.                                                     <video width="100%" preload="metadata" muted>
  107.                                                         <source src="{{pimcore_video("campaignVideo").getData().path}}" type="video/mp4">
  108.                                                         Your browser does not support the video tag.
  109.                                                     </video>
  110.                                                     <i class="fas fa-play-circle"></i>
  111.                                                 </div>
  112.                                             {% endif %}
  113.                                         {% endif %}
  114.                                     
  115.                                 {% endfor %}                    
  116.                             </div>
  117.                         </div>
  119.                         <div class="community-box-item">
  120.                             <div class="card">
  121.                                 <div class="card-img">
  122.                                     {# <img src="/static/assets/images/Recipe-To-Success.png" alt="Gcs Community" class="img-fluid"> #}
  123.                                     {{ pimcore_image("cullinaryRecipe",{
  124.                                         "imgAttributes": {'class': 'img-fluid', 'alt': 'Gcs Community'}
  125.                                     }) }}
  126.                                 </div>
  127.                             </div>
  129.                             <div class="community-box-shared">
  130.                                 {% for i in pimcore_block("cullinaryRecipeBlock").iterator %}
  131.                                         {% if editmode %}
  132.                                             {{ pimcore_video("campaignRecipeVideo") }}
  133.                                         {% else %}    
  134.                                             {% if pimcore_video("campaignRecipeVideo").getData().path %}
  135.                                                 <div class="card video-poster-card" data-video-src="{{pimcore_video("campaignRecipeVideo").getData().path}}" data-video-type="video/mp4">
  136.                                                     <video width="100%" preload="metadata" muted>
  137.                                                         <source src="{{pimcore_video("campaignRecipeVideo").getData().path}}" type="video/mp4">
  138.                                                         Your browser does not support the video tag.
  139.                                                     </video>
  140.                                                     <i class="fas fa-play-circle"></i>
  141.                                                 </div>
  142.                                                 
  143.                                             {% endif %}
  144.                                         {% endif %}
  145.                                     
  146.                                 {% endfor %}
  147.                             </div>
  148.                         </div>
  149.                     </div>
  151.                 </div>
  152.             </div>
  153.         </div>
  154.     </section>
  156.     <!--Start Info Media-->
  158.     <!-- Start video modal -->
  159.     <div class="modal fade video-modal" id="communityVideoModal" tabindex="-1" role="dialog" aria-labelledby="communityVideoModal" aria-hidden="true" data-backdrop="static">
  160.         <div class="modal-dialog modal-dialog-centered" role="document">
  161.             <div class="modal-content">
  162.                 <div class="video-modal-box">
  163.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  164.                         <span aria-hidden="true">&times;</span>
  165.                     </button>
  166.                     <div class="video-modal-box-media">
  167.                         <figure class="video-modal-box-media-figure">
  168.                             <video id="communityModalVideo" controls playsinline preload="auto" loop="false" controlslist="nodownload">
  169.                                 Your browser does not support the video tag.
  170.                             </video>
  171.                         </figure>
  172.                     </div>
  173.                 </div>
  174.             </div>
  175.         </div>
  176.     </div>
  177.     <!-- End video modal -->
  179.     <script>
  180.         $(document).ready(function () { 
  181.             // Handle video click in community-box-shared
  182.             $('.community-box-shared .community-video').on('click', function (e) {
  183.                 e.preventDefault();
  184.                 e.stopPropagation();
  186.                 var clickedVideo = $(this);
  187.                 var modalVideo = $('#communityModalVideo');
  189.                 // Clear existing sources
  190.                 modalVideo.find('source').remove();
  192.                 // Extract sources from clicked video element
  193.                 clickedVideo.find('source').each(function () {
  194.                     var src = $(this).attr('src');
  195.                     var type = $(this).attr('type');
  196.                     modalVideo.append('<source src="' + src + '" type="' + type + '">');
  197.                 });
  199.                 // Load and show modal
  200.                 modalVideo[0].load();
  201.                 $('#communityVideoModal').modal('show');
  202.             });
  204.             // Handle video poster card click
  205.             $('.video-poster-card').on('click', function (e) {
  206.                 e.preventDefault();
  207.                 e.stopPropagation();
  209.                 var card = $(this);
  210.                 var modalVideo = $('#communityModalVideo');
  211.                 var videoSrc = card.data('video-src');
  212.                 var videoType = card.data('video-type');
  214.                 // Clear existing sources
  215.                 modalVideo.find('source').remove();
  217.                 // Add new source
  218.                 if (videoSrc) {
  219.                     modalVideo.append('<source src="' + videoSrc + '" type="' + (videoType || 'video/mp4') + '">');
  220.                 }
  222.                 // Load and show modal
  223.                 modalVideo[0].load();
  224.                 $('#communityVideoModal').modal('show');
  225.             });
  227.             // Play video when modal is shown
  228.             $('#communityVideoModal').on('shown.bs.modal', function () {
  229.                 $('#communityModalVideo')[0].play();
  230.             });
  232.             // Pause video when modal is hidden
  233.             $('#communityVideoModal').on('hidden.bs.modal', function () {
  234.                 $('#communityModalVideo')[0].pause();
  235.                 $('#communityModalVideo')[0].currentTime = 0;
  236.             });
  237.         });
  238.     </script>
  239.     {% if (app.request.locale =='ar') %}
  240.         {% set topMenu = app.request.requesturi|replace({'/ar/': '/en/'}) %}
  241.     {% else %}
  242.         {% set topMenu = app.request.requesturi|replace({'/en/': '/ar/'}) %}
  243.     {% endif %}
  245.     <script>
  246.         var _TopMenuLink = "{{ topMenu }}" + window.location.search;
  247.     </script>
  248.     <!-- Resource Listing More Topics End -->
  249. {% endblock %}